Bootstrap框架----DataTables列表摺疊列

阿新 • • 發佈：2019-01-11

$(document).ready(function() { $('.datepicker').datetimepicker({ language : 'zh-CN', autoclose : true }); refreshTable();//重新整理列表資料內容 clickEvent();//繫結表格中的按鈕事件 //點選查詢 $('button.query').on("click", function() { refreshTable(); clickEvent(); }); $('button.add'

).on('click',function(){ location.href = '/create'; }); }); function clickEvent(){ $('#table').on('click','.js-delete',function(){ if(confirm('確認刪除該條資料?')){ var id = $(this).attr('data-id'); $.get('/delete?id='+id+'', function(result){ console.log(result); if

(result==0){ alert('刪除成功'); window.location.reload(); } }) } }).on('click','.js-edit',function(){ var id = $(this).attr('data-id'); location.href = '/edit?id='+id+''; }) } function refreshTable(){ var

$searchForm = $('#search_form').on('submit', function () { $dt.DataTable().searchEx({}).draw(); return false; }); var $dt = $('#table').on('preXhr.dt', function (e, settings, data) { //data.search.value = $searchForm.formGet(); }).dataTable({ "columns" : [ { "data" : "name", "class" : "text-center" }, { "data" : "tel", "class" : "text-center", "render" : function(data, type, row) { if(data){ var ms="00-"; ms=row.name+"的電話"+ms+data; return ms; } return ""; } }, { "data" : "gender", "class" : "text-center", "render" : function(data, type, row) { if(data==0){ return "女"; }else if(data==1){ return "男"; } return ""; } }, { "data" : "creatTime", "class" : "text-center", "render" : function(data, type, row) { return new Date(data).Format("yyyy-MM-dd hh:mm:ss"); } }, { "data" : "id", "class" : "text-center", "render" : function(data, type, row) { return '<span class="btn btn-primary btn-xs ml-5 js-edit" data-id="'+data+'">編輯</span> <span class="btn btn-danger btn-xs ml-5 js-delete" data-id="'+data+'">刪除</span>'; } }, { "data": "id", "class": "text-center", "render": function (id, type, row, position) { return '<span class="expand-detail">...</span>'; } } ], "createdRow": function (row, data, index) { $(row).attr('index', index); }, "ajax" : {//類似jquery的ajax引數，基本都可以用。 type : "post",//後臺指定了方式，預設get，外加datatable預設構造的引數很長，有可能超過get的最大長度。 url : "/listData", dataSrc : "data",//預設data，也可以寫其他的，格式化table的時候取裡面的資料 data : function(d) {//d 是原始的傳送給伺服器的資料，預設很長。 var param = {};//因為服務端排序，可以新建一個引數物件 param.start = d.start;//開始的序號 param.length = d.length;//要取的資料的 var formData = $( "#search_form") .serializeArray();//把form裡面的資料序列化成陣列 formData .forEach(function(e) { param[e.name] = e.value; }); return param;//自定義需要傳遞的引數。 }, }, //"ajax": $.fn.dataTable.pagerAjax({url: "/listData"}), "destroy":true, lengthChange : false, serverSide : true,//分頁，取資料等等的都放到服務端去 searching : false, processing : true,//載入資料的時候是否顯示“載入中” bDestroy : true, pageLength : 20,//首次載入的資料條數 ordering : false,//排序操作在服務端進行，所以可以關了。 language : { processing : "載入中",//處理頁面資料的時候的顯示 paginate : {//分頁的樣式文字內容。 previous : "上一頁", next : "下一頁", first : "第一頁", last : "最後一頁" }, zeroRecords : "沒有內容",//table tbody內容為空時，tbody的內容。 //下面三者構成了總體的左下角的內容。 info : "第 _PAGE_/_PAGES_頁共 _TOTAL_條記錄",//左下角的資訊顯示，大寫的詞為關鍵字。 infoEmpty : "第 _PAGE_/_PAGES_頁共 _TOTAL_條記錄",//篩選為空時左下角的顯示。 infoFiltered : ""//篩選之後的左下角篩選提示(另一個是分頁資訊顯示，在上面的info中已經設定，所以可以不顯示)， }, "columnDefs": [{ "defaultContent": "", "targets": "_all" }] }).on('click', 'a[row-index]', function () { }).on('click', 'span.expand-detail', function (event) { toggleDetailRow($(this).closest("tr").attr("index")); }); /** * toggle詳情內容 * @param index 展開詳情的索引 * @param forceUpdate 是否強制更新內容 */ function toggleDetailRow(index, forceUpdate) { var row = $dt.DataTable().row(index); var data = row.data(); var $tr = row.nodes().to$(); var $nextTr = $tr.next("tr"); if ($nextTr.is('.row-detail')) { $nextTr.remove(); // 移除 if (!forceUpdate) return; } var writer = []; writer.push('<tr class="row-detail"><td colspan="' + $tr.children().length + '"><div>'); writer.push($.format('<h4>姓名：{name}</h4>', data)); writer.push('<h4>li樣式：</h4>'); writer.push('<ul class="status-hisotry">'); for (var i = 0;i<3; i++) { i > 0 && writer.push('<li class="glyphicon glyphicon-arrow-right"></li>'); writer.push('<li class="status">'+i+'</li>'); } writer.push('</ul>'); writer.push($.format('<div id="info-{name}">資訊載入中...</div>', data)); writer.push('</div></td></tr>'); $tr.after(writer.join('')); $.ajax({ url: '/findContact?name=' + data.name, cache: true, dataType: 'json' }).done(function (res) { if (!res.code) { if (res.data) { $('#info-' + data.name).replaceWith($.format('<h4>測試ajax獲取資訊：<a href="/findContact?name={name}">{name}</a></h4>', res.data)); } else { $('#info-' + data.name).replaceWith('<h4>未查到相關聯絡人資訊</h4>'); } } else { $('#info-' + data.name).replaceWith(res.error); } }); } } /** * 格式化字串第一個引數為格式化模板 format('this is a {0} template!', 'format'); * format('this is a {0.message} template!', { message: 'format'}); 等同於 * format('this is a {message} template!', { message: 'format' }); */ $.format = function() { var template = arguments[0], templateArgs = arguments, stringify = function(obj) { if (obj == null) { return ''; } else if (typeof obj === 'function') { return obj(); } else if (typeof obj !== 'string') { return JSON.stringify ? JSON.stringify(obj) : obj; } return obj; }; return template.replace(/\{\w+(\.\w+)*\}/g, function(match) { var propChains = match.slice(1, -1).split('.'); var index = isNaN(propChains[0]) ? 0 : +propChains.shift(); var arg, prop; if (index + 1 < templateArgs.length) { arg = templateArgs[index + 1]; while (prop = propChains.shift()) { arg = arg[prop] == null ? '' : arg[prop]; } return stringify(arg); } return match; }); }; //對Date的擴充套件，將 Date 轉化為指定格式的String //月(M)、日(d)、小時(h)、分(m)、秒(s)、季度(q) 可以用 1-2 個佔位符， //年(y)可以用 1-4 個佔位符，毫秒(S)只能用 1 個佔位符(是 1-3 位的數字) //例子： //(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 //(new Date()).Format("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小時 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var k in o) if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length))); return fmt; }

Bootstrap框架----DataTables列表摺疊列

Bootstrap框架----DataTables列表摺疊列

Bootstrap框架----DataTables列表增加備註功能

簡單響應式Bootstrap框架中文官網頁面模板

bootstrap-自定義列表組

FineUI grid列表拓展列

整合django和bootstrap框架

bootstrap框架 - jquery庫 - 引用地址

bootstrap筆記之——列表

【轉】Bootstrap 框架柵格布局系統底層設計原理

BootStrap框架選擇

Springmvc+mybatis+restful+bootstrap框架整合

在Bootstrap框架中，form-control的效果

Bootstrap框架

前端之Bootstrap框架

jquery.datatables設置列隱藏的方法

關於echarts在bootstrap框架下的自適應

WabaCus實現列表操作列的多按鈕執行操作（專案實戰）

使用easyUI+bootStrap框架做一個彈出式的tab標籤頁

bootstrap框架集

03 基於umi搭建React快速開發框架(封裝列表增刪改查)

Bootstrap框架----DataTables列表摺疊列

相關推薦