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

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

 

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