jQuery表格插件datatables用法汇总_jquery

一、初始化
在页面中

js中初始化

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

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

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

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

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

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

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

DataTables 官网