微客导航 » 文章资讯 » jquery dataTable 后台加载数据并分页实例代码

jquery dataTable 后台加载数据并分页实例代码

2024-02-20 16:28:03 158

使用dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。

引用js文件

添加一个table标签，可以不用，可以动态加载









名称
apiKey
secretKey
创建时间
Status
操作

关键的JS代码：


jQuery(function($){

//初始化table
varoTable1=$('#sample-table-2')
.dataTable(
{
"bPaginate":true,//分页工具条显示
//"sPaginationType":"full_numbers",//分页工具条样式
"bStateSave":true,//是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bScrollCollapse":true,//当显示的数据不足以支撑表格的默认的高度
"bLengthChange":true,//每页显示的记录数
"bFilter":false,//搜索栏
"bSort":true,//是否支持排序功能
"bInfo":true,//显示表格信息
"bAutoWidth":true,//自适应宽度
"bJQueryUI":false,//是否开启主题
"bDestroy":true,
"bProcessing":true,//开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
"bServerSide":true,//服务器处理分页，默认是false，需要服务器处理，必须true
"sAjaxDataProp":"aData",//是服务器分页的标志，必须有
"sAjaxSource":"${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。
"aoColumns":[//初始化要显示的列
{
"mDataProp":"id",//获取列数据，跟服务器返回字段一致
"sClass":"center",//显示样式
"mRender":function(data,type,full){//返回自定义的样式
return""
}
},
{
"mDataProp":"appName"
},
{
"mDataProp":"apiKey"
},
{
"mDataProp":"secretKey"
},
{
"mDataProp":"createTime",
"mRender":function(data,type,full){
returnnewDate(data)//处理时间显示
.toLocaleString();
}
},
{
"mDataProp":"createTime",
"mRender":function(data,type,full){
return"Sold"
}
},
{
"mDataProp":"createTime",
"mRender":function(data,type,full){
return"

" } }], "aoColumnDefs":[{//用来设置列一些特殊列的属性 "bSortable":false, "aTargets":[0] //第一列不排序 },{ "bSortable":false, "aTargets":[5] },{ "bSortable":false, "aTargets":[6] }], "oLanguage":{//语言设置 "sProcessing":"处理中...", "sLengthMenu":"显示_MENU_项结果", "sZeroRecords":"没有匹配结果", "sInfo":"显示第_START_至_END_项结果，共_TOTAL_项", "sInfoEmpty":"显示第0至0项结果，共0项", "sInfoFiltered":"(由_MAX_项结果过滤)", "sInfoPostFix":"", "sSearch":"搜索:", "sUrl":"", "sEmptyTable":"表中数据为空", "sLoadingRecords":"载入中...", "sInfoThousands":",", "oPaginate":{ "sFirst":"首页", "sPrevious":"上页", "sNext":"下页", "sLast":"末页" }, "oAria":{ "sSortAscending":":以升序排列此列", "sSortDescending":":以降序排列此列" } } }); //全选 $('tablethinput:checkbox').on( 'click', function(){ varthat=this; $(this).closest('table').find( 'tr>td:first-childinput:checkbox').each( function(){ this.checked=that.checked; $(this).closest('tr').toggleClass('selected'); }); }); });

后台代码：

//获取前端过来的参数,下面三个参数是dataTable默认的，不要随便更改
IntegersEcho=Integer.valueOf(params.get("sEcho"));//记录操作的次数每次加1
IntegeriDisplayStart=Integer.valueOf(params.get("iDisplayStart"));//起始
IntegeriDisplayLength=Integer.valueOf(params.get("iDisplayLength"));//每页显示的size

Mapmap=newHashMap();
try{
//查询数据,分页的话我这边使用的是PageHelper，这边不介绍了
PagedResultlist=pushEntityService.findByUserId(
pushUser.getId(),iDisplayStart,iDisplayLength);

//为操作次数加1，必须这样做
intinitEcho=sEcho+1;

//返回参数也是固定的
map.put("sEcho",initEcho);
map.put("iTotalRecords",list.getTotal());//数据总条数
map.put("iTotalDisplayRecords",list.getTotal());//显示的条数
map.put("aData",list.getDataList());//数据集合
}catch(Exceptione){
e.printStackTrace();
}

returnmap;

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

返回顶部
3162201930
czq8825@qq.com

jquery dataTable 后台加载数据并分页实例代码

热门推荐

随机推荐