dataTable使用教程

1.导入相关js库,具体如下（我这里使用H-ui前端框架，将以这个为标准讲解）：

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>

以上的js库是单独使用dataTable,下面才是我使用的js库（在分析源码时，要特别注意这个，因为我还是用了H-ui里面的js库）

<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.js"></script>

<script type="text/javascript" src="lib/jquery.confirm/jquery-confirm.js"></script>

<script type="text/javascript" src="lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>

2.定义表格相关参数

-->这里我建议将表格配置的相关参数独立出来，因为列表在加载数据时，会首先初始化。之后操作同样会对表进行刷新

-->这里我单独讲解下几个重要的参数：

     ①sPaginationType ：分页的风格（full_number,还有几种风格。具体百度）

     ②oLanguage：列表语言显示国际化配置，具体配置看下面的源码

     ③sAjaxSource：列表数据源（后台请求地址）

源码如下(列表初始化和一套crud操作)：

$(function () {
    //初始化表格
   initTable("这里写后台的URL",null);

    //打开编辑页面并附带查询信息
   $('body').on('click', '#edit', function(){
       var id = $(this).attr("data-id");
        if(id != ''){
           member_edit('编辑','这里写后台的URL?id='+id,'800','600');
        }

    })

    //删除方法
   $('body').on('click','#del',function () {
       var id = $(this).attr("data-id");
        if(id != ''){
           member_del(this,id,'这里写后台的URL?id='+id);
        }
    })

    //查询方法
   $("#query").click(function() {
       var pars = $("#formId").serialize();
        initTable("这里写后台的URL",pars);
    });
})




/**
 * 列表初始化方法
 * url_all 查询全部信息的url（根据id查询的方法整合带查询所有的方法里面）
 * par 查询参数
 */
function initTable(url,paras) {
    $("#tab").dataTable({
       "bFilter": false,//去掉搜索框
       "sPaginationType" : "full_numbers",
        "bDestroy" : true,
        "bProcessing" : true,

       "sAjaxSource" : url+"?"+paras,

       "bServerSide" : true,//服务器分页

        "oLanguage" : {
            "sProcessing" : "正在加载中......",
            "sLengthMenu" : "每页显示 _MENU_ 条记录",
            "sZeroRecords" : "没有数据！",
            "sEmptyTable" : "表中无数据存在！",
            "sInfo" : "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
            "sInfoEmpty" : "显示0到0条记录",
            "sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
            //"sSearch" : "搜索",
            "oPaginate" : {
               "sFirst" : "首页",
               "sPrevious" : "上一页",
               "sNext" : "下一页",
               "sLast" : "末页"
            }
        },
        columns: [
            { "data": "id", "visible": false},
            { "data": "machineid" },
            { "data": "devicename"},
            { "data": "devicetype" },
            { "data": "investor_ID" },
            { "data": "school_ID" },
            { "data": "sysflag" },
            { "data": "createtime" }
        ],
        "columnDefs": [
            {
               "targets": [6], // 目标列位置，下标从0开始
               "data": "sysflag", // 数据列名
               "render": function(data,type,full) {
                   // 返回自定义内容
                   if(data == 2){
                       return "<span class='label label-success radius'>初始化完成...</span>";
                   }
                   if(data == 1){
                       return "<span class='label label-success radius tips2-color'>设备安装中...</span>";
                   }
                   if(data == 0){
                       return "<span class='label label-error radius tips1-color'>订单未受理...</span>";
                   }

                }
            },
            {
               "targets": [8], // 目标列位置，下标从0开始
               "data": "id", // 数据列名
               "render": function(data,type,full) {
                   // 返回自定义内容
                   return "<a style='text-decoration:none' title='编辑'  id='edit' data-id='"+data+"'  )>" +
                            "<i class='Hui-iconfont'>&#xe6df;编辑</i></a>" +
                            "&nbsp;&nbsp;&nbsp;&nbsp;" +
                            "<a style='text-decoration:none' title='删除'  id='del' data-id='"+data+"')>" +
                            "<i class='Hui-iconfont'>&#xe6e2;删除</i></a>";
               }
            }
        ]
    });
}





/*添加*/
function member_add(title, url, w, h) {
    layer_show(title, url, w, h);
}

/*查看*/
function member_show(title, url, id, w, h) {
    layer_show(title, url, w, h);
}

    /*用户-编辑*/
function member_edit(title, url, w, h) {
    layer_show(title, url, w, h);
}

    /*用户-删除*/
function member_del(obj, id,url) {
        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
               type: 'POST',
               url: url,
               dataType: 'json',
               success: function (data) {
                   $(obj).parents("tr").remove();
                   layer.msg('已删除!', {icon: 1, time: 1000});
               },
               error: function (data) {
                   console.log(data.msg);
                   layer.alert(data.Message);
               },
            });
        });

}

至此，前段配置和代码基本完成，下面我们需要的是做后台的接口数据了

3.后台接口部分

后台部分我采用的SSM框架和MSSQL数据库

@RequestMapping(value = "/")

@ResponseBody
public JSONObject getList(LxtEquipment lxtEquipment, PageModel pageModel, @Param("sEcho") Integer sEcho, Integer iDisplayStart, Integer iDisplayLength) {
    JSONObject json = new JSONObject();
    pageModel.setPageIndex(iDisplayStart / iDisplayLength);
    if (null != iDisplayLength) {
        pageModel.setPageSize(iDisplayLength);
    }
    PageModel page = lxtEquipmentService.getList(lxtEquipment, pageModel);
    json.put("sEcho", sEcho);//列表标识,防止XXS攻击
    json.put("iDisplayStart", page.getPageIndex());//初始页
    json.put("iDisplayLength", page.getPageSize());//每页显示的条数
    json.put("aaData", page.getList());
    json.put("iTotalRecords", page.getCount());//总数
    json.put("iTotalDisplayRecords", page.getCount());
    return json;

}

上面是获取列表的接口同时也进行的分页，这里有几个细节需要注意

这里面的参数名不要随便命名，要按照dataTable规则（前期没太注意，差点让我崩溃）

PS:我这里没有将这些参数封装成一个类，后期扩展可以往这个方向发展。

我这里初始页进行相关处理，因为我采用的数据库是MSSQL，这也导致了sql分页的差异性，如果你这个使用的mysql

是不要这样的操作的，直接设置即可。

还有其他接口不方便截图，增删查改其实也没必要详细说。。。