jquery.dataTable.js 使用详解 一、基础配置

    dataTable用了很久，今天在此总结一下使用方法以及常用属性的解释。

    要试用dataTable，首先你得有个table，html代码如下：

 

 

    下面是dataTable配置方式以及参数详解：

/*
 * 通过jquery  ID筛选器绑定dataTable插件
 */
$("#mainTable").dataTable({
	/*
	 * sErrMode
	 * 错误信息显示方式
	 * 分别为alert和throw，默认为alert
	 */
	"sErrMode" : "throw",
	/*
	 * sDom
	 * 布局方式，可以自定义，布局项，也可以调换布局顺序
	 * 详解：
	 * <> 表示一个闭合的div 例如：<> = 

	 * <"类名称"> 表示一个class="类名称"的闭合的div 例如： <"rad"> = 

	 * l  每行显示的记录数
	 * f  搜索框
	 * r  加载时的进度条
	 * t  表格，即实际的
	 * p  分页条
	 * i  数据信息，  每页显示x条数据、第x条-第x条、供x条数据，默认是英文
	 */
	"sDom" : 'rt<"clear">',
	/*
	 * sServerMethod
	 * 数据获取方式
	 * POST/GET，默认是GET
	 */
	"sServerMethod" : "POST",
	/*
	 * bDeferRender
	 * 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。
	 * 默认为false
	 */
	"bDeferRender" : true,
	/*
	 * sScrollXInner
	 * 表格宽度
	 */
	"sScrollXInner" : "100%",
	/*
	 * bScrollCollapse
	 * 当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
	 */
	"bScrollCollapse" : false,
	/*
	 * bPaginate
	 * 是否开启分页,默认是true
	 */
	"bPaginate" : true,
	/*
	 * bLengthChange
	 * 是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持
	 * 默认为true
	 */
	"bLengthChange" : false,
	/*
	 * bFilter
	 * 是否启用内置搜索功能：可以跨列搜索。
	 * 默认为true
	 */
	"bFilter" : true,
	/*
	 * bSort
	 * 是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数
	 */
	"bSort" : true,
	/*
	 * bInfo
	 * 是否显示表格相关信息：例如翻页信息等。
	 * 默认值：True 
	 */
	"bInfo" : true,
	/*
	 * bAutoWidth
	 * 是否启用自动适应列宽
	 * 默认值：True
	 */
	"bAutoWidth" : false,
	/*
	 * bStateSave
	 * 是否开启cookies保存当前状态信息
 	 * 默认值：false
	 */
	"bStateSave" : false,
	/*
	 * sPaginationType
	 * 分页方式 
	 * dataTable提供full_numbers和two_button，默认是two_button
 	 * 这里采用的是自定义分页myPagination，详细参见jquery.dataTable.custom.js
	 */
	"sPaginationType" : "myPagination",
	/*
	 * bProcessing
	 * 是否显示加载时进度条，默认为false
	 */
	"bProcessing" : true,
	/*
	 * iDisplayLength
	 * 默认每页显示多少条记录
	 */
	"iDisplayLength" : 10,
	/*
	 * aLengthMenu
	 * 允许用户选择每页显示多少条记录
	 */
	"aLengthMenu" : [ [ 50, 100, -1 ], [ "50", "100", "所有" ] ],
	/*
	 * oLanguage
	 * 语言设置，dataTable默认为英文，可再此设置中文显示
	 * 注意：_MENU_、_START_、_END_、_TOTAL_、_MAX_等通配
	 */
	"oLanguage" : {
		"sLengthMenu" : "每页显示 _MENU_ 条记录",
		"sZeroRecords" : "对不起，没有匹配的数据",
		"sInfo" : "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
		"sInfoEmpty" : "没有匹配的数据",
		"sInfoFiltered" : "(数据表中共 _MAX_ 条记录)",
		"sProcessing" : "正在加载中...",
		"sSearch" : "全文搜索：",
		"oPaginate" : {
			"sFirst" : "第一页",
			"sPrevious" : " 上一页 ",
			"sNext" : " 下一页 ",
			"sLast" : " 最后一页 "
		}
	},
	/*
	 * aoColumns
	 * 数据列
	 * mData  数据源属性
	 * sTitle 列头
	 * bSortable 是否参与排序
	 * mRender 自定义显示内容，可返回html、字符串
	 */
	"aoColumns" : [{
		"mData" : 'id',
		"sTitle" : "ID",
		"bSortable" : true
	},{
		"mData" : 'name',
		"sTitle" : "Name",
		"bSortable" : true
	},{
		"mData" : 'age',
		"sTitle" : "Age",
		"bSortable" : true,
		"mRender" : function(data, type, row) {
			return data;
		}
	},{
		"mData" : 'work',
		"sTitle" : "Work",
		"bSortable" : true
	}],
	/*
	 * fnInitComplete
	 * 表格初始化完成后的回调
	 */
	"fnInitComplete" : function(){
		
	},
	/*
	 * fnDrawCallback
	 * 表格绘制完成后的回调
	 */
	"fnDrawCallback" : function(){
		
	},
	/*
	 * 数据源url，ajax请求路径
	 */
	"sAjaxSource" : "xx/xx/xxx/xxx/xxx"
});

    dataTable是靠ajax请求获取数据的，数据格式为json，json数据必须归属与aaData属性：

    

{
    "aaData": [
        {
            "id": 1,
            "name": "rozer",
            "age": "20",
            "work": "java"
        },
        {
            "id": 2,
            "name": "bick",
            "age": "20",
            "work": "python"
        }
    ]
}

 

    具体的配置已经在上述代码里面描述过，dataTable还有其他试用技巧、自定义样式、api等，将在后续文章中写到。

 

    最后，诚心诚意，附上代码一套，另含dataTable自定义样式一份，以作参考。

 

    注：代码要运行在nginx或apatch上，测试时，将以下属性值修改为你的ajax请求url，其他配置修改，请参见代码注释。

例如：	"sAjaxSource" : "static/js/test-data.js"