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控件的服务器模式的使用。