jQuery DataTables 插件使用笔记

初始化

在页面中

<!DOCTYPE html>

<html>

    <head>

        <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">

        <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>

    </head>

    <body>

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

    </body>

</html>

js中初始化

$(document).ready( function () {

    $('#table_id').DataTable();

} );

常用配置

在初始化的时候可以通过一些常用的配置项对表格进行配置，这是我在项目中实际用到的

$("#vivo_table_list").dataTable({

            pageLength: 10,     //更改初始页面长度 （每页的行数）

            processing: true,    //显示正在处理字符串

            serverSide: false,    // 服务器模式，这一点非常奇怪*

            ordering: true,          // 是否启用Datatables排序

            searching: false,      // 开启搜索

            autoWidth: false,

            zeroRecords: "没有查询数据",

            destroy: true,            // 从当前上下文销毁掉Datatables对象 (妹搞懂)

            pagingType: "input",    // 分页按钮种类显示选项

            language: {

                url: "cn.txt"    // 本地化

            },

            dom: "tr<'row-fluid'<'span6'i><'span6'p>>",    // 按什么顺序定义表的控制元素在页面上出现(妹搞懂)

            ajax: {

                url: "/url",

                type: "post",    // ajax请求的类型 **

                data: function () {

                    return that.getQueryParams();    // ajax的参数

                }

            },

            columns: [

                {title: "id", data: "id", orderable: true},

                {title: "uid", data: "uid", orderable: false},

                {title: "昵称", data: "nick", orderable: false},

                {title: "姓名", data: "name", orderable: false},

                {title: "电话", data: "tel", orderable: false},

                {title: "申请时间", data: "stimeshow", orderable: true},

                {title: "状态", data: "statshow", orderable: false},

                {

                    title: "操作", orderable: false, render: function (data,type,full) {

                    return '<button id="msgsndButton" class="msgsnd glyphicon glyphicon-comment"></button>' +

                        ' <button id="forbidButton" class="forbid glyphicon glyphicon-thumbs-down"></button>'+

                        '<input type="hidden" value="'+full.id+'"/>';

                }

                }

            ]

        });

后台传回的数据一定要是一个map，key是 "data"，value 是数据（如果数据是List要 toArray()），其中 data 也是 DataTables 的参数之一，表示表格要显示的数据，所以你可以在这个map中放上其他的表格参数，只要把key设置为参数名就可以了。

*：配置中serverSide开启服务器模式，在工作使用中表格的数据是通过ajax从后台获取，就理所当然地打开了这个模式，但是表格对某一列排序的功能就失效了，而随后我关闭了这一模式，发现就可以对表格中的列进行排序，表格的数据还是从服务器获取……所以这个模式还有待研究

** : 在项目中后台controller接收的参数是数组，ajax的请求包含复杂参数的时候，请求的类型一定要是post；

进阶功能

隐藏列

可以通过 "columns.visible" 属性规定列是否显示，但是这样就不能获取此列的值，如果要隐藏id列，又要根据id触发事件就办不到了 = =，后来查API后想了一个笨办法，可以借助 columns.render 属性，用法如下：

{

        title: "操作", orderable: false, render: function (data,type,full) {

        return '<input type="hidden" value="'+full.id+'"/>';

        }

}

注意 render 后的函数有三个参数，data/type/full，其中full参数是行的所有数据（官网在此注明：只是行中的数据，而不是data属性的值，所以就算data中有你想要的值，但你没有给他一列的话也是获取不到的），可以在render中直接使用你想隐藏的值，如果表格外部要引用这个值，可以在render中组装一个隐藏的<input>，外部就可以获取到了，不过这种方法真的非常蠢，如果你有好的方法，请一定要告诉我。

输入页码跳转页面

我们可以通过 pagingType 属性来设置表格分页按钮样式，但是DataTables的几个默认样式都没有项目中需要的输入页码进行跳转的样式。但是在官网的 plug-in 页中介绍了几种分页按钮的插件，其中的 input 分页插件就可以满足我们的需求，只要引入插件的js，再将 pagingType 的值改为 "input" 就可以了。js文件的 CDN 是：

//cdn.datatables.net/plug-ins/1.10.11/pagination/input.js

关于其他样式的分页插件参考这里

其他

DataTables是一个非常强大的表格插件，虽说上手比较慢。我用的版本是 1.10 ，在我接手项目的时候项目中用的还是1.9，结果所有参数、API采用匈牙利命名规则，名前都莫名其妙的加上了几个字母前缀，很难理解，在 1.10 版本后就改为驼峰命名规则，人性化多了。要看1.9.x和1.10.x参数名对照请点这里，要查找 1.9.x 的文档请点这里。

参考

DataTables 官网

 DataTables 中文网

 1.10.x与1.9.x参数名对照表

 1.9.x 文档