dataTables 插件學習整理
在項目中使用了dataTables 插件，學習整理一下。css
dataTables 的官方中文網站 http://www.datatables.clubhtml
引入文件：jquery
全部的都要引入 jq文件ajax
1. dataTables 的樣式json
<link rel="stylesheet" href="jquery.dataTables.css">bootstrap
<script src="jquery.dataTable.js">api
2. bootstrap 風格的dataTables數組
<link rel="stylesheet" href="bootstrap.css">緩存
<link rel="stylesheet" href="dataTables.bootstrap.css">app
<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 },
相關文章
- 1. dataTables 插件學習整理
- 2. Datatables表格插件學習
- 3. jQuery-DataTables插件
- 4. rollup學習整理-2-插件詳解
- 5. eclipse插件大全整理學習
- 6. JQuery DataTables學習
- 7. JQuery插件datatables相關api
- 8. jquery 的datatables插件問題
- 9. metronic 表格插件 datatables
- 10. dataTables使用整理(一)
- 更多相關文章...
- • Maven 插件 - Maven教程
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
