js插件---datatables如何使用

一、總結

一句話總結：a、引入css和js（不要忘記css）；b、js代碼啟動插件（里面可以用參數控制各種功能）

1、dataTables如何顯示控制行（比如顯示多少條結果，搜索等）？

因為我沒有引入插件對應的css，所以導致控制條沒有出現

<link rel="stylesheet" href="../dist/amazeui.datatables.css">

所以啟示就是一個插件一般都有js和css，如果插件使用出現問題，首先想到這個

2、dataTables的強大功能體現在哪里？

有搜索

有顯示多少條數據

有自己分頁

每列都有排序

有中文排序

3、dataTables如何實現中文排序支持（官方文檔的具體使用）？

中文排序基於 localeCompare 實現，在不同瀏覽器上會有差異。如果需要更一致的排序，可以通過后端輸出拼音進行排序。

實現步驟：

引入中文排序插件，或者把以下代碼粘貼到初始化函數之前：

jQuery.extend(jQuery.fn.dataTableExt.oSort, {
  "chinese-string-asc": function(s1, s2) { return s1.localeCompare(s2); }, "chinese-string-desc": function(s1, s2) { return s2.localeCompare(s1); } });

初始化的時候指定哪些欄目是中文字符（columnDefs 文檔）：

$('#sorting-chinese').dataTable({ columnDefs: [ {type: 'chinese-string', targets: '_all'} ] });

具體實現：

 1 <script>
 2   jQuery.extend(jQuery.fn.dataTableExt.oSort, {
 3     "chinese-string-asc": function(s1, s2) {
 4       return s1.localeCompare(s2);
 5     },
 6 
 7     "chinese-string-desc": function(s1, s2) {
 8       return s2.localeCompare(s1);
 9     }
10   });
11 
12   $(function() {
13     $('#example').DataTable();
14     $('#example-r').DataTable({
15       responsive: true,
16       dom: 'ti'
17     });
18 
19     $('#sorting-chinese').dataTable({
20       columnDefs: [
21         {type: 'chinese-string', targets: '_all'}
22       ]
23     });
24   });
25 </script>

4、下載的js插件中存放插件用到的js和css的目錄名叫什么？

dist

沒在lib里面，在dist里面

二、js插件--datatables如何使用

1、截圖

2、代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Document</title>
  6     <!-- amazeui的默認引入 -->
  7     <link rel="stylesheet" href="../../../css/amazeui.min.css">
  8     <script src="../../../js/jquery.min.js"></script>
  9     <script src="../../../js/amazeui.min.js"></script>
 10 
 11     <!-- 插件對應的js和css -->
 12     <script src="../dist/amazeui.datatables.js"></script>
 13     <link rel="stylesheet" href="../dist/amazeui.datatables.css">
 14 
 15 </head>
 16 <body>
 17 
 18 <table class="am-table am-table-striped am-table-bordered am-table-compact" id="example">
 19   <thead>
 20   <tr>
 21     <th>Rendering engine</th>
 22     <th>Browser</th>
 23     <th>Platform(s)</th>
 24     <th>Engine version</th>
 25     <th>Grade</th>
 26   </tr>
 27   </thead>
 28   
 29   <tbody>
 30   <tr class="odd gradeX">
 31     <td>Trident</td>
 32     <td>Internet
 33       Explorer 4.0</td>
 34     <td>Win 95+</td>
 35     <td class="center"> 4</td>
 36     <td class="center">X</td>
 37   </tr>
 38   <tr class="even gradeC">
 39     <td>Trident</td>
 40     <td>Internet
 41       Explorer 5.0</td>
 42     <td>Win 95+</td>
 43     <td class="center">5</td>
 44     <td class="center">C</td>
 45   </tr>
 46   </tr>
 47     <tr class="gradeX">
 48     <td>Misc</td>
 49     <td>Lynx</td>
 50     <td>Text only</td>
 51     <td class="center">-</td>
 52     <td class="center">X</td>
 53   </tr>
 54   <tr class="gradeC">
 55     <td>Misc</td>
 56     <td>IE Mobile</td>
 57     <td>Windows Mobile 6</td>
 58     <td class="center">-</td>
 59     <td class="center">C</td>
 60   </tr>
 61   <tr class="gradeA">
 62     <td>Misc</td>
 63     <td>NetFront 3.1</td>
 64     <td>Embedded devices</td>
 65     <td class="center">-</td>
 66     <td class="center">C</td>
 67   </tr>
 68   <tr class="gradeA">
 69     <td>Misc</td>
 70     <td>NetFront 3.4</td>
 71     <td>Embedded devices</td>
 72     <td class="center">-</td>
 73     <td class="center">A</td>
 74   </tr>
 75   <tr class="odd gradeX">
 76     <td>Trident</td>
 77     <td>Internet
 78       Explorer 4.0</td>
 79     <td>Win 95+</td>
 80     <td class="center"> 4</td>
 81     <td class="center">X</td>
 82   </tr>
 83   <tr class="even gradeC">
 84     <td>Trident</td>
 85     <td>Internet
 86       Explorer 5.0</td>
 87     <td>Win 95+</td>
 88     <td class="center">5</td>
 89     <td class="center">C</td>
 90   </tr>
 91   </tr>
 92     <tr class="gradeX">
 93     <td>Misc</td>
 94     <td>Lynx</td>
 95     <td>Text only</td>
 96     <td class="center">-</td>
 97     <td class="center">X</td>
 98   </tr>
 99   <tr class="gradeC">
100     <td>Misc</td>
101     <td>IE Mobile</td>
102     <td>Windows Mobile 6</td>
103     <td class="center">-</td>
104     <td class="center">C</td>
105   </tr>
106   <tr class="gradeA">
107     <td>Misc</td>
108     <td>NetFront 3.1</td>
109     <td>Embedded devices</td>
110     <td class="center">-</td>
111     <td class="center">C</td>
112   </tr>
113   <tr class="gradeA">
114     <td>Misc</td>
115     <td>NetFront 3.4</td>
116     <td>Embedded devices</td>
117     <td class="center">-</td>
118     <td class="center">A</td>
119   </tr>
120   <!-- more data -->
121   </tbody>
122   <tfoot>
123   <tr class="gradeU">
124     <td>Other browsers</td>
125     <td>All others</td>
126     <td>-</td>
127     <td class="center">-</td>
128     <td class="center">U</td>
129   </tr>
130   <tr>
131     <th>Rendering engine</th>
132     <th>Browser</th>
133     <th>Platform(s)</th>
134     <th>Engine version</th>
135     <th>Grade</th>
136   </tfoot>
137 </table>
138 <script>
139   jQuery.extend(jQuery.fn.dataTableExt.oSort, {
140     "chinese-string-asc": function(s1, s2) {
141       return s1.localeCompare(s2);
142     },
143 
144     "chinese-string-desc": function(s1, s2) {
145       return s2.localeCompare(s1);
146     }
147   });
148   $(function() {
149     $('#example').DataTable();
150   });
151 </script>
152 
153 </body>
154 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Django使用DataTables插件總結前端插件之Datatables使用--上篇前端插件之Datatables使用--下篇使用jquery datatables插件遇到fnReloadAjax的問題 JQuery插件之Jquery.datatables.js用法及API JQuery插件之Jquery.datatables.js用法及api datatables的使用 jquery表格插件Datatables使用、快速上手 jquery 的datatables插件問題 metronic 表格插件 datatables