jquery dataTable 后台加载数据并分页

深藏阁楼爱情的钟 2022-07-13 06:45 372阅读 0赞

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

引用 js文件

  1. <script src="static/ace/js/jquery-2.0.3.min.js"></script>
  3. <script src="static/ace/js/jquery.dataTables.min.js"></script>
  4. <script src="static/ace/js/jquery.dataTables.bootstrap.js"></script>

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

  1. <table id="sample-table-2" class="table table-striped table-bordered table-hover">
  2.         <thead>
  3.             <tr>
  4.                 <th class="center"><label>
  5.                         <input type="checkbox" class="ace" />
  6.                         <span class="lbl"></span>
  7.                     </label>
  8.                 </th>
  9.                 <th>名称</th>
  10.                 <th>apiKey</th>
  11.                 <th>secretKey</th>
  12.                 <th><i class="icon-time bigger-110 hidden-480"></i> 创建时间</th>
  13.                 <th class="hidden-480">Status</th>
  14.                 <th>操作</th>
  15.             </tr>
  16.         </thead>
  18.     </table>

关键的JS代码：

  1. <script type="text/javascript">
  2.     jQuery(function($) {
  4.         //初始化table
  5.         var oTable1 = $('#sample-table-2')
  6.                 .dataTable(
  7.                         {
  8.                             "bPaginate" : true,//分页工具条显示
  9.                             //"sPaginationType" : "full_numbers",//分页工具条样式
  10.                             "bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态  
  11.                             "bScrollCollapse" : true, //当显示的数据不足以支撑表格的默认的高度
  12.                             "bLengthChange" : true, //每页显示的记录数
  13.                             "bFilter" : false, //搜索栏
  14.                             "bSort" : true, //是否支持排序功能
  15.                             "bInfo" : true, //显示表格信息
  16.                             "bAutoWidth" : true, //自适应宽度
  17.                             "bJQueryUI" : false,//是否开启主题
  18.                             "bDestroy" : true,
  19.                             "bProcessing" : true, //开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好
  20.                             "bServerSide" : true,//服务器处理分页，默认是false，需要服务器处理，必须true
  21.                             "sAjaxDataProp" : "aData",//是服务器分页的标志，必须有 
  22.                             "sAjaxSource" : "${basePath}pushEntity/getTableData",//通过ajax实现分页的url路径。  
  23.                             "aoColumns" : [//初始化要显示的列
  24.                                     {
  25.                                         "mDataProp" : "id",//获取列数据，跟服务器返回字段一致
  26.                                         "sClass" : "center",//显示样式
  27.                                         "mRender" : function(data, type, full) {//返回自定义的样式
  28.                                             return "<label><input type='checkbox' class='ace' /><span class='lbl'></span></label>"
  29.                                         }
  30.                                     },
  31.                                     {
  32.                                         "mDataProp" : "appName"
  33.                                     },
  34.                                     {
  35.                                         "mDataProp" : "apiKey"
  36.                                     },
  37.                                     {
  38.                                         "mDataProp" : "secretKey"
  39.                                     },
  40.                                     {
  41.                                         "mDataProp" : "createTime",
  42.                                         "mRender" : function(data, type, full) {
  43.                                             return new Date(data)//处理时间显示
  44.                                             .toLocaleString();
  45.                                         }
  46.                                     },
  47.                                     {
  48.                                         "mDataProp" : "createTime",
  49.                                         "mRender" : function(data, type, full) {
  50.                                             return "<span class='label label-sm label-info arrowed arrowed-righ'>Sold</span>"
  51.                                         }
  52.                                     },
  53.                                     {
  54.                                         "mDataProp" : "createTime",
  55.                                         "mRender" : function(data, type, full) {
  56.                                             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>"
  57.                                         }
  58.                                     } ],
  59.                             "aoColumnDefs" : [ {//用来设置列一些特殊列的属性
  60.                                 "bSortable" : false,
  61.                                 "aTargets" : [ 0 ]
  62.                             //第一列不排序
  63.                             }, {
  64.                                 "bSortable" : false,
  65.                                 "aTargets" : [ 5 ]
  66.                             }, {
  67.                                 "bSortable" : false,
  68.                                 "aTargets" : [ 6 ]
  69.                             } ],
  70.                             "oLanguage" : {//语言设置
  71.                                 "sProcessing" : "处理中...",
  72.                                 "sLengthMenu" : "显示 _MENU_ 项结果",
  73.                                 "sZeroRecords" : "没有匹配结果",
  74.                                 "sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
  75.                                 "sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
  76.                                 "sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
  77.                                 "sInfoPostFix" : "",
  78.                                 "sSearch" : "搜索:",
  79.                                 "sUrl" : "",
  80.                                 "sEmptyTable" : "表中数据为空",
  81.                                 "sLoadingRecords" : "载入中...",
  82.                                 "sInfoThousands" : ",",
  83.                                 "oPaginate" : {
  84.                                     "sFirst" : "首页",
  85.                                     "sPrevious" : "上页",
  86.                                     "sNext" : "下页",
  87.                                     "sLast" : "末页"
  88.                                 },
  89.                                 "oAria" : {
  90.                                     "sSortAscending" : ": 以升序排列此列",
  91.                                     "sSortDescending" : ": 以降序排列此列"
  92.                                 }
  93.                             }
  94.                         });
  96.         //全选
  97.         $('table th input:checkbox').on(
  98.                 'click',
  99.                 function() {
  100.                     var that = this;
  101.                     $(this).closest('table').find(
  102.                             'tr > td:first-child input:checkbox').each(
  103.                             function() {
  104.                                 this.checked = that.checked;
  105.                                 $(this).closest('tr').toggleClass('selected');
  106.                             });
  108.                 });
  110.     });
  111. </script>

后台代码：

  1. // 获取前端过来的参数,下面三个参数是 dataTable默认的，不要随便更改
  2.         Integer sEcho = Integer.valueOf(params.get("sEcho"));// 记录操作的次数 每次加1
  3.         Integer iDisplayStart = Integer.valueOf(params.get("iDisplayStart"));// 起始
  4.         Integer iDisplayLength = Integer.valueOf(params.get("iDisplayLength"));// 每页显示的size
  6.         Map<String, Object> map = new HashMap<String, Object>();
  7.         try {
  8.             // 查询数据,分页的话我这边使用的是 PageHelper，这边不介绍了
  9.             PagedResult<PushEntity> list = pushEntityService.findByUserId(
  10.                     pushUser.getId(), iDisplayStart, iDisplayLength);
  12.             // 为操作次数加1，必须这样做
  13.             int initEcho = sEcho + 1;
  15. //返回参数也是固定的
  16.             map.put("sEcho", initEcho);
  17.             map.put("iTotalRecords", list.getTotal());//数据总条数
  18.             map.put("iTotalDisplayRecords", list.getTotal());//显示的条数
  19.             map.put("aData", list.getDataList());//数据集合
  20.         } catch (Exception e) {
  21.             e.printStackTrace();
  22.         }
  24.         return map;

发表评论

表情：
评论列表 （有 0 条评论，372人围观）

还没有评论，来说两句吧...

相关阅读