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+个单元测试
免费开源
更多特性请到官网查看

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

二、使用

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" 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、效果

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

三、常用选项

order

应用于表的初始顺序（排序） stateSave

 # 参数1 列索引按顺序排列 从0开始

 # 参数2 排序的规则

 "order": [[ 1, "asc/desc" ],...]

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

stateSave

状态保存 - 页面重新加载时恢复表状态启用或禁用状态保存。启用后，DataTables将存储状态信息，例如分页位置，显示长度，过滤和排序。当最终用户重新加载页面时，表的状态将被更改以匹配他们之前设置的状态。

# 默认值 false

stateSave: true/false

columnDefs

设置列定义初始化属性此参数允许您为表中的列指定特定选项，但在这种情况下，定义的列选项可应用于一个或多个列

"columnDefs":[

    //索引第4列，不进行排序

    {targets:[4],orderable:false}

]

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

lengthMenu

定义在每页显示记录数的select中显示的选项

$('#example').DataTable({

	"lengthMenu": [ 10, 25, 50, 75, 100 ]

});

# 或

$('#example').DataTable({

	"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "所有"] ]

});

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

paging

是否允许表格分页 true/false

默认：true

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

searching

是否允许Datatables开启本地搜索 true/false

默认：true

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

ordering

是否允许Datatables开启排序 true/false

默认：true

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

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="搜索">

</form>

<div class="page-container">

    <table class="table table-border table-bordered table-bg table-sort">

        <thead>

        <tr>

            <th scope="col" colspan="7">文章列表</th>

        </tr>

        <tr class="text-c">

            <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>

秒客网

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

Datatables使用

一、简介

二、使用

1、引入相关js和css文件

2、添加HTML代码

3、初始化Datatables

4、效果

三、常用选项

order

stateSave

columnDefs

lengthMenu

paging

searching

ordering

processing

四、Ajax使用远程数据

1、客户端

2、服务端

3、搜索

4、实例

相关文章