使用 datatable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。
引用 js文件
<script src="static/ace/js/jquery-2.0.3.min.js"></script>
<script src="static/ace/js/jquery.datatables.min.js"></script> <script src="static/ace/js/jquery.datatables.bootstrap.js"></script>
添加一个table 标签，<tbody></tbody> 可以不用，可以动态加载
我要评论
<table id="sample-table-2" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="center"><label>
<input type="checkbox" class="ace" />
<span class="lbl"></span>
</label>
</th>
<th>名称</th>
<th>apikey</th>
<th>secretkey</th>
<th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
<th class="hidden-480">status</th>
<th>操作</th>
</tr>
</thead>
</table>
关键的js代码：
<script type="text/javascript">
jquery(function($) {
//初始化table
var otable1 = $('#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 "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
}
},
{
"mdataprop" : "appname"
},
{
"mdataprop" : "apikey"
},
{
"mdataprop" : "secretkey"
},
{
"mdataprop" : "createtime",
"mrender" : function(data, type, full) {
return new date(data)//处理时间显示
.tolocalestring();
}
},
{
"mdataprop" : "createtime",
"mrender" : function(data, type, full) {
return "<span class='label label-sm label-info arrowed arrowed-righ'>sold</span>"
}
},
{
"mdataprop" : "createtime",
"mrender" : function(data, type, full) {
return "<div class='visible-md visible-lg hidden-sm hidden-xs action-buttons'><a class='blue' href='#'><i class='icon-zoom-in bigger-130'></i></a><a class='green' href='#'><i class='icon-pencil bigger-130'></i></a><a class='red' href='#'><i class='icon-trash bigger-130'></i></a></div>"
}
} ],
"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" : ": 以降序排列此列"
}
}
});
//全选
$('table th input:checkbox').on(
'click',
function() {
var that = this;
$(this).closest('table').find(
'tr > td:first-child input:checkbox').each(
function() {
this.checked = that.checked;
$(this).closest('tr').toggleclass('selected');
});
});
});
</script>
后台代码：
// 获取前端过来的参数,下面三个参数是 datatable默认的，不要随便更改
integer secho = integer.valueof(params.get("secho"));// 记录操作的次数 每次加1
integer idisplaystart = integer.valueof(params.get("idisplaystart"));// 起始
integer idisplaylength = integer.valueof(params.get("idisplaylength"));// 每页显示的size
map<string, object> map = new hashmap<string, object>();
try {
// 查询数据,分页的话我这边使用的是 pagehelper，这边不介绍了
pagedresult<pushentity> list = pushentityservice.findbyuserid(
pushuser.getid(), idisplaystart, idisplaylength);
// 为操作次数加1，必须这样做
int initecho = secho + 1;
//返回参数也是固定的
map.put("secho", initecho);
map.put("itotalrecords", list.gettotal());//数据总条数
map.put("itotaldisplayrecords", list.gettotal());//显示的条数
map.put("adata", list.getdatalist());//数据集合
} catch (exception e) {
e.printstacktrace();
}
return map;
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
MFC的静态库.lib、动态库.dll（包含引入库.lib）以及Unicode库示例
CTF 刷题记录（一） 白云新闻搜索（手动与自动化SQL注入）
javascript如何使用函数random来实现课堂随机点名方法详解
网友评论