张强的个人博客

Good Luck To You!

jQuery.DataTables实现简单的服务端分页

效果图如下:

20190730141804269.JPG

JS代码如下:

// 自定义 dataTable语言显示
var dataTableLanguage = {
    "sLengthMenu": "每页显示 _MENU_ 条记录",
    "sZeroRecords": "抱歉, 没有找到",
    "sInfoEmpty": "没有数据",
    "sInfo": "显示 _START_ 至 _END_ 条   共 _TOTAL_ 条",
    "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
    "oPaginate": {
        "sFirst": "首页",
        "sPrevious": "上一页",
        "sNext": "下一页",
        "sLast": "尾页"
     },
     "sZeroRecords": "没有检索到数据",
};
 
// 渲染表格            
var tableObj = $("#table-sort").dataTable({            
    "searching": false, // 是否开启默认的查询条件输入框            
    "serverSide": true, // 服务端分页            
    "fnPageChange":"next", // 换页方法,可以跳转到指定页。可选参数有"first", "previous",   "next" , "last",或者是一个整数,0是第一页            
    "bProcessing": true, // 当表格在处理的时候(比如排序操作)是否显示“处理中...”,默认false            
    "bPaginate": true, // 是否允许终端用户从一个选择列表中选择分页的页数            
    "aLengthMenu":[10,20,30,40,50,100], //每页显示的记录数,供用户选择            
    "bLengthChange": true, // 是否显示每页大小的下拉框            
    "bFilter": true, // 过滤功能            
    "bSort": true, // 排序功能            
    "aaSorting": [[0,"asc"]],// 设置初始化时默认一列来排序            
    "sPaginationType":"full_numbers", // 分页组件的样式,具体样式参考 https://www.datatables.net/release-datatables/examples/basic_init/alt_pagination.html            
    "ajax":{            
        url:"../baseData/listGroupNumber.do",// 请求的URL        
        type:"post",        
        data:function(data){ // 提交到后台的参数,内容很多,如要获取所有,请直接return data就行了,具体请遍历data对象或用浏览器F12网络,参数中查看        
              var param = {};        
             var columnIndex = data["order"][0]["column"]; // 获取鼠标点击列名的下标        
            param.start = data["start"]; // 数据的开始位置        
            param.length = data["length"]; // 每页显示的数量        
            param.order = data["order"][0]["dir"]; // 排序规则 DESC或ASC        
            param.orderField = data["columns"][columnIndex]["data"]; // 根据下标获取排序列名的名称        
            param.search = data["search"]["value"]; // 搜索框的文本内容,searching如果不为true,则就是默认空串            
            return param;        
        }        
    },            
    "fnDrawCallback": function (oSettings) {            
        var json=jQuery.parseJSON(oSettings.jqXHR.responseText);//获取后台方式 直接可以拿到json 之后进行处理        
        //console.log(json);//此处json就是返回的数据        
        $("#showspan").text(json.iTotalRecords);        
                
    },            
    "oLanguage": dataTableLanguage,// 界面显示文字,默认是英文            
    "aoColumns": [
              // uid后台返回的JSON对象的属性名,sDefaultContent当后台数据为null时,显示的默认值,bVisible前端是否显示这个字段,默认true,bSortable设置此列不参与排序操作            
          {"data": "uid","sDefaultContent":"","bVisible":true,"bSortable":false,        
              // 自定义渲染结果    
              "render":function (data, type, full, meta) {    
                  return "<input type='checkbox' value='"+data+"' />";
               }        
          },        
          {"data":"legalPerson","sDefaultContent":""},        
          {"data":"businessCluster","sDefaultContent":""},        
          {"data":"costCode","sDefaultContent":""},        
          {"data":"number","sDefaultContent":""},        
          {"data":"proportion","sDefaultContent":""}        
    ]            
});        
 
// 刷新表格,重新加载数据
function refresh() {
    tableObj.fnDraw(true);
}

HTML代码如下:

        <table id="table-sort">
            <thead>
                <tr>
                     <th><input type="checkbox" /></th>
                        <th>法人</th>
                    <th>事業群</th>
                         <th>費用代碼</th>
                        <th>人數</th>
                        <th>人數佔比</th>
                </tr>
            </thead>
             <tbody>
            </tbody> 
        </table>

Java Controller返回如下

    /**
     * @param start 分頁的開始位置
     * @param length 每頁顯示的數量
     * @param order 排序方式
     * @param orderField 排序字段
     * @param searchText 搜索文本
     **/
    @RequestMapping(value="/listResidenceNumber.do")
    @ResponseBody
    public Map<String,Object> listResidenceNumber(Integer start,Integer length,
            String order,String orderField,String search) {
        Map<String,Object> result = new HashMap<String,Object>();
        result.put("iTotalDisplayRecords", service.getListResidenceCount(searchText));
        result.put("iTotalRecords", result.get("iTotalDisplayRecords"));    
        result.put("data", service.listResidenceNumber(start, length, order, orderField, search));
        return result;
    }

后台分页的JSON格式返回如下:

{
    "iTotalRecords":52,
    "data":[{"businessCluster":"xxxx","costCode":"xxxx","legalPerson":"xxxxx有限公司","nonCompany":0.0,"outOfNum":0.0,"proportion":1.062E-4,"residenceCode":"xxxx","residenceNum":186.0,"total":186.0,"uid":"AD5095F9D12748308C532BAEE6FBF6B2"}],
    "iTotalDisplayRecords":52
}

注意事项:

       如果不设置iTotalDisplayRecords与iTotalRecords会导致下一页功能失效,详情请参阅jquery.dataTable源码_fnAjaxUpdateDraw方法

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

«   2019年10月   »
123456
78910111213
14151617181920
21222324252627
28293031
控制面板
您好,欢迎到访网站!
  查看权限
网站分类
    搜索
    最新留言
      文章归档
      网站收藏
      友情链接
      • RainbowSoft Studio Z-Blog
      • 订阅本站的 RSS 2.0 新闻聚合

      Powered By Z-BlogPHP 1.5.2 Zero

      Copyright Your WebSite.Some Rights Reserved.