資訊專(zhuān)欄INFORMATION COLUMN
摘要：是一款表格插件。當(dāng)你打開(kāi)服務(wù)器模式的時(shí)候，每次繪制表格的時(shí)候，會(huì)給服務(wù)器發(fā)送一個(gè)請(qǐng)求包括當(dāng)前分頁(yè)，排序，搜索參數(shù)等等。開(kāi)啟服務(wù)器模式需要使用和不定時(shí)一講選項(xiàng)，進(jìn)一步的信息，請(qǐng)參考下面的配置選項(xiàng)。
一、簡(jiǎn)單使用Datatables 是一款jquery表格插件。它是一個(gè)高度靈活的工具，可以將任何HTML表格添加高級(jí)的交互功能，可以很方便的實(shí)現(xiàn)分頁(yè)，即時(shí)搜索和排序。
怎樣簡(jiǎn)單地使用DataTables？使用下方簡(jiǎn)單的幾行代碼，一個(gè)方法初始化table。
$(document).ready(function(){
$("#myTable").DataTable();
});
開(kāi)始使用DataTables很簡(jiǎn)單，只需要引入兩個(gè)文件， 一個(gè)css樣式文件和DataTables本身的腳本文件。在DataTables CDN上，可以使用下面這兩個(gè)文件：
http://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css http://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js二、選項(xiàng)
datatables中大量的選項(xiàng)可以用來(lái)定制你的表格展現(xiàn)給用戶。
1. 設(shè)置選項(xiàng)(Setting options)datatables的配置是通過(guò)設(shè)置你定義的選項(xiàng)來(lái)完成的，如下：
$("#example").DataTable( {
paging: false
} );
通過(guò)設(shè)置paging選項(xiàng)，禁止表格分頁(yè)(默認(rèn)是打開(kāi)的)
假設(shè)你要在表格里使用滾動(dòng)，你需要加上scrollY選項(xiàng)：
$("#example").DataTable( {
scrollY: 400
} );
當(dāng)然你可以組合多個(gè)選項(xiàng)來(lái)初始化datatables，啟動(dòng)滾動(dòng)條，禁用分頁(yè)
$("#example").DataTable( {
paging: false,
scrollY: 400
} );
如果你有其他需要可以加入更多的選項(xiàng)來(lái)配置你的表格，更多datatables選項(xiàng)，請(qǐng)參考
常用選項(xiàng)(Common options)
下面列舉了一些比較有用的選項(xiàng):
ajax - 異步數(shù)據(jù)源配置 data - javascript數(shù)據(jù)源配置 serverSide - 開(kāi)啟服務(wù)器模式 columns.data - 配置每一列的數(shù)據(jù)源 scrollX - 水平滾動(dòng)條 scrollY - 垂直滾動(dòng)條 默認(rèn)設(shè)置(Setting defaults)
在實(shí)際項(xiàng)目中，可能需要用到多個(gè)表格，你使用dom選項(xiàng)把所有的表格設(shè)置為相同的布局，這時(shí)你可以使用$.fn.dataTable.defaults 對(duì)象處理。
在這個(gè)例子中,我們禁用datatable中默認(rèn)的搜索和排序功能,但當(dāng)表初始化時(shí)啟用了排序(重寫(xiě)默認(rèn)選項(xiàng))。
// 默認(rèn)禁用搜索和排序
$.extend( $.fn.dataTable.defaults, {
searching: false,
ordering: false
} );
// 這樣初始化，排序?qū)?huì)打開(kāi)
// 搜索功能仍然是關(guān)閉
$("#example").DataTable( {
ordering: true
} );
http://datatables.net/manual/...
三、服務(wù)器處理(Server-side processing)服務(wù)器處理
是不是發(fā)現(xiàn)在處理太多 DOM 數(shù)據(jù)或者 AJAX 一次性把數(shù)據(jù)獲得后，DataTables 表現(xiàn)的不是很滿意？這是肯定的， 因?yàn)?DT 需要渲染，創(chuàng)建 tr/td ,所以數(shù)據(jù)越多，速度就越慢。 為了解決這個(gè)問(wèn)題 DataTables 提供了 服務(wù)器模式，把本來(lái)客戶端所做的事情交給服務(wù)器去處理， 比如排序（order）、分頁(yè)（paging）、過(guò)濾（filter）。對(duì)于客戶端來(lái)說(shuō)這些操作都是比較消耗資源的， 所以打開(kāi)服務(wù)器模式后不用擔(dān)心這些操作會(huì)影響到用戶體驗(yàn)。
當(dāng)你打開(kāi)服務(wù)器模式的時(shí)候，每次繪制表格的時(shí)候，DataTables 會(huì)給服務(wù)器發(fā)送一個(gè)請(qǐng)求（包括當(dāng)前分頁(yè)，排序，搜索參數(shù)等等）。DataTables 會(huì)向 服務(wù)器發(fā)送 一些參數(shù) 去執(zhí)行所需要的處理，然后在服務(wù)器組裝好 相應(yīng)的數(shù)據(jù) 返回給 DataTables。
開(kāi)啟服務(wù)器模式需要使用 serverSideOption 和 ajaxOption ajax不定時(shí)一講 選項(xiàng)，進(jìn)一步的信息，請(qǐng)參考下面的 配置選項(xiàng)。
1、DT自動(dòng)請(qǐng)求的參數(shù)(Sent parameters)當(dāng)開(kāi)啟了 服務(wù)器模式時(shí)，DataTables 會(huì)發(fā)送如下參數(shù)到服務(wù)器
一旦 DataTables 發(fā)送了請(qǐng)求，上面的參數(shù)就會(huì)傳送給服務(wù)器，那么你需要接受到這些參數(shù)并做相應(yīng)的邏輯處理然后按照下面的格式講組裝好的JSON數(shù)據(jù)返回 （不是每個(gè)參數(shù)都需要接受處理，根據(jù)自己的業(yè)務(wù)需要）
除了上面的返回參數(shù)以外你還可以加入下面的參數(shù)，來(lái)實(shí)現(xiàn)對(duì)表格數(shù)據(jù)的自動(dòng)綁定
test.html
測(cè)試Datatable-表單插件
| First name | Last name | Position | Office | Start date | Salary |
|---|---|---|---|---|---|
| First name | Last name | Position | Office | Start date | Salary |
arrays.txt
{
"data": [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
[
"Ashton Cox",
"Junior Technical Author",
"San Francisco",
"1562",
"2009/01/12",
"$86,000"
],
[
"Cedric Kelly",
"Senior Javascript Developer",
"Edinburgh",
"6224",
"2012/03/29",
"$433,060"
],
[
"Airi Satou",
"Accountant",
"Tokyo",
"5407",
"2008/11/28",
"$162,700"
],
[
"Brielle Williamson",
"Integration Specialist",
"New York",
"4804",
"2012/12/02",
"$372,000"
],
[
"Herrod Chandler",
"Sales Assistant",
"San Francisco",
"9608",
"2012/08/06",
"$137,500"
],
[
"Rhona Davidson",
"Integration Specialist",
"Tokyo",
"6200",
"2010/10/14",
"$327,900"
],
[
"Colleen Hurst",
"Javascript Developer",
"San Francisco",
"2360",
"2009/09/15",
"$205,500"
],
[
"Sonya Frost",
"Software Engineer",
"Edinburgh",
"1667",
"2008/12/13",
"$103,600"
],
[
"Jena Gaines",
"Office Manager",
"London",
"3814",
"2008/12/19",
"$90,560"
],
[
"Quinn Flynn",
"Support Lead",
"Edinburgh",
"9497",
"2013/03/03",
"$342,000"
],
[
"Charde Marshall",
"Regional Director",
"San Francisco",
"6741",
"2008/10/16",
"$470,600"
],
[
"Haley Kennedy",
"Senior Marketing Designer",
"London",
"3597",
"2012/12/18",
"$313,500"
],
[
"Tatyana Fitzpatrick",
"Regional Director",
"London",
"1965",
"2010/03/17",
"$385,750"
],
[
"Michael Silva",
"Marketing Designer",
"London",
"1581",
"2012/11/27",
"$198,500"
],
[
"Paul Byrd",
"Chief Financial Officer (CFO)",
"New York",
"3059",
"2010/06/09",
"$725,000"
],
[
"Gloria Little",
"Systems Administrator",
"New York",
"1721",
"2009/04/10",
"$237,500"
],
[
"Bradley Greer",
"Software Engineer",
"London",
"2558",
"2012/10/13",
"$132,000"
],
[
"Dai Rios",
"Personnel Lead",
"Edinburgh",
"2290",
"2012/09/26",
"$217,500"
],
[
"Jenette Caldwell",
"Development Lead",
"New York",
"1937",
"2011/09/03",
"$345,000"
],
[
"Yuri Berry",
"Chief Marketing Officer (CMO)",
"New York",
"6154",
"2009/06/25",
"$675,000"
],
[
"Caesar Vance",
"Pre-Sales Support",
"New York",
"8330",
"2011/12/12",
"$106,450"
],
[
"Doris Wilder",
"Sales Assistant",
"Sidney",
"3023",
"2010/09/20",
"$85,600"
],
[
"Angelica Ramos",
"Chief Executive Officer (CEO)",
"London",
"5797",
"2009/10/09",
"$1,200,000"
],
[
"Gavin Joyce",
"Developer",
"Edinburgh",
"8822",
"2010/12/22",
"$92,575"
],
[
"Jennifer Chang",
"Regional Director",
"Singapore",
"9239",
"2010/11/14",
"$357,650"
],
[
"Brenden Wagner",
"Software Engineer",
"San Francisco",
"1314",
"2011/06/07",
"$206,850"
],
[
"Fiona Green",
"Chief Operating Officer (COO)",
"San Francisco",
"2947",
"2010/03/11",
"$850,000"
],
[
"Shou Itou",
"Regional Marketing",
"Tokyo",
"8899",
"2011/08/14",
"$163,000"
],
[
"Michelle House",
"Integration Specialist",
"Sidney",
"2769",
"2011/06/02",
"$95,400"
],
[
"Suki Burks",
"Developer",
"London",
"6832",
"2009/10/22",
"$114,500"
],
[
"Prescott Bartlett",
"Technical Author",
"London",
"3606",
"2011/05/07",
"$145,000"
],
[
"Gavin Cortez",
"Team Leader",
"San Francisco",
"2860",
"2008/10/26",
"$235,500"
],
[
"Martena Mccray",
"Post-Sales support",
"Edinburgh",
"8240",
"2011/03/09",
"$324,050"
],
[
"Unity Butler",
"Marketing Designer",
"San Francisco",
"5384",
"2009/12/09",
"$85,675"
],
[
"Howard Hatfield",
"Office Manager",
"San Francisco",
"7031",
"2008/12/16",
"$164,500"
],
[
"Hope Fuentes",
"Secretary",
"San Francisco",
"6318",
"2010/02/12",
"$109,850"
],
[
"Vivian Harrell",
"Financial Controller",
"San Francisco",
"9422",
"2009/02/14",
"$452,500"
],
[
"Timothy Mooney",
"Office Manager",
"London",
"7580",
"2008/12/11",
"$136,200"
],
[
"Jackson Bradshaw",
"Director",
"New York",
"1042",
"2008/09/26",
"$645,750"
],
[
"Olivia Liang",
"Support Engineer",
"Singapore",
"2120",
"2011/02/03",
"$234,500"
],
[
"Bruno Nash",
"Software Engineer",
"London",
"6222",
"2011/05/03",
"$163,500"
],
[
"Sakura Yamamoto",
"Support Engineer",
"Tokyo",
"9383",
"2009/08/19",
"$139,575"
],
[
"Thor Walton",
"Developer",
"New York",
"8327",
"2013/08/11",
"$98,540"
],
[
"Finn Camacho",
"Support Engineer",
"San Francisco",
"2927",
"2009/07/07",
"$87,500"
],
[
"Serge Baldwin",
"Data Coordinator",
"Singapore",
"8352",
"2012/04/09",
"$138,575"
],
[
"Zenaida Frank",
"Software Engineer",
"New York",
"7439",
"2010/01/04",
"$125,250"
],
[
"Zorita Serrano",
"Software Engineer",
"San Francisco",
"4389",
"2012/06/01",
"$115,000"
],
[
"Jennifer Acosta",
"Junior Javascript Developer",
"Edinburgh",
"3431",
"2013/02/01",
"$75,650"
],
[
"Cara Stevens",
"Sales Assistant",
"New York",
"3990",
"2011/12/06",
"$145,600"
],
[
"Hermione Butler",
"Regional Director",
"London",
"1016",
"2011/03/21",
"$356,250"
],
[
"Lael Greer",
"Systems Administrator",
"London",
"6733",
"2009/02/27",
"$103,500"
],
[
"Jonas Alexander",
"Developer",
"San Francisco",
"8196",
"2010/07/14",
"$86,500"
],
[
"Shad Decker",
"Regional Director",
"Edinburgh",
"6373",
"2008/11/13",
"$183,000"
],
[
"Michael Bruce",
"Javascript Developer",
"Singapore",
"5384",
"2011/06/27",
"$183,000"
],
[
"Donna Snider",
"Customer Support",
"New York",
"4226",
"2011/01/25",
"$112,000"
]
]
}
注意，要和數(shù)據(jù)對(duì)象區(qū)分開(kāi)：
{
"data": [
{
"user_name": "劉德華",
"cn": "andyLau",
"uid": "546L6LbF",
"telephonenumber": "15820226337",
"account_source": "大灣區(qū)",
"businesscategory": "娛樂(lè)總監(jiān)",
"add_time": null,
"sort": 1
},
{
"user_name": "周潤(rùn)發(fā)",
"cn": "Jaychou",
"uid": "5p2O5Zu95qCL",
"telephonenumber": null,
"account_source": null,
"businesscategory": null,
"add_time": null,
"sort": 2
},
]
}
2.服務(wù)器處理
$(function () {
// $("#example1").DataTable();
$("#sso_table").DataTable({
//開(kāi)啟服務(wù)器模式
serverSide: true,
ajax: "/data-source",
"paging": true,
"lengthChange": false,
"searching": false,
"ordering": true,
"info": true,
"autoWidth": false
});
});
test.html 頁(yè)面
測(cè)試Datatable-表單插件-服務(wù)器處理
| First name | Last name | Position | Office | Start date | Salary |
|---|---|---|---|---|---|
| First name | Last name | Position | Office | Start date | Salary |