datatable表格太长 jquery jquery.datatable后端分页

一、介绍

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

• 分页，即时搜索和排序
• 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
• 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
• 各式各样的扩展: Editor, TableTools, FixedColumns ……
• 丰富多样的option和强大的API
• 支持国际化
• 超过2900+个单元测试

二、引入

<link rel="stylesheet" type="text/css" href="/DataTables-1.10.7/css/jquery.dataTables.css">
 
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.0/js/jquery.js"></script>
 
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/DataTables-1.10.7/js/jquery.dataTables.js"></script>

三、html

<table class="table table-bordered table-hover" id="bigDataList">
                <thead>
                <tr>
                  <th>
                    用户id
                  </th>
                  <th>
                    主叫
                  </th>
                  <th>
                    识别码
                  </th>
                  <th>
                    区域id
                  </th>
                  <th>
                    服务类型
                  </th>
                  <th>
                    服务组
                  </th>
                  <th>
                    位置区码
                  </th>
                  <th>
                    GPRS节点
                  </th>
                  <th>
                    分配记数
                  </th>
                  <th>
                    协议类型
                  </th>
                  <th>
                    开始时间
                  </th>
                  <th>
                    结束时间
                  </th>
                </tr>
                </thead>
                <tbody>

                </tbody>
              </table>

四、js代码

var table1;

      //dataTable初始化对象
      function bigDataTable(queryData){
        table1= $('#bigDataList').DataTable({
          "paging": true,
          "lengthChange": true,
          "searching": true,
          "ordering": true,
          "aaSorting" : [[0, "asc"]], //默认的排序方式，第1列，升序排列
          "info": true,
          "autoWidth": false,
          "destroy":true,
          "processing":true,
          "scrollX": true,   //水平新增滚动轴
//          "serverSide":true,    //true代表后台处理分页，false代表前台处理分页
          "aLengthMenu":[10,15,20],
          "PaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
          //当处理大数据时，延迟渲染数据，有效提高Datatables处理能力
          "deferRender": true,
          "ajax":{
            url:"getJson_BigData_queryDataByParams",
            dataSrc:
                    function(data){
                      if(data.callbackCount==null){
                        data.callbackCount=0;
                      }
                      //抛出异常
                      if(data.sqlException){
                        alert(data.sqlException);
                      }
                      //查询结束取消按钮不可用
                      $("#queryDataByParams").removeAttr("disabled");
                      return data.dataList;             //自定义数据源，默认为data
                    },     //dataSrc相当于success，在datatable里面不能用success方法，会覆盖datatable内部回调方法
            type:"post",
            data:queryData
          },
          columns:[
            { data: 'user_ip' },
            { data: 'calling'},
            { data: 'imei' },
            { data: 'cell_id'},
            { data: 'service_type' },
            { data: 'service_group'},
            { data: 'lac' },
            { data: 'sgsn'},
            { data: 'assignment_count' },
            { data: 'proto_type'},
            { data: 'start_time' },
            { data: 'end_time'},
          ],

          /*是否开启主题*/
          "bJQueryUI": true,
          "oLanguage": {    // 语言设置
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "抱歉， 没有找到",
            "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有数据",
            "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
            "sZeroRecords": "没有检索到数据",
            "sSearch": "检索:",
            "oPaginate": {
              "sFirst": "首页",
              "sPrevious": "前一页",
              "sNext": "后一页",
              "sLast": "尾页"
            }
          },
        });
      }

点击请求ajax，返回渲染数据：

//点击查询
      $("#queryDataByParams").on("click",function() {
        var reg = new RegExp("^[0-9]*$");
        var startTime=$("#searchDateRange").val().substring(0,19).replace(/-/g, '/');
        var endTime=$("#searchDateRange").val().substring(22,41).replace(/-/g, '/');
        var date1=new Date(startTime);  //开始时间
        var date2=new Date(endTime);    //结束时间

        var date3=date2.getTime()-date1.getTime()  //时间差的毫秒数
        if(date3>60*60*24*1000){
          alert("开始时间与结束时间间隔大于24小时！");
          return false;
        }
        if(!$("#searchDateRange").val() || $("#searchDateRange").val()=="填写时间段"){
          alert("时间区段不能为空！");
          return false;
        }
        if(!$("#calling").val() && !reg.test($("#calling").val())){
          alert("请输入全数字!");
        }
        //查询时候设置按钮不可用
        $("#queryDataByParams").attr("disabled", true);
        var queryData={"startseg":$("#searchDateRange").val(),
          "callseg":$("#calling").val(),
          "identifiCode":$("#identifiCode").val(),
          "areaId":$("#areaId").val(),
          "serviceType":$("#serviceType").val(),
          "serviceGroup":$("#serviceGroup").val(),
          "areaCode":$("#areaCode").val(),
          "gprsNode":$("#gprsNode").val(),
          "distritNum":$("#distritNum").val(),
          "protocolType":$("#protocolType").val()
        };
        if(table1!=null || table1 !=undefined){
          //        dataTable初始化之后不能再设值，需要销毁重新定义，(数据量大时不适用)
//            table1.destroy();
//            bigDataTable(queryData);

//              var src={
//                url:"getJson_BigData_queryDataByParams",
//                dataSrc :"dataList",      //自定义数据源，默认为data
//                type:"post",
//                data:{"test":$("#protocolType").val()}
//              };

//            table1.fnSettings().ajax=src; //ajax访问数据
//            table1.fnPageChange(0,true);  //分页的页数从0开始
          table1.settings()[0].ajax.data=queryData;
          table1.ajax.reload();
        }else{
          bigDataTable(queryData);
        }

      });

上面是前台分页，如果要做后台分业，当然最好就是用后台分页：

1.修改datatable初始化属性，新增

"serverSide":true,    //true代表后台处理分页，false代表前台处理分页

2.后台即可获取到每页数据，当前页参数

private int length;

	private int start:
		
	public int getLength(){
		return length;
	}

	public void setLength(int length){
		this.length = length;
	}

	public int getStart(){
		return start;
	}

	public void setStart(int start){
		this.start = start;
	}

我的后台是用struts2写的，其他的也可以用request里面获取，这个值初始化设置之后会一起返回给后端的，然后后端操作数据库的时候，就可以根据这两个参数就行真分页了。

public String dataPaging(){
        resultJson = new HashMap<String,Object>();
        searchItem = getRequest().getParameter("extra_search");
        List<Log> list = new ArrayList<Log>();
        list = logService.queryForPaging(start,length,searchItem);
        int count = logService.queryForPagingSize(searchItem);
        resultJson.put("draw", Integer.toString(draw));
        resultJson.put("recordsTotal", Integer.toString(count));
        resultJson.put("recordsFiltered",  Integer.toString(count));
        resultJson.put("data", list);
        return "success";
    }

public List<T> queryForPaging(int start,int length,String query) {
        Criteria cri = getSession().createCriteria(this.persistentClass);
        cri.addOrder(Order.desc("id")).setFirstResult(start).setMaxResults(length);
        if(query != null && !"".equals(query)){
            cri.add(Restrictions.like("username", query, MatchMode.ANYWHERE));
        }
        List<T> list = cri.list();
        return list;
    }

前后台数据交互：

前台格式：

<table id="activityList" class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th width="10%">ID</th>
                    <th width="15%">店铺名称</th>
                    <th width="15%">优惠活动</th>
                    <th width="15%">开始时间</th>
                    <th width="15%">结束时间</th>
                    <th width="15%">操作</th>
                </tr>
                </thead>
                <tbody>

                </tbody>
            </table>

columns:[
                        { data: 'id' },
                        { data: 'storeInfo.realName'},
                        { data: 'content' },
                        { data: 'startTime',
                          "render": function ( data, type, full, meta ) {
                                var dataStr = Date.parse(data);
                                return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
                            }
                        },
                        { data: 'endTime',
                            "render": function ( data, type, full, meta ) {
                                var dataStr = Date.parse(data);
                                return new Date(dataStr).Format("yyyy-MM-dd hh:mm:ss");
                            }
                        },
                        {data:'id',
                            "render": function ( data, type, full, meta ) {
                                var edithtml ="<button class=\"btn btn-info\" type=\"button\" οnclick='editorActivity()'>编辑</button> "+
                                "<button class=\"btn btn-info\" type=\"button\" οnclick='deleteActivity()'>删除</button>"
                                return edithtml;
                            }
                        }
                    ],
 Date.prototype.Format = function (fmt) { //author: meizz
                var o = {
                    "M+": this.getMonth() + 1, //月份
                    "d+": this.getDate(), //日
                    "h+": this.getHours(), //小时
                    "m+": this.getMinutes(), //分
                    "s+": this.getSeconds(), //秒
                    "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                    "S": this.getMilliseconds() //毫秒
                };
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
{
    "resultList": [
        {
            "content": "元旦大促销活动",
            "endTime": "2016-01-03T22:00:00",
            "id": 1,
            "startTime": "2016-01-01T08
:00:00",
            "storeInfo": {
                "buildingId": 3,
                "buildingName": "一号楼",
                "floorId": 4,
                "floorName": "一层",
                "id": 1,
                "realName": "KFC",
                "siteId": 2,
                "siteName": "河西万达",
                "storeId": 7,
                "storeName": "Z1",
                "zoneId": 1,
                "zoneName": "万达企业"
            }
        },
        {
            "content": "手撕汉堡，新品上市，买一送一",
            "endTime": "2015-12-30T14:43:38",
            "id": 2,
            "startTime": "2015-12-29T14:43:34",
            "storeInfo": {
                "buildingId": 3,
                "buildingName": "一号楼",
                "floorId": 4,
                "floorName": "一层",
                "id": 1,
                "realName": "KFC",
                "siteId": 2,
                "siteName": "河西万达",
                "storeId": 7,
                "storeName": "Z1",
                "zoneId": 1,
                "zoneName": "万达企业"
            }
        },
        {
            "content": "麻麻黑，免费吃，只
要你能吃得完，随便吃",
            "endTime": "2016-02-15T14:45:05",
            "id": 3,
            "startTime": "2016-02-01T14:44:53",
            "storeInfo": {
                "buildingId": 3,
                "buildingName": "一号楼",
                "floorId": 4,
                "floorName": "一层",
                "id": 1,
                "realName": "KFC",
                "siteId": 2,
                "siteName": "
河西万达",
                "storeId": 7,
                "storeName": "Z1",
                "zoneId": 1,
                "zoneName": "万达企业"
            }
        }
    ]
}