jquerydataTable后台加载数据并分页实例代码
使⽤ 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=                    }
} ],
"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.("sEcho"));// 记录操作的次数每次加1
Integer iDisplayStart = Integer.("iDisplayStart"));// 起始
Integer iDisplayLength = Integer.("iDisplayLength"));// 每页显⽰的size
Map<String, Object> map = new HashMap<String, Object>();
try {
// 查询数据，分页的话我这边使⽤的是 PageHelper，这边不介绍了
PagedResult<PushEntity> list = pushEntityService.findByUserId(
/
/ 为操作次数加1，必须这样做
int initEcho = sEcho + 1;
//返回参数也是固定的
map.put("sEcho", initEcho);
map.put("iTotalRecords", Total());//数据总条数
map.put("iTotalDisplayRecords", Total());//显⽰的条数
map.put("aData", DataList());//数据集合
} catch (Exception e) {
e.printStackTrace();
ajax实例 文件浏览
}
return map;
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。