jQuery Datatable系列文章(一)用法以及属性

废话不多说上效果图

技术分享

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 Code
if ( dataSrc === ‘data‘ ) {
	return json.aaData || json[dataSrc] || json.datas;
}

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

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

技术分享View Code

最后看看简单取数方法

技术分享

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

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

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。