Jquery Datatables的使用詳解

發布時間:2020-02-07 11:48 來源:互聯網 當前欄目:網站服務器

參考:

Datatables中文網

Datatables官網

 Datatables 是一款強大的Jquery表格處理插件,樣式方面可以兼容bootstrap3/4、JqueryUi等,也有默認的樣式可以選擇。使用Datatables可以很靈活的從服務端通過ajax更新表格數據,實現排序、分頁等功能。

一、安裝

登錄官網下載,可以看到有一個選擇的表單讓你自定義下載包的內容,可以選擇樣式、擴展組件、Jquery庫等,這個可以根據自己的需求下載,也可以先只下載Default的就可以了。

在你的項目中使用 DataTables,只需要引入三個文件即可,jQuery庫,一個DataTables的核心js文件和一個DataTables的css文件。有的時候還需要DataTables樣式的一些資源。

二、數據的綁定

如何將數據顯示到Datatables中呢,有三種方式:

1. Dom

如果在html中生命的table標簽下,tbody中有已經編輯好的數據的話,會直接顯示出來。

<table  class="display">
 <thead>
  <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>
  </tr>
  <tr>

2. JavaScript

可以在js中定義好數據源,然后在DT初始化的時候,通過data選項為表格配置數據,數據源可以是數組、對象、實例三種形式。

(1)數組

var data = [
 [
  "Tiger Nixon",
  "System Architect",
  "Edinburgh",
  "5421",
  "2011/04/25",
  "$3,120"
 ],
 [
  "Garrett Winters",
  "Director",
  "Edinburgh",
  "8422",
  "2011/07/25",
  "$5,300"
 ]
 ];
 
 $('#example').DataTable( {
 data: data
 } );

(2)實例

 function Employee ( name, position, salary, office ) {
 this.name = name;
 this.position = position;
 this.salary = salary;
 this._office = office;
 
 this.office = function () {
  return this._office;
 }
 };
 
 $('#example').DataTable( {
 data: [
  new Employee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh" ),
  new Employee( "Garrett Winters", "Director", "$5,300", "Edinburgh" )
 ],
 columns: [
  { data: 'name' },
  { data: 'salary' },
  { data: 'office()' },
  { data: 'position' }
 ]
 } );

(3)對象

var data = [
 {
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$3,120",
  "start_date": "2011/04/25",
  "office": "Edinburgh",
  "extn": "5421"
 },
 {
  "name": "Garrett Winters",
  "position": "Director",
  "salary": "$5,300",
  "start_date": "2011/07/25",
  "office": "Edinburgh",
  "extn": "8422"
 }
 ];
 //object可以如下初始化表格
 $('#example').DataTable( {
 data: data,
 //使用對象數組,一定要配置columns,告訴 DataTables 每列對應的屬性
 //data 這里是固定不變的,name,position,salary,office 為你數據里對應的屬性
 columns: [
  { data: 'name' },
  { data: 'position' },
  { data: 'salary' },
  { data: 'office' }
 ]
 } );

可以看到,在html中定義好一個id是example的table后,可以使用DT提供的選項進行初始化,data是數據,可以將要展示的數據對象放到data選項后,然后通過columns選項為每一列的屬性進行定義,DT就會根據columns中定義的屬性找到對象中的成員進行綁定,如果是數組的話,會按照數組中定義的數據依次綁定到每一列上進行展示。

  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、
  • 1、
  • 2、
  • 3、
  • 4、
  • 5、
  • 6、
  • 7、
  • 8、
  • 9、
  • 10、
  • 11、
  • 12、
  • 13、
  • 14、
  • 15、
  • 16、
  • 17、
  • 18、
  • 19、
  • 20、
  • 21、
  • 22、
  • 23、
  • 24、
  • 25、