jQuery表格插件DataTables 的服務(wù)器端參數(shù)解析工具

分頁，即時(shí)搜索和排序
幾乎支持任何數(shù)據(jù)源：DOM， javascript， Ajax 和 服務(wù)器處理
支持不同主題 DataTables, jQuery UI, Bootstrap, Foundation
各式各樣的擴(kuò)展: Editor, TableTools, FixedColumns ……
豐富多樣的option和強(qiáng)大的API
支持國(guó)際化

DataTables 插件的使用 點(diǎn)擊
需要開啟服務(wù)器模式

使用方式

可以使用spring mvc 注解方式 或者 使用DataTableUtils 工具解析參數(shù)
使用spring mvc 注解方式需要 配置 注解的解析類

     <mvc:annotation-driven>
        <mvc:argument-resolvers>  
           <bean class="cc.yihy.utils.DataTableResolver"/>  
        </mvc:argument-resolvers>  
     </mvc:annotation-driven>

簡(jiǎn)單使用示例

頁面

$('#sample-table-2').dataTable( {
                                bAutoWidth : false, //自動(dòng)調(diào)整列寬
                                serverSide : true,  //開啟服務(wù)器模式
                                ordering : false,   //排序
                                dom: 'lrtip',       //搜索框、分頁條、每頁條數(shù)、總條數(shù)信息設(shè)置
                                language : {
                                    processing : "正在加載數(shù)據(jù)！"   //ajax加載數(shù)據(jù)時(shí)顯示中文
                                },
                                ajax : {
                                    //服務(wù)器模式請(qǐng)求url，會(huì)帶上分頁、排序等信息
                                    url : "${pageContext.request.contextPath}/user/list.html", 
                                    type : "POST",
                                    //data : function(d) {
                                    //  //添加額外的參數(shù)傳給服務(wù)器
                                    //  d.extra_search = {
                                    //      begin_time : $("#starttime").val(),
                                    //      end_time : $("#endtime").val()
                                    //  }
                                    //}
                                },
                                //每列值對(duì)應(yīng)Bean生成的Json的字段
                                columns : [
                                             {data : "id"},
                                             {data : "acctNo"},
                                             {data : "name"},
                                             {data : "contactMobile"},
                                             {data : "roleType"},
                                             {data : "creatDate"},
                                             {data : "lastDate"},
                                             {data : "status"},                                                 
                                             {data : "id"},             
                                            ],
                                //對(duì)指定列顯示內(nèi)容做優(yōu)化
                                columnDefs : [
                                        {
                                            targets : [ 0 ],
                                            data : "id",
                                            render : function(data, type, full) {
                                                return "<label><input name='form-field-radio' type='radio' class='ace' value="+data+" /><span class='lbl'></span> </label>";
                                            }
                                        }
                                        ]
                } );

后臺(tái)

    /**
     * 使用spring mvc  處理Datatable的參數(shù)   使用注解
     * @param tableRequest  DataTable 請(qǐng)求參數(shù)
     * @return
     * @throws Exception
     */
    @RequestMapping("list")
    @ResponseBody
    public DataTableResponse<User> getData(@DataTableParam DataTableRequest tableRequest) throws Exception{
        
        //對(duì)請(qǐng)求參數(shù)解析，生成 排序條件、列搜索對(duì)象、全局搜索對(duì)象
        ResultObj<User> resultObj = tableRequest.getResultObj(User.class);
        //dataTable 相應(yīng)參數(shù)   會(huì)被處理成json
        DataTableResponse<User>  user= new DataTableResponse<User>();
        //查詢數(shù)據(jù)  略
        return user;
    }
    
    @RequestMapping("list1")
    @ResponseBody
    public DataTableResponse<User> getList(HttpServletRequest request) throws Exception{
        //不使用注解
        
        DataTableRequest param = DataTableUtils.getParam(request);
        
        //對(duì)請(qǐng)求參數(shù)解析，生成 排序條件、列搜索對(duì)象、全局搜索對(duì)象
        ResultObj<User> resultObj = param.getResultObj(User.class);
        //dataTable 相應(yīng)參數(shù)   會(huì)被處理成json
        DataTableResponse<User>  user= new DataTableResponse<User>();
        //查詢數(shù)據(jù)  略
        return user;
    }

如果使用了 mybatis，搭配使用 PageHelper插件 配合我這個(gè)datatable插件是很方便的

代碼也比較簡(jiǎn)單 實(shí)現(xiàn)請(qǐng)看里面代碼
DataTables 參數(shù)解析插件