标签：
废话不多说上效果图
jQuery Datatable 插件可以去官网下载
先说说如何用法 戳此处看 我还是在这稍微说下 （声明一下html代码里面有各种类，是因为做项目的时候用的bootstrap，你可以不用加）
View Code在js里面如何调用呢 如下
View Code来具体解释下用法
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 ) 这个方法 得到数据后绘表格的
View Code
var data = _fnAjaxDataSrc( settings, json ); 这句就是得到数据源进行绘制表格
在看看 _fnAjaxDataSrc( settings, json ) 这个方法
View Codeif ( dataSrc === ‘data‘ ) {
return json.aaData || json[dataSrc] || json.datas;
}
上面这个就是返回data来绘制表格 其中 || json.datas 是我加的，因为我的后端取数表格转json用的datas 。
下面是C#表格实例化JSON的方法
View Code最后看看简单取数方法
年前没有写完，年后补上，有不足请指出，第一次写文章。
这里主要说说 asp.net 开发用法细节体会
标签：
原文地址：http://www.cnblogs.com/cyclone77/p/4425646.html
