骑猪下江南

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 " 初始化完成 ..." ;
}
if ( data == 1 ){
return " 设备安装中 ..." ;
}
if ( data == 0 ){
return " 订单未受理 ..." ;
}

}
} ,
{
"targets" : [ 8 ] , // 目标列位置，下标从 0 开始
"data" : "id" , // 数据列名
"render" : function ( data , type , full ) {
// 返回自定义内容
return " 编辑 ' id='edit' data-id='" + data + "' )>" +
" 编辑 " +
" " +
" 删除 ' id='del' data-id='" + data + "')>" +
" 删除 " ;
}
}
]
}) ;
}

/* 添加 */
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

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

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

dataTable使用教程

你可能感兴趣的:(web前端)