datatables 使用简单说明

    去年的时候研究过一段时间的datatbales,当时还将一些API使用方法做了个简单的总结并放在OSC上,昨天又有在OSC上问我关于datatables的一个小问题。正好过了一年,自己的小站后台又用了这个组件,所以在写个小小的总结,将本次使用这个组件的遇到的问题在记录一下。

    因为小站之前的版本是基于jfinal的开源版本,我闲着没事儿又将其修改我私下折腾的一个实验性质的框架。并将页面模板也改成了Freemarker。在用私有框架修改的datatables这块的时候,表格有几项一直没能正常显示,因为开始博文较少,还没有用上分页的功能,也没有正常修改,上周的时候转载了几篇文章导致需要使用分页功能时,就必须修改一下这个小小的BUG。

    我这里就将修改好的采用ajax从服务器端获取数据格式做个简单的记录。如果都采用datatables的默认设置,对于一个简单的服务器端分页查询,只响应以下数据就可以正常使用分页功能啦:

{
"DATANAME" : [{
//data
}],
"iTotalDisplayRecords" : 18,
"iTotalRecords" : 18
}

    也就是说除了数据外,只需要返回iTaotalDisplayRecords和iTotalRecords两个字段值就可以了,这两个值分别标识数据库中的记录数和可供显示的总记录数。分页实现时可以从输入参数中iDisplayStart 和iDisplayLength 中获取分页查询需要的相关信息。iDisplayStart 表格显示第一条数据对应的后台索引,也就是说对应后台所有满足查询条件的记录数编号,是后台在执行分页查询时的偏移量。iDisplayLength 每页显示的记录数,也就是当前表格最多显示的数据条数,对应后台就是一次分页查询最多取多少条记录 。


    附上之前总结的datatables参数说明:

$('#id').dataTable({
        "oLanguage" : xx, //语言选项 一般可以用来进行汉化显示使用
        "sPaginationType" : "xx", //分页类型
        "sDom" : "xxx",//表格DOM布局
        "bServerSide" : true,//用于服务器端分页
        "sAjaxDataProp" : "xx",//如果后台处理的JSON 数组跟默认的数组名不同时要配置此项
        "sAjaxSource" : "xxx",//地址
        "fnCreatedRow" : function(nRow, aData, iDataIndex) {
            //这个方法主要用在表格中的每一行 显示前可以进行DOM的修改等
        },
        "aoColumns" : [{
            fnRender : function(o, v) {
                        //用于生成一个单元格(td)中的内容
            },
            "sDefaultContent" : '',//单元格默认内容 
            bSortable : false, //当前列是否参与排序
            'sWidth' : '16px'//宽度
        }, {
            "mData" : "name" //返回的JSON项目名称 如果不须要处理的话 就不用配置fnRender() 只用这个项目就可以显示返回来的数据
        }
        ]
    });