dataTables 外掛程式學習整理

在專案中使用了datatables 外掛程式，學習整理一下。

datatables 的官方中文** 

引入檔案：

所有的都要引入 jq檔案

1. datatables 的樣式

2. bootstrap 風格的datatables

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>
11tr
>
12thead
>
13table
>

js **基本配置

1

var lang =,
21 "oaria": 
25};
2627 $('#example').datatable(, //
設定第一列的寬度
36 ,
37 ,
38 ,
39 ,
40 ,
41 
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": ,
59 "initcomplete": function () );
7475 column.data().unique().sort().each(function
(d, j) 
8182
});83}84
85});
86},
87 "ajax": ,
91 "columns":[
92 (後台返回的欄位名), //
有幾列就解析幾次
93data: tell(後台返回的欄位名), 
94...
95//
還可以寫
96//
100//
},101
102]
103104
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>9tr
>
10tfoot
>

js**

1 initcomplete: function

() );
15                 column.data().unique().sort().each( function
( d, j ) );
18} );
19         }

給每列新增自定義屬性

1

//在 "columns" 下面新增
2 createdrow: function
(row, data, index)

給每列新增點選事件

$('#example  tbody').on( 'click', 'tr', function () ) ;

自定義的分頁 ，只給後台傳指定的引數

length   // 頁面顯示的條數，每頁顯示多少條、

start    //  開始的記錄序號

draw    //  當前頁面

1 "ajax": function

(data, callback, settings) ;
4 param.length = data.length;//
頁面顯示記錄條數，在頁面顯示每頁顯示多少項的時候
5 param.start = data.start;//
開始的記錄序號
6 param.draw = data.draw;//
當前頁碼78
//ajax請求資料
9$.ajax(;
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//
此時的資料需確保正確無誤，異常判斷應在執行此**前自行處理完畢
24callback(returndata);25}
26});
27 },

dataTables 外掛程式學習整理

在專案中使用了datatables 外掛程式，學習整理一下。datatables 的官方中文 引入檔案 所有的都要引入 jq檔案 1.datatables 的樣式 2.bootstrap 風格的datatables html 1 2 3 4 編碼 5 職位 6 姓名 7 狀態 8 專案 9 機構 1...

jquery外掛程式dataTables自增序號。

datatables官網提供了一種方式，使用後沒有達到預期效果 js報錯 沒有深究原因。如果需要，可以按照下面的方式來。1 datalist datatable 15 16 blengthchange false 17 binfo false 18 bpaginate false 19 sdom r...

九 引入datatables外掛程式

在ace中，我們引入datatables外掛程式，這是一款展示 並通過js來實現個包括展示 分頁 排序等各種 功能的外掛程式，而且是高度可定製化的一款外掛程式。官方 為 當然，在我們的ace模板中也有包含，並加入了ace的css元素。1.修改index.html頁面，在其中增加block元素，用於存...