datatables常用配置

源码请见2. Datatable的分页实例使用

一、 目标

1. 可使用搜索框；
2. 自定义表格的语言风格；
3. 增加首页、末页；
4. 隐藏表格中不需要的信息；
5. 隐藏指定列；

二、 效果预览

三、 代码说明

3.1 表格装载

<script>
        $(document).ready(function() {
            $('#example').DataTable({
                columns : [ {
                    "sWidth" : "100px",
                    bSearchable : false,
                    bSortable : false,
                    data : 'id'
                }, {
                    "sWidth" : "100px",
                    bSearchable : true,
                    bSortable : false,
                    data : 'name'
                }, {
                    "sWidth" : "100px",
                    bSearchable : false,
                    bSortable : false,
                    visible: false,
                    data : 'passwd'
                }, {
                    "sWidth" : "100px",
                    bSearchable : false,
                    bSortable : false,
                    data : 'age'
                } ],
                "processing" : true,
                "serverSide" : true,
                "ajax" : "../getUserContentByMyself",
                //控制表格显示哪些部分
                "dom":'ftp',
                //表格语言设置
                "language": {
                    "url": "../json/table.json",
                },
                //设置分页脚标
                "pagingType": "full_numbers"
            });
        });
    </script>

3.2 后台获取搜索参数

public Object getUserContent(HttpServletRequest request) {

        int start = Integer.parseInt(request.getParameter("start"));
        int len = Integer.parseInt(request.getParameter("length"));
        String searchVal = request.getParameter("search[value]");

        Map<String, String> params = new HashMap<String, String>();
        params.put("searchVal", searchVal);

        Map<String, Object> result = getUserPaginationService.getDetails(params, start, len);

        return JSONArray.toJSON(result);
    }

3.3 Mybatis使用搜索参数

<!-- 获取分页内容的记录总数 -->
<select id="getUserSize"  resultType="java.lang.Integer" parameterType="java.util.Map">
    select count(1) from user where name like '%${searchVal}%'
</select>

<!-- 获取分页内容的记录内容 -->
<select id="getUserContent" resultMap="mUser" parameterType="java.util.Map">
    select * from user where name like '%${searchVal}%'
</select>

四、 总计

datatable空间会把所有需要的参数，传给后台，后台需要做的是利用这些参数，去获取数据，然后返回数据及相应的参数给前台，前台才会自动装载好表格。