Datatables的服务器模式的使用

Datatables表格控件应该是现在使用最广的免费前端jquery表格插件了吧。下面讲讲在实际项目中使用的一些经验。在介绍之前，先贴出几个链接。[Datatables官方网站](http://dt.thxopen.com/index.html)[github项目地址](https://github.com/fudanstar/DataTables)对于数据量特别大，或者数据来源于webservice等导致数据获取时间特别长的，就需要使用服务器模式，也就是数据不是全部获取到前端，而是通过服务器分页获取的。

1. javascript代码

table = $('#resultfile_datatable').DataTable(//创建一个Datatable            {                        ajax : {//通过ajax访问后台获取数据                            "url": "*******",//后台地址                            "dataSrc": function (json) {//获取数据之后处理函数，jason就是返回的数据                                var dataSet = new Array();                                dataSet=json.data;                                 ...//对数据处理过程                                return dataSet;//再将数据返回给datatable控件使用                            }                        },                        serverSide: true,//如果是服务器方式，必须要设置为true                        processing: true,//设置为true,就会有表格加载时的提示                        columns : [ {"data" : "name"}, //各列对应的数据列                                    {"data" : "proTopicName"},                                     {"data" : "missionName"},                                     {"data" : "areaName"},                                     {"data" : "fileformat"},                                     {"data" : "research"},                                     {"data" : "category"},                                     {"data" : null} ],                        columnDefs : [ {//列渲染，可以添加一些操作等                            targets : 7,//表示是第8列，所以上面第8列没有对应数据列，就是在这里渲染的。                            render : function(data, type, row) {//渲染函数                                                                                      var html = '&nbsp;<button type="button" class="btn btn-info btn-sm" ">修改</button><br><br>&nbsp;<button type="button" class="btn btn-danger btn-sm" ">删除</button>';//这里加了两个button，一个修改，一个删除                                return html;//将改html语句返回，就能在表格的第8列显示出来了                            }                        },{                             orderable:false,//禁用排序                             targets:[1,2,3,5,6]   //指定的列                         }                        ],                         "language": {//国际化                                "processing":"<p style=\"font-size: 20px;color: #F79709;\">正在玩命加载中。。。。请稍后！</p>",//这里设置就是在加载时给用户的提示                                "lengthMenu": "_MENU_ 条记录每页",                                "zeroRecords": "没有找到记录",                                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",                                "infoEmpty": "无记录",                                "infoFiltered": "(从 _MAX_ 条记录过滤)",                                "paginate": {                                    "previous": "上一页",                                    "next": "下一页"                                }                            },                        "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +"t" +"<'row'<'col-xs-6'i><'col-xs-6'p>>",//给表格改样式                        initComplete : function() {//表格完成时运行函数                                                  $("#mytool").append('<button type="button" class="btn btn-warning btn-sm" id="importfilebutton" onclick="jumpimportfilepage();">添加</button>');//这里在表格的上面加了一个添加标签                        }                    });}

1. 后台action代码

    //获取请求次数    private String draw = "0";    //数据起始位置    private String start;    //数据长度    private String length;    //总记录数    private String recordsTotal = "0";    //过滤后记录数    private String recordsFiltered = "";    //定义列名    private String[] cols = {"name", "proTopicName", "missionName", "areaName", "fileformat", "areaName", "research", "category"};    //获取客户端需要那一列排序    private String orderColumn = "0";    //获取排序方式 默认为asc    private String orderDir = "asc";    //获取用户过滤框里的字符    private String searchValue;public void getAllResultFiles() throws IOException    {        //获取文件参数        HttpServletRequest request = ServletActionContext.getRequest();        draw=request.getParameter("draw");        start = request.getParameter("start");        length = request.getParameter("length");        orderColumn = request.getParameter("order[0][column]");        orderColumn = cols[Integer.parseInt(orderColumn)];        orderDir = request.getParameter("order[0][dir]");        searchValue = request.getParameter("search[value]");        List<String> sArray = new ArrayList<String>();        if (!searchValue.equals("")) {//判断搜索框是否为空，添加查询条件            sArray.add(" name like '%" + searchValue + "%'");            sArray.add(" fileformat like '%" + searchValue + "%'");          }        String individualSearch = "";        if (sArray.size() == 1) {            individualSearch = sArray.get(0);        } else if (sArray.size() > 1) {            for (int i = 0; i < sArray.size() - 1; i++) {                individualSearch += sArray.get(i) + " or ";            }            individualSearch += sArray.get(sArray.size() - 1);        }        //获取数据库总记录数        recordsTotal=""+resultFilesService.getModelCount();        String searchSQL = "";        if (individualSearch != "") {            searchSQL = " where " + individualSearch;        }        searchSQL+= " order by " + orderColumn + " " + orderDir;        List<Resultfiles> resultfilesList=resultFilesService.findResultfilesList(searchSQL,start,length);        if (searchValue != "") {            recordsFiltered =""+resultFilesService.getModelCount(searchSQL);        }        else {            recordsFiltered = recordsTotal;        }                           if(resultfilesList!=null)        {            ...//对数据进行处理            Map<Object, Object> info = new HashMap<Object, Object>();            info.put("data", resultfilesBeanList);            info.put("recordsTotal", recordsTotal);            info.put("recordsFiltered", recordsFiltered);            info.put("draw", draw);            JSONObject jsonstr = JSONObject.fromObject(info);            System.out.println(jsonstr.toString());            results = jsonstr.toString();        }        HttpServletResponse response = ServletActionContext.getResponse();        response.setContentType("text/html;charset=UTF-8");        response.getWriter().write(results);        response.getWriter().close();    }

以上就是在javaweb环境下Datatables控件的服务器模式的使用。