datatables 使用

datatables 使用

一、簡介

官網：https://datatables.net/
中文官網：http://datatables.club/

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

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

二、使用

1、引入相關js和css文件

<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>

2、添加HTML代碼

<table id="table_id_example" 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>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>

3、初始化Datatables

$(document).ready( function () {
    $('#table_id_example').DataTable();
} );

4、效果

三、常用選項

order

應用於表的初始順序（排序）

# 參數1 列索引按順序排列 從0開始 
# 參數2 排序的規則
"order": [[ 1, "asc/desc" ],...]

stateSave

狀態保存 - 頁面重新加載時恢復表狀態
啓用或禁用狀態保存。啓用後，DataTables將存儲狀態信息，例如分頁位置，顯示長度，過濾和排序。當最終用戶重新加載頁面時，表的狀態將被更改以匹配他們之前設置的狀態。

# 默認值 false
stateSave: true/false

columnDefs

設置列定義初始化屬性
此參數允許您爲表中的列指定特定選項，但在這種情況下，定義的列選項可應用於一個或多個列

columnDefs:[
    # 索引0列和第8列，不進行排序
    {targets:[0,8],orderable:false}
]

lengthMenu

定義在每頁顯示記錄數的select中顯示的選項

$('#example').DataTable({
  "lengthMenu": [ 10, 25, 50, 75, 100 ]
});
# 或
$('#example').DataTable({
  "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]
});

paging

是否允許表格分頁 true/false

默認：true

info

控制是否顯示錶格的信息 true/false

默認：true

searching

是否允許Datatables開啓本地搜索 true/false

默認：true

ordering

是否允許Datatables開啓排序 true/false

默認：true

processing

是否顯示正在處理的狀態 true/false

默認：false

四、Ajax使用遠程數據

有時從DOM讀取數據太慢或太笨重，特別是在處理數千或數百萬個數據行時。爲了解決這個問題，DataTables的服務器端處理功能提供了一種方法，可以讓服務器端的數據庫引擎完成所有“繁重的工作” 。

當使用服務器端處理時，DataTables將在頁面上每次繪製信息時向服務器發出Ajax請求（即，在分頁，排序，搜索等時）。DataTables將向服務器發送許多變量，以允許它執行所需的處理，然後以DataTables所需的格式返回數據。

1、客戶端

$('#example').DataTable( {
    // 開啓服務器模式
    serverSide: true,
    // ajax發起請求
    ajax: {
            // 請求地址
            url: '/data-source',
            // 請求方式 get/post
            type: 'POST',
            // 頭信信息 laravel post請求時 csrf
            headers: { 'X-CSRF-TOKEN' : '{{ csrf_token() }}' },
            // 請求的參數
            data: {
                "user_id": 451
            },
            /*
            // 兩者寫法效果一致  但是它用於搜索
            data: function ( d ) {
                d.user_id = $('#user_id').val();
            }
            */
        },
        // columns要對tr中的td單元格中的內容進行數據填充
        // 注意：如果data接收類似a或b的信息，實際服務器沒有返回該信息，那麼一定要同時設置defaultContent屬性，否則報錯
        columns: [
            // 總的數量與表格的列的數量一致，不多也不少
            // 字段名稱與sql查詢出來的字段時要保持一致，就是服務器返回數據對應的字段名稱
            // defaultContent 和 className 可選參數
            {'data':'字段名稱1',"defaultContent": "默認值",'className':'類名'},
            {'data':'字段名稱n',"defaultContent": "默認值",'className':'類名'}
        ],
        /*
        創建tr/td時的回調函數，可以繼續修改、優化tr/td的顯示，裏邊有遍歷效果，會依次掃描生成的每個tr
        row:創建好的tr的dom對象
        data:數據源，代表服務器端返回的每條記錄的實體信息
        dataIndex:數據源的索引號碼
        */
        createdRow:function(row,data,dataIndex){}
    
} );

2、服務端

/*
draw: 客戶端調用服務器端次數標識
recordsTotal: 獲取數據記錄總條數
recordsFiltered: 數據過濾後的總數量
data: 獲得的具體數據
注意：recordsTotal和recordsFiltered都設置爲記錄的總條數
*/
$result = [
   'draw' 		 	 => $request->get('draw'),
   'recordsTotal' 	 => $count,
   'recordsFiltered' => $count,
   'data'			=> $data
];
return json_encode($result);

3、搜索

datatable對象.api().ajax.reload()

重新加載數據

var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
$('#search').on('click',function(){
    table.api().ajax.reload();
});