jQuery Datatable系列文章（一）用法以及属性

废话不多说上效果图

jQuery Datatable 插件可以去官网下载

先说说如何用法 戳此处看 我还是在这稍微说下 （声明一下html代码里面有各种类，是因为做项目的时候用的bootstrap，你可以不用加）

在js里面如何调用呢 如下

来具体解释下用法

1 if (typeof gp.dataTable != ‘undefined‘ && gp.dataTable != null) { //为了避免多次初始化datatable()
2
3         gp.dataTable.fnClearTable(0); //清空数据
4         gp.dataTable.fnDraw(); //重新加载数据
5         //fvTable.fnAdjustColumnSizing(); //重新判断列宽度，实际执行并没有效果　
6         return;
7     }

ShowTable()方法里面开头这个if条件是判断 表格是否存在如果存在就清空数据重新加载，效果就是刷新表格

那些属性就不说了，戳此处看 这里讲的很清楚

主要说说这些方法

"fnServerData": function (sSource, aoData, fnCallback) {}

动态绑定数据方法 如上面代码 用了ajax  返回成功后的值会传入fnCallback

来看看jq Datatable的源码

 1     /**
 2      * Update the table using an Ajax call
 3      *  @param {object} settings dataTables settings object
 4      *  @returns {boolean} Block the table drawing or not
 5      *  @memberof DataTable#oApi
 6      */
 7     function _fnAjaxUpdate( settings )
 8     {
 9         if ( settings.bAjaxDataGet ) {
10             settings.iDraw++;
11             _fnProcessingDisplay( settings, true );
12
13             _fnBuildAjax(
14                 settings,
15                 _fnAjaxParameters( settings ),
16                 function(json) {
17                     _fnAjaxUpdateDraw( settings, json );
18                 }
19             );
20
21             return false;
22         }
23         return true;
24     }

英文不是很好就不翻译了明白意思就行，这里根据ajax创建表格 一步一步往下看

在看看_fnAjaxUpdateDraw( settings, json ) 这个方法 得到数据后绘表格的

var data = _fnAjaxDataSrc( settings, json ); 这句就是得到数据源进行绘制表格在看看 _fnAjaxDataSrc( settings, json ) 这个方法

if ( dataSrc === ‘data‘ ) {
	return json.aaData || json[dataSrc] || json.datas;
}

上面这个就是返回data来绘制表格 其中 || json.datas 是我加的，因为我的后端取数表格转json用的datas 。

下面是C#表格实例化JSON的方法

最后看看简单取数方法

年前没有写完，年后补上，有不足请指出，第一次写文章。

这里主要说说 asp.net 开发用法细节体会