使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。
引用 js文件
<script src="https://www.jb51.net/static/ace/js/jquery-2.0.3.min.js"></script>
<script src="https://www.jb51.net/static/ace/js/jquery.dataTables.min.js"></script> <script src="https://www.jb51.net/static/ace/js/jquery.dataTables.bootstrap.js"></script>
添加一个table 标签，<tbody></tbody> 可以不用，可以动态加载
<table> <thead> <tr> <th><label> <input type="checkbox" /> <span></span> </label> </th> <th>名称</th> <th>apiKey</th> <th>secretKey</th> <th><i></i> 创建时间</th> <th>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' /><span></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>Sold</span>" } }, { "mDataProp" : "createTime", "mRender" : function(data, type, full) { return "<div><a href='#'><i></i></a><a href='#'><i></i></a><a href='#'><i></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;