datatables服务端分页配置最新教程2018

最新推荐文章于 2023-01-04 01:15:49 发布

一年e度的夏天

最新推荐文章于 2023-01-04 01:15:49 发布

阅读量1.9w

点赞数 3

分类专栏：前端开发文章标签： datatables bootstrap javascript 分页服务端

本文链接：https://blog.csdn.net/u011410529/article/details/78924976

版权

前端开发专栏收录该内容

9 篇文章 0 订阅

订阅专栏

datatables服务端分页配置

datatables可以说是个好东西吧，几行js代码就能够让你初始化一个表格，很方便，但是要用好还是很困难的，因为配置太多太多了，网上的大多数是一些陈旧的配置，如果datatables更换了这么多版本，网上很多配置都有一些问题，我这里也不是datatables的基础教程，我这里就谈一下服务端分页怎么配置，因为我项目中用到了，笔以记之。后之览者，亦将有感于斯文~

一、必备

引入

<!--引入css-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">

<!--引入JavaScript-->
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

主体

<table id="example" class="display" cellspacing="0" width="100%">
       <thead>
           <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
           </tr>
       </thead>
       <tfoot>
           <tr>
               <th>Name</th>
               <th>Position</th>
               <th>Office</th>
               <th>Age</th>
               <th>Start date</th>
               <th>Salary</th>
           </tr>
       </tfoot>
       <tbody>
           <tr>
               <td>Tiger Nixon</td>
               <td>System Architect</td>
               <td>Edinburgh</td>
               <td>61</td>
               <td>2011/04/25</td>
               <td>$320,800</td>
           </tr>
     </tbody>
</table>

js代码
```
$(document).ready(function() {
   $('#example').DataTable();
} );
```
有这三个部分文件放到一个html中，你就可以实例化一个表格了，很容易对吧

二、分页

代码

<script type="text/javascript">

 var myTable;
 $(document).ready(function() {

   myTable = $('#projectTable').DataTable( {
       "processing": true,//刷新的那个对话框
       "serverSide": true,//服务器端获取数据
       "paging": true,//开启分页
       lengthMenu: [ //自定义分页长度
           [ 20, 50, 100 ],
           [ '20 页', '50 页', '100页' ]
       ],
       ordering:false,
       "ajax": {
           "url": "/api/get_project_list",
           "type": "POST",
           "data": function (d) {
              //删除多余请求参数
              for(var key in d){
                  if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
                      delete d[key];
                  }
              }
              var searchParams= {
               "retryType":$("#retryType").val(),
               "departmentCode":$("#departmentCode").val()!=""?$("#departmentCode").val():null,
               "projectCode":$("#projectCode").val()!=""?$("#projectCode").val():null,
               "serviceName":$("#serviceName").val()!=""?$("#serviceName").val():null,
               "csrfmiddlewaretoken":csrftoken
               };
              //附加查询参数
              if(searchParams){
                  $.extend(d,searchParams); //给d扩展参数
              }
           },
           "dataType" : "json",
           "dataFilter": function (json) {//json是服务器端返回的数据
               json = JSON.parse(json);
               var returnData = {};
               returnData.draw = json.data.draw;
               returnData.recordsTotal = json.data.total;//返回数据全部记录
               returnData.recordsFiltered = json.data.total;//后台不实现过滤功能，每次查询均视作全部结果
               returnData.data = json.data.retryProjectList;//返回的数据列表
               return JSON.stringify(returnData);//这几个参数都是datatable需要的，必须要
           }
       },
       "searching" : false,
       "columns": [
           { "data": "id" },
           { "data": "departmentCode" },
           { "data": "projectCode" },
           { "data": "serviceName" },
           { "data": "alertMail" },
           { "data": "callbackUrl" },
           { "data": "descInfo" },
           { "data": "companyId" },
           { "data": "retryType" },
           { "data": "retryCircle" },
           { "data": "createTime" },
           { "data": "updateTime" },
           { "data": "createUser" },
           { "data": "updateUser","defaultContent": ''},
           { "data": "validVal" },
           { "data": "retryTimes" }
       ],
       "oLanguage" : { // 国际化配置
           "sProcessing" : "正在获取数据，请稍后...",
           "sLengthMenu" : "显示 _MENU_ 条",
           "sZeroRecords" : "没有找到数据",
           "sInfo" : "从 _START_ 到  _END_ 条记录 总记录数为 _TOTAL_ 条",
           "sInfoEmpty" : "记录数为0",
           "sInfoFiltered" : "(全部记录数 _MAX_ 条)",
           "sInfoPostFix" : "",
           "sSearch" : "查询",
           "sUrl" : "",
           "oPaginate" : {
               "sFirst" : "第一页",
               "sPrevious" : "上一页",
               "sNext" : "下一页",
               "sLast" : "最后一页"
           }
       }
   });

 });
</script>

给表格加上自定义列：

   {
              data: function (data, type, full) {
                  return "<button class=\'btn btn-warning btn-xs\' onclick='updateMyForm("+JSON.stringify(data)+")'>修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>";
              },
              className: "center",
              defaultContent: '<button class=\'btn btn-warning btn-xs\' onclick="updateMyForm()">修改</button>  <button class=\'btn-xs btn btn-warning\'>详情</button>'
          }

讲解

大家按照我这个配置去配置基本可以完成datatables服务端分页配置，重点需要讲解的是dataFilter这个配置必须要，必须要，必须要，服务端分页要求我们传递draw，recordsTotal，recordsFiltered，data 这几个字段，请不要写错字母，不然分页就拜拜了，dataFilter 能够帮你解决这个问题，因为你不能总要求服务端有这几个字段吧

注意部分

datatables手动刷新方法

myTable.ajax.reload(); //myTable是上面我实例化的对象

三、JAVA代码

评论里有小伙伴提到了java里面怎么对应，我简单给些demo
其中请求必须要有这三个参数

    private Integer draw;
    private Integer length;
    private Integer start;

返回必须要有这两个参数

    private Long total;
    private Integer draw;

外层用data包装，所以我模板里面的代码是data.total data.draw，请往上看
获取列表的分页代码

    Page<Role> carList = PageHelper.offsetPage(req.getStart(), req.getLength()).doSelectPage(() -> roleDao.getRoleByCondition(req));
        List<RoleBo> roleBos = new ArrayList<>();
        for (Role role : carList) {
            RoleBo roleBo = new RoleBo();
            BeanUtils.copyProperties(role,roleBo);
            roleBos.add(roleBo);
        }
        roleListResp.setDraw(req.getDraw());
        roleListResp.setTotal(carList.getTotal());
        roleListResp.setRoleList(roleBos);

可以看出是用pageHelper的offsetPage做的。不懂的留言或者加群

Over，也是给自己做个笔记吧~

一年e度的夏天

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
11
评论
datatables服务端分页配置最新教程2018

datatables服务端分页配置 datatables可以说是个好东西吧，几行js代码就能够让你初始化一个表格，很方便，但是要用好还是很困难的，因为配置太多太多了，网上的大多数是一些陈旧的配置，如果datatables更换了这么多版本，网上很多配置都有一些问题，我这里也不是datatables的基础教程，我这里就谈一下服务端分页怎么配置，因为我项目中用到了，笔以记之。后之览者，亦将有感于...
复制链接

扫一扫