dataTables 插件學習整理
阿新 • • 發佈：2017-09-06
行處理 var 多少 san lan appendto code 數據 ots
在項目中使用了dataTables 插件，學習整理一下。
dataTables 的官方中文網站 http://www.datatables.club
引入文件：
所有的都要引入 jq文件
1. dataTables 的樣式
<link rel="stylesheet" href="jquery.dataTables.css">
<script src="jquery.dataTable.js">
2. bootstrap 風格的dataTables
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="dataTables.bootstrap.css">
<script src="bootstrap.js">
<script src="jquery.dataTable.js">
<script src="dataTable.bootstrap.js">
HTML 代碼
1 <table id="example" width="100%" class="table table-striped table-bordered"> 2 <thead> 3 <tr> 4 <th>編碼</th> 5 <th>職位</th> 6 <th>姓名</th> 7 <th>狀態</th>8 <th>項目</th> 9 <th>機構</th> 10 <th>操作</th> 11 </tr> 12 </thead> 13 </table>
JS 代碼基本配置
1 var lang = { 2 "sProcessing": "處理中...", 3 "sLengthMenu": "每頁 _MENU_ 項", 4 "sZeroRecords": "沒有匹配結果", 5 "sInfo": "當前顯示第 _START_ 至 _END_ 項，共 _TOTAL_ 項。", 6 "sInfoEmpty": "當前顯示第 0 至 0 項，共 0 項", 7 "sInfoFiltered": "(由 _MAX_ 項結果過濾)", 8 "sInfoPostFix": "", 9 // "sSearch": "本地搜索：", 10 "sUrl": "", 11 "sEmptyTable": "暫無數據", 12 "sLoadingRecords": "載入中...", 13 "sInfoThousands": ",", 14 "oPaginate": { 15 "sFirst": "首頁", 16 "sPrevious": "上頁", 17 "sNext": "下頁", 18 "sLast": "末頁", 19 "sJump": "跳轉" 20 }, 21 "oAria": { 22 "sSortAscending": ": 以升序排列此列", 23 "sSortDescending": ": 以降序排列此列" 24 } 25 }; 26 27 $(‘#example‘).DataTable({ 28 "processing" : true, //DataTables載入數據時，是否顯示進度條 29 "serverSide": true, // 開啟服務端模式 30 "language": lang, //提示信息 31 "autoWidth": false, //自適應寬度， 32 "sScrollY" : 450, //DataTables的高 33 "sScrollX" : 820, //DataTables的寬 34 "columnDefs": [ 35 {"targets": 0, "width": "10%"}, // 設置第一列的寬度 36 {"targets": 1, "width": "10%"}, 37 {"targets": 2, "width": "10%"}, 38 {"targets": 3, "width": "10%"}, 39 {"targets": 4, "width": "20%"}, 40 {"targets": 5, "width": "20%"}, 41 {"targets": 6, "width": "20%"} 42 ], 43 "lengthMenu": [10, 20, 30], // 顯示每頁顯示的條數 44 "stripeClasses": ["odd", "even"], // 為奇偶行添加樣式 45 "searching": true, // 是否允許開啟本地檢索功能 46 "bFilter": false, // 去掉 搜索框 47 "paging": true, // 是否開啟本地分頁 48 "lengthChange": true, //是否允許產品改變表格每頁顯示的記錄數 49 "info": true, // 控制是否顯示表格左下角的信息 50 "bSort": false, // 禁止排序 51 "deferRender": true, // 延遲渲染 52 "pageLength": 10, // 每頁顯示的條數 53 //跟數組下標一樣，第一列從0開始，這裏表格初始化時， 54 "order": [2, ‘asc‘], //asc升序 desc降序 // 下標為2，第三列 生序排列 55 "aoColumnDefs": [{ 56 "orderable": false,// 指定列不參與排序 57 "aTargets": [1,3,4,5,6] // 指定 下標為[1,3,4,5,6]的不排序 58 }], 59 "initComplete": function () { // 給每列添加下拉搜索 60 var api = this.api(); 61 api.columns().indexes().flatten().each(function (i) { 62 if (i != 0 && i != 2 && i != 6) { // 第1，3，7不添加，其余的添加 63 var column = api.column(i); 64 var select = $(‘<select><option value=""></option></select>‘) 65 .appendTo($(column.header())) // 顯示在table中最上面在thead裏面 66 .on(‘change‘, function () { 67 var val = $.fn.dataTable.util.escapeRegex( 68 $(this).val() 69 ); 70 column 71 .search(val ? val : ‘‘, true, false) 72 .draw(); 73 }); 74 75 column.data().unique().sort().each(function (d, j) { 76 var text = $(d).html(); // 獲取 span 裏面的 text 77 var val = $(d).attr("value"); // 獲取span 裏面的自定義屬性 value 78 if(text != null && text.trim() != "" && val != null && text.trim() != ""){ 79 select.append(‘<option value="‘ + val + ‘">‘ + text + ‘</option>‘) 80 } 81 82 }); 83 } 84 85 }); 86 }, 87 "ajax": { // ajax 請求數據 88 "url": "請求路徑", 89 "type": "get" 90 }, 91 "columns":[ 92 {data: name}(後臺返回的字段名), // 有幾列就解析幾次 93 data: tell(後臺返回的字段名), 94 ... 95 // 還可以寫 96 //{ 97 // "data": function (e) { 98 // return e.name; 99 // } 100 // }, 101 102 ] 103 104 105 });
給每一列添加下拉搜索的方法 （2）官方
首先在html中添加
1 <tfoot> 2 <tr> 3 <th></th> 4 <th></th> 5 <th></th> 6 <th></th> 7 <th></th> 8 <th></th> 9 </tr> 10 </tfoot>
js代碼
1 initComplete: function () { 2 var api = this.api(); 3 api.columns().indexes().flatten().each( function ( i ) { 4 var column = api.column( i ); 5 var select = $(‘<select><option value=""></option></select>‘) 6 .appendTo( $(column.footer()).empty() ) // 給tfoot裏面添加select 7 .on( ‘change‘, function () { 8 var val = $.fn.dataTable.util.escapeRegex( 9 $(this).val() 10 ); 11 column 12 .search( val ? ‘^‘+val+‘$‘ : ‘‘, true, false ) 13 .draw(); 14 } ); 15 column.data().unique().sort().each( function ( d, j ) { 16 select.append( ‘<option value="‘+d+‘">‘+d+‘</option>‘ ) 17 } ); 18 } ); 19 }
給每列添加自定義屬性
1 // 在 "columns" 下面添加 2 createdRow: function (row, data, index) { 3 // 給每列添加 自定義屬性 name 4 $(row).attr(‘name‘,data.name); 5 }
給每列添加點擊事件
$(‘#example tbody‘).on( ‘click‘, ‘tr‘, function () { }) ;
自定義的分頁 ，只給後臺傳指定的參數
length // 頁面顯示的條數，每頁顯示多少條、
start // 開始的記錄序號
draw // 當前頁面
1 "ajax": function (data, callback, settings) { 2 //封裝請求參數 3 var param = {}; 4 param.length = data.length;//頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候 5 param.start = data.start;//開始的記錄序號 6 param.draw = data.draw;//當前頁碼 7 8 //ajax請求數據 9 $.ajax({ 10 type: "get", 11 url: "請求路徑", 12 cache: false, //禁用緩存 13 data: param, 14 dataType: "json", 15 success: function (result) { 16 //封裝返回數據 17 var returnData = {}; 18 returnData.draw = result.data.draw;//這裏直接自行返回了draw計數器,應該由後臺返回 19 returnData.recordsTotal = result.data.recordsTotal;//返回數據全部記錄 20 returnData.recordsFiltered = result.data.recordsFiltered;//後臺不實現過濾功能，每次查詢均視作全部結果 21 returnData.data = result.data.data;//返回的數據列表 22 //調用DataTables提供的callback方法，代表數據已封裝完成並傳回DataTables進行渲染 23 //此時的數據需確保正確無誤，異常判斷應在執行此回調前自行處理完畢 24 callback(returnData); 25 } 26 }); 27 },
dataTables 插件學習整理