在web開發過程中表格數據展示是一個很常見的功能，而且用戶對其要求也比較高，性能、易用性等。今天我推薦一款利器給大家——Datatables；Datatables中文網。

　　一、介紹

---

?

Datatables是一款jquery表格插件。它是一個高度靈活的工具，可以將任何HTML表格添加高級的交互功能。(摘抄自Datatables中文網)

　　二、優勢

---

?

• 分頁，即時搜索和排序
• 幾乎支持任何數據源：DOM， javascript， Ajax 和 服務器處理
• 支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各樣的擴展: Editor, TableTools, FixedColumns ……
• 豐富多樣的option和強大的API
• 支持國際化
• 超過2900+個單元測試
• 免費開源 （ MIT license ）！ 商業支持
• 摘抄自Datatables中文網

　　三、Demo(ajax數據源)

---

?

先上效果圖

上代碼

首先需要在html頁面定義帶有表頭的table 1 <table class="table table-bordered table-hover" id="example"> 2 <thead> 3 <tr> 4 <th style="width: 85px">任務編號</th> 5 <th style="width: 20px">PRI</th> 6 <th style="width: 45px">狀態</th> 7 <th >任務標題</th> 8 <th style="width: 60px">客戶</th> 9 <th style="width: 40px">PM</th> 10 <th style="width: 60px">開發</th> 11 <th style="width: 60px">測試</th> 12 <th style="width: 60px">完成時間</th> 13 <th style="width: 300px">備注</th> 14 </tr> 15 </thead> 16 </table>

?

我這里采用ajax數據源?

1 var tt = $('#example').DataTable({ 2 ajax:'/task/get_todoList', 3 columns:[ 4 {'data':"task_no"}, 5 {'data':"PRI"}, 6 {'data':"status"}, 7 {'data':"task_title"}, 8 {'data':"customer_name"}, 9 {'data':"abu_pm"}, 10 {'data':"dev_name"}, 11 {'data':"tester_name"}, 12 {'data':"ekp_expect"}, 13 {'data':"comment"}, 14 ], 15 "columnDefs": [ 16 { 17 // "visible": false, 18 // "targets": [10] 19 }, 20 { 21 "render": function(data, type, row, meta) { 22 return '<a name="view_on_erp" rel="' + row.ekp_oid + '" target="_blank">' + data + '</a>'; 23 }, 24 "targets": 0 25 }, 26 { 27 "render": function(data, type, row, meta) { 28 return task_status[data]; 29 }, 30 "targets": 2 31 }, 32 { 33 "render": function(data, type, row, meta) { 34 switch (row.ekp_task_type){ 35 case "需求": 36 case "升級-零星需求-一般": 37 case "開發類-零星需求-一般": 38 return '<span class="label label-success">需</span>' + data + '</a>'; 39 break; 40 case "BUG": 41 case "產品BUG": 42 case "升級-BUG修改-一般": 43 case "升級-BUG修改-緊急": 44 return '<span class="label label-danger">B</span>' + data + '</a>'; 45 case "升級-咨詢評估": 46 return '<span class="label label-info">咨</span>' + data + '</a>'; 47 default: 48 return '<span class="label label-primary">'+row.ekp_task_type.substring(0,1)+'</span>' + data + '</a>'; 49 } 50 51 }, 52 "targets": 3 53 }, 54 { 55 "render": function(data, type, row, meta) { 56 return (data)? data+'('+row.developer_workload+")":""; 57 }, 58 "targets":6 59 }, 60 { 61 "render": function(data, type, row, meta) { 62 return (data)? data+'('+row.tester_workload+")":""; 63 }, 64 "targets":7 65 }, 66 { 67 "render": function(data, type, row, meta) { 68 return data.substring(0,10); 69 }, 70 "targets":8 71 }, 72 ], 73 "createdRow": function ( row, data, index ) { 74 $(row).attr("rel",data.id); 75 switch (data.status) 76 { 77 case 1: 78 $(row).find("td:eq(6)").addClass("or_doing"); 79 break; 80 case 2: 81 $(row).find("td:eq(7)").addClass("or_doing"); 82 break; 83 84 } 85 }, 86 lengthMenu: [15,30,45,60,75,90,"ALL"],//這里也可以設置分頁，但是不能設置具體內容，只能是一維或二維數組的方式，所以推薦下面language里面的寫法。 87 paging: false,//分頁 88 ordering: true,//是否啟用排序 89 // order: [ [ 0, 'asc' ]], 90 // searching: true,//搜索 91 dom: "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-5'i><'col-sm-7'p>>", 92 language: { 93 lengthMenu: '每頁<select class="form-control input-xsmall">' + '<option value="15">15</option>' + '<option value="30">30</option>' + '<option value="50">50</option>' + '<option value="100">100</option>' + '</select>條記錄',//左上角的分頁大小顯示。 94 search: '搜索：',//右上角的搜索文本，可以寫html標簽 95 paginate: {//分頁的樣式內容。 96 previous: "上一頁", 97 next: "下一頁", 98 first: "第一頁", 99 last: "最后" 100 }, 101 zeroRecords: "沒有找到相關內容",//table tbody內容為空時，tbody的內容。 102 //下面三者構成了總體的左下角的內容。 103 info: "總共_PAGES_ 頁，顯示第_START_ 到第 _END_ ，篩選之后得到 _TOTAL_ 條，初始_MAX_ 條 ",//左下角的信息顯示，大寫的詞為關鍵字。 104 infoEmpty: "0條記錄",//篩選為空時左下角的顯示。 105 infoFiltered: ""//篩選之后的左下角篩選提示， 106 }, 107 showRowNumber:true, 108 bAutoWidth:false, 109 }); View Code

---

四、說說過程中遇到的問題：

---

?

Q1:如何自定義查詢？

A:datatables支持自定義表格布局，你可以根據自己的情況繪制不一樣的布局；我這里是在表格的頂部加入了一個查詢和一個自定義按鈕。

1 $(document).on("click", ".btn-search", function (e) { 2 var keyword = $('.search-form[type="search"]').val(); 3 if(keyword === '') { 4 $.toast("請輸入查找內容","info"); 5 return false; 6 } 7 tt.search(keyword).draw(); 8 });

給查詢按鈕綁定事件，調用datatables的search()方法，然后再重繪datatable（draw（））即可。

Q2:表格報錯，為什么不能正常展示數據？

?

A:這個問題可能由兩種情況導致（我遇到的情況），一種表格頭部定義的列數和數據行定義的列不一樣會提示以上錯誤；第二種情況就是服務端返回的數據格式不正確，第一次使用插件的時候，沒有認證看api導致在這個地方排查了很久才找到原因。

標準數據源格式：

1 { 2 "data": [ 3 { 4 "id": 1, 5 "url": "http://www.gbtags.com/gb/index.htm", 6 "title": "Online Program knowledge share and study platform" 7 }, 8 { 9 "id": 2, 10 "url": "http://www.gbtags.com/gb/listcodereplay.htm", 11 "title": "Share Code Gbtags" 12 }, 13 { 14 "id": 3, 15 "url": "http://www.gbtags.com/gb/gbliveclass.htm", 16 "title": "Online live Gbtags" 17 }, 18 { 19 "id": 4, 20 "url": "http://www.gbtags.com/gb/explore.htm", 21 "title": "Explorer Gbtags" 22 } 23 ] 24 } View Code

Q3:如何給行、列綁定屬性？

A:datatables提供了createdRow這個回掉函數（function ( row, data, index )），當創建當前行時執行，入參分別是當前行js對象、當前行數據、行號。對于單元格的屬性以及數據翻譯都可以使用render函數（function(data, type, row, meta)），入參分別是指當前單元格數據、row是單元格所在行的數據。

?Q4:使用模態窗口編輯行數據后，如何只刷新當前行？

? A：這里可以調用datatables的ajax.reload();第二個參數來控制是否刷新頁面。

?tt.ajax.reload(null,false);?

?Q5:待續....?

轉載于:https://www.cnblogs.com/wonder4/p/5678540.html

總結

以上是生活随笔為你收集整理的聊聊前段插件之Datatables的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。