Hello, welcome to the little sheep blog
阿新 • • 發佈：2018-12-31
1、開始使用DataTables很簡單，只需要引入兩個檔案， 一個css樣式檔案和DataTables本身的指令碼檔案。在DataTables CDN上，可以使用下面這兩個檔案：
css http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css js http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
2、然後在初始化
$(document).ready(function(){ $('#myTable').DataTable(); }); //這樣就可以成功的建立了一個表格了
3、運用datatable是看中它的方便和它的功能 主要功能有【搜尋、排序、顯示條數、分頁、固定頭部、固定幾列、列印、匯出excel、匯出pdf、匯出圖片、等】，那我們說說引數的
var table = $('#example').DataTable({ dom: 'Bfrtip', pageLength: 10, //初始化顯示幾條資料 fixedHeader: true, //這個是用來固定頭部 fixedColumns:{ //這個是用來固定列的 leftColumns: 0, rightColumns: 1 }, lengthMenu: [//顯示幾條資料設定 [5, 10, 20, -1], ['5 條', '10 條', '20 條', '全部'] ], language: { // 這是修改語言的顯示 buttons: { pageLength: { _: "顯示%d條", '-1': "全部顯示" } }, paginate: { first: "首條", previous: "前一頁", next:"下一頁", last: "末頁" }, "info": "第_PAGE_頁,共_PAGES_頁", "infoEmpty": "未找到相關資料", "search": "關鍵字", "zeroRecords": "未找到相關資料", "decimal": ".", "thousands": "," }, buttons: [ //按鈕功能，這個裡面包括匯出，列印的設定 'pageLength', //這個就是將顯示幾頁變成按鈕型別 { text: '匯出PDF', extend: 'pdfHtml5', exportOptions: { //exportOptions這個是當點選匯出是會觸發的 format: { //當在表格中有操作一列或想要去修改匯出的資料，那麼就在這個裡面去修改匯出的資料 header: function (data, column, node) { //這個裡面修改頭部的資料，這個裡面返回來的產數有 data 這個是表頭的中的每一個th中的內容，column 這個是第幾列，node 就是每個th的元素 var heads = new Array(); if (column != title_data.length - 1) { heads.push(data); } return heads; // return 返回的就是你想要顯示的要的資料 }, body: function (data, row, column, node) { //body 是修改的tbody 中的內容 ，這個裡面會多出一個 row 的引數 ，這個引數就當前所在的行，其他的同上 var texts = new Array(); if (column != title_data.length - 1) { texts.push(data); } return texts; } } }, customize: function (doc) { //這個是用來設定你匯出中新增一些其它資訊 和 修改所匯出的名稱 var cols = []; cols[0] = {text:'第三方裝置清單', alignment: 'center'}; var objFooter = {}; objFooter['columns'] = cols; doc['header']= objFooter; doc['content'][0].text = "<?php echo $project; ?>"; } }, { text: "匯出Excel", extend: 'excelHtml5', filename:"<?php echo $project; ?> - 第三方裝置清單", exportOptions: { format: { header:function (data, column, node) { var heads = new Array(); if(column != title_data.length-1){ heads.push(data); } return heads; }, body: function (data, row, column, node) { var texts = new Array(); if(column != title_data.length-1){ texts.push(data); } return texts; } } }, customize: function (win) { console.log(win); var sheet = win.xl.worksheets['sheet1.xml']; $('cols col', sheet).attr({'width':30}); } } ], data:body_data, //data 這個引數就是用來傳入資料的 body_data 就是json資料,這個還有ajax的方法 columns: [ //這個是顯示到介面上的個數據 格式為 {data:'顯示的欄位名'} {data:'name'}, {data:'device_num'}, {data:'device_brand'}, {data:'device_function'}, {data:'remarks'}, {data:'operation', //每一個數據都是可以用來修改傳入的引數 class:'text-center', render: function (data, type, row, meta){ // 這個就是用來修改產數的 if(data.is_modify){ return '<div class="operation_btn"><a target="_black" class="edit_content" data-type="edit" data-device="'+data.device_id+'" data-submission="'+ data.submission_id+'">修改</a>' + '<a href="javascript:;" class="del_content" data-submission="'+ data.submission_id+'">刪除</a></div>'; }else{ return '無許可權'; } } } ] });
４、datatable還有好多的功能，我只說了幾個比較常用到的一些，如果想深入學習請移位
https://datatables.net
５、這上面介紹到了按鈕中的功能，那就會用到一些擴充套件
<link rel="stylesheet" href="/cashflowmerger/css/jquery.dataTables.min.css"> <link rel="stylesheet" href="/cashflowmerger/css/font-awesome.min.css"> <link rel="stylesheet" href="/cashflowmerger/css/daterangepicker.css"> <link rel="stylesheet" href="/cashflowmerger/css/buttons.bootstrap4.min.css"> <link rel="stylesheet" href="/cashflowmerger/css/buttons.dataTables.min.css"> <script src="/cashflowmerger/js/popper.min.js" ></script> <script src="/cashflowmerger/js/jquery.dataTables.min.js"></script> <script src="/cashflowmerger/js/dataTables.buttons.min.js"></script> <script src="/cashflowmerger/js/jszip.min.js"></script> <script src="/cashflowmerger/js/pdfmake.js"></script> <script src="/cashflowmerger/js/vfs_fonts.js"></script> <script src="/cashflowmerger/js/buttons.html5.js"></script> <script src="/cashflowmerger/js/moment.min.js"></script>
6、修改 order.fixed 設定
1、首先需要新增一個js dataTables.rowGroup.js 2、table.rowGroup().dataSrc(data_column); //data_column 是想要定死排序的那一列 ３、事件監聽機制 table.on('rowgroup-datasrc',function(e,dt,val) { table.order.fixed({pre: [[ val, 'desc' ]]}).draw(); });
7、當資料更新時觸發事件
$.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var age = parseFloat( data[6] ) || 0; if( ( isNaN( min_data ) && isNaN( max_data ) ) || ( isNaN( min_data ) && age <= max_data ) || ( min_data <= age && isNaN( max_data ) ) || ( min_data <= age && age <= max_data ) ) { return true; } return false; } );
資料更新
table.draw();
注意 程式碼放到我的github上面了，這個裡面還有包括解決pdf匯出亂碼的問題
//github 地址 https://github.com/a-little-sheep/datatable/tree/master