Datatables使用

一、簡介

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

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

分頁，即時搜索和排序，
幾乎支持任何資料源：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="https://cdn.staticfile.org/jquery/1.10.2/jquery.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標簽中thead、tbody必須存在

<table id="table_id_example" >
    <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

應用于表的初始順序（排序） stateSave

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

stateSave

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

# 默認值 false
stateSave: true/false

columnDefs

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

"columnDefs":[
    //索引第4列，不進行排序
    {targets:[4],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

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: 'get',
    // 頭信資訊 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、搜索

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

4、實體

以laravel為例

服務器

public function index(Request $request){
        if ($request->ajax()){
            //排序索引
            $orderArr = $request->get('order')[0];
            //排序索引
            $column = $orderArr['column'];
            //排序方式
            $dir = $orderArr['dir'];
            //排序欄位
            $orderColumn = $request->get('columns')[$column]['data'];

            //開啟位置
            $start = $request->get('start',0);
            //搜索關鍵字
            $title = $request->get('title');
            $query=Article::where('id','>',0);

            if (!empty($title)){
                $query->where('title','like',"%$title%");
            }

            //獲取記錄數
            $length = min(100,$request->get('length',10));
            $count = $query->count();
            $articles = $query->orderBy($orderColumn,$dir)->offset($start)->limit($length)->get()->toArray();

            /**
             * draw:客戶端呼叫服務端標識
             * recordsTotal：獲取資料記錄總條數
             * recordsFiltered：資料過濾后的總數量
             * data：獲取具體的資料
             */
            return  [
                'draw' => $request->get('draw'),
                'recordsTotal' => $count,
                'recordsFiltered'=>$count,
                'data'=>$articles
            ];
        }
        return view('admin.article.index');
    }

blade模板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- DataTables CSS -->
    <link rel="stylesheet" type="text/css"
          href="http://cdn.datatables.net/1.10.15/css/jquery.dataTables.css">
</head>
<body>
<form onsubmit="return search()">
    <input type="text" name="title" id="title" placeholder="請輸入搜索關鍵字">
    <input type="submit" value="https://www.cnblogs.com/jurij/archive/2021/01/13/搜索">
</form>
<div >
    <table >
        <thead>
        <tr>
            <th scope="col" colspan="7">文章串列</th>
        </tr>
        <tr >
            <th>ID</th>
            <th>文章標題</th>
            <th>創建時間</th>
            <th>更新時間</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>

        </tbody>
    </table>
</div>
</body>
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.15/js/jquery.dataTables.js"></script>
<script type="text/javascript">
    var table = $('.table-sort').DataTable({
        "order": [[ 0, "desc" ]],
        "columnDefs":[
            {targets:[4],orderable:false}
        ],
        "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ],
        "processing" : true,
        serverSide: true,
        ajax: {
            url: '',
            type: 'get',
            data:function (ret) {
                ret.title   = $('#title').val()
            }
        },
        columns: [
            {'data':'id'},
            {'data':'title'},
            {'data':'created_at'},
            {'data':'updated_at'},
            {'data':'updated_at'}
        ],
        createdRow:function(row,data,dataIndex){
            var id = data.id;
            var td = $(row).find('td:last-child');
            var html = `<a>編輯</a>&nbsp;&nbsp;
            <a >洗掉</a>`;
            td.html(html)
        }
    });

    function search(){
        table.ajax.reload();
        return false;
    }
</script>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/248479.html

標籤：其他

上一篇：uniApp editor微信滑動問題

下一篇：hooks 與 animejs

jquery表格插件Datatables使用、快速上手

Datatables使用

一、簡介

二、使用

1、引入相關js和css檔案

2、添加HTML代碼

3、初始化Datatables

4、效果

三、常用選項

order

stateSave

columnDefs

lengthMenu

paging

searching

ordering

processing

四、Ajax使用遠程資料

1、客戶端

2、服務端

3、搜索

4、實體