在讲解之前，我先展示一下使用dataTables表格插件的效果图：

可见：Datatables是一款jquery表格插件，具有分页，即时搜索和排序的功能，几乎支持任何数据源：DOM，javascript， Ajax 和  服务器处理              

一、使用：

使用DataTables很简单！
 
  1、只需要引入两个文件， 一个css样式文件和DataTables本身的脚本文件。具体下载请到官网Datatables中文网

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

  2、一个方法初始化table

$(document).ready(function () {
            $('.dataTables-example').dataTable({
             
            });
});

这样，显示的效果图如下：

1、搜索框

如果不想要插件自带的搜索，那么添加配置项：searching : false,//去除自带搜索框

$(document).ready(function () {
            $('.dataTables-example').dataTable({
                 searching : false,//去除自带搜索框
            });
});

此时的效果图如下：

2、表格每页显示的记录数

如果不想允许用户改变表格每页显示的记录数，添加配置项：bLengthChange: false,//去除自带每页显示条数

$(document).ready(function () {
            $('.dataTables-example').dataTable({
                searching : false,//去除自带搜索框
                bLengthChange: false,//不允许用户改变表格每页显示的记录数
            });

此时的效果图如下：

3、表格左下角的信息

如果不想显示左下角的显示 1 到 10 项，共 12 项，添加配置项：info: false,//去除表格左下角的信息

$(document).ready(function () {
            $('.dataTables-example').dataTable({
                searching : false,//去除自带搜索框
                bLengthChange: false,//不允许用户改变表格每页显示的记录数
                info:false,//去除表格左下角的信息
            });

此时的效果图如下：

4、排序

如果不想允许Datatables开启排序，添加配置项：ordering: false,//不允许Datatables开启排序

$(document).ready(function () {
            $('.dataTables-example').dataTable({
                searching : false,//去除自带搜索框
                bLengthChange: false,//不允许用户改变表格每页显示的记录数
                info:false,//去除表格左下角的信息
                  ordering:false,//不允许Datatables开启排序
            });

此时的效果图如下：

5、本地分页

如果不想允许Datatables开启本地分页，添加配置项：paging: false,//不允许开启本地分页

$(document).ready(function () {
            $('.dataTables-example').dataTable({
                searching : false,//去除自带搜索框
                bLengthChange: false,//不允许用户改变表格每页显示的记录数
                info:false,//去除表格左下角的信息
                  ordering:false,//不允许Datatables开启排序
                  paging:false,//不允许开启本地分页
            });

此时的效果图如下：

除此之外，还有：scrollX： 设置水平滚动 默认false、scrollY：设置垂直滚动 默认false  等等，更详细可去官网了解

二、常遇bug：

datatable 分页后按钮等事件失效问题？

页面中使用了datatable样式来展示数据，每条数据后都有三个按钮（编辑、删除、修改状态），在第一页按钮都可正常点击操作，但在第二页后所有按钮事件全部失效，使用alert()也不能弹出。

我页面中对按钮进行的js操作如下：

$(".status").click(function(){
                var id = $(this).data('id');
                var status = $(this).data('status');
                $.get('/admin/notes/status',{id:id,status:status},function(data){
                    layer.msg(data.msg,{time:2000},function(){
                        window.location.reload();
                    });
                },'json');
            })

bug出现原因：

datatable页面是把数据一次性加载到页面，然后再分页，数据请求只会在第一页，所有的js数据都会加载在第一页上，当翻页跳转到其他页面时，数据不会再次向服务器后台请求，页面不会再次加载。js文件是不会更新的，因此在翻页后js已经是失效的了，就出现了这种分页按钮失效Bug。

解决方案：

将事件绑定到table上，利用Jquery的on事件，这样翻页后js会跟随datable表格的更新而更新，不会出现失效的情况。

$(".table tbody").on('click',".status",function(){
                var id = $(this).data('id');
                var status = $(this).data('status');
                $.get('/admin/notes/status',{id:id,status:status},function(data){
                    layer.msg(data.msg,{time:2000},function(){
                        window.location.reload();
                    });
                },'json');
            });

这样bug便解决了！！