美文网首页
[Tool]jQuery表格插件DataTables 的服务器

[Tool]jQuery表格插件DataTables 的服务器

作者: ae7729ac3ac8 | 来源:发表于2017-08-15 23:35 被阅读0次

    jQuery表格插件DataTables 的服务器端参数解析工具

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

    DataTables 插件的使用 点击
    需要开启服务器模式

    使用方式

    可以使用spring mvc 注解方式 或者 使用DataTableUtils 工具解析参数
    使用spring mvc 注解方式需要 配置 注解的解析类

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

    简单使用示例

    页面

    $('#sample-table-2').dataTable( {
                                    bAutoWidth : false, //自动调整列宽
                                    serverSide : true,  //开启服务器模式
                                    ordering : false,   //排序
                                    dom: 'lrtip',       //搜索框、分页条、每页条数、总条数信息设置
                                    language : {
                                        processing : "正在加载数据!"   //ajax加载数据时显示中文
                                    },
                                    ajax : {
                                        //服务器模式请求url,会带上分页、排序等信息
                                        url : "${pageContext.request.contextPath}/user/list.html", 
                                        type : "POST",
                                        //data : function(d) {
                                        //  //添加额外的参数传给服务器
                                        //  d.extra_search = {
                                        //      begin_time : $("#starttime").val(),
                                        //      end_time : $("#endtime").val()
                                        //  }
                                        //}
                                    },
                                    //每列值对应Bean生成的Json的字段
                                    columns : [
                                                 {data : "id"},
                                                 {data : "acctNo"},
                                                 {data : "name"},
                                                 {data : "contactMobile"},
                                                 {data : "roleType"},
                                                 {data : "creatDate"},
                                                 {data : "lastDate"},
                                                 {data : "status"},                                                 
                                                 {data : "id"},             
                                                ],
                                    //对指定列显示内容做优化
                                    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>";
                                                }
                                            }
                                            ]
                    } );
    

    后台

        /**
         * 使用spring mvc  处理Datatable的参数   使用注解
         * @param tableRequest  DataTable 请求参数
         * @return
         * @throws Exception
         */
        @RequestMapping("list")
        @ResponseBody
        public DataTableResponse<User> getData(@DataTableParam DataTableRequest tableRequest) throws Exception{
            
            //对请求参数解析,生成 排序条件、列搜索对象、全局搜索对象
            ResultObj<User> resultObj = tableRequest.getResultObj(User.class);
            //dataTable 相应参数   会被处理成json
            DataTableResponse<User>  user= new DataTableResponse<User>();
            //查询数据  略
            return user;
        }
        
        @RequestMapping("list1")
        @ResponseBody
        public DataTableResponse<User> getList(HttpServletRequest request) throws Exception{
            //不使用注解
            
            DataTableRequest param = DataTableUtils.getParam(request);
            
            //对请求参数解析,生成 排序条件、列搜索对象、全局搜索对象
            ResultObj<User> resultObj = param.getResultObj(User.class);
            //dataTable 相应参数   会被处理成json
            DataTableResponse<User>  user= new DataTableResponse<User>();
            //查询数据  略
            return user;
        }
    

    如果使用了 mybatis,搭配使用 PageHelper插件 配合我这个datatable插件是很方便的

    代码也比较简单 实现请看里面代码
    DataTables 参数解析插件

    相关文章

      网友评论

          本文标题:[Tool]jQuery表格插件DataTables 的服务器

          本文链接:https://www.haomeiwen.com/subject/oldbrxtx.html