跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例

跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例

ID:17925423

大小:208.00 KB

页数:11页

时间:2018-09-10

跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例_第1页
跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例_第2页
跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例_第3页
跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例_第4页
跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例_第5页
资源描述:

《跟我学jquery datatables表格控件及应用实例——为datatables控件提供不同形式的表格数据源的应用示例》由会员上传分享,免费在线阅读,更多相关内容在教育资源-天天文库

1、杨教授工作室精心创作的优秀程序员职业提升必读系列资料1.1跟我学JQueryDataTables表格控件及应用实例——为DataTables控件提供不同形式的表格数据源的应用示例1.1.1DataTables控件支持三种不同形式的表格数据源1、DataTables支持如下三种形式的数据源显示方式(1)DOM在DataTables对Web页面中的数据表格进行初始化后,它会根据在初始化代码中所给出的

标签的id属性自动检查HTMLWeb页面目标表格中的数据,如果HTML表格中存在有数据,则该数据将作为数据表格待显示的数据。

2、="display">

(2)采用JavaScript脚本代码定义的数组数据源1)aoColumns数组属性定义数据表格的列标题"aoColumns":[{"sTitle":"编号"},{"sTitle":"姓名"},{"sTitle":"性别"},{"sTitle":"年龄","sClass":"center"},{"sTitle":"年龄等级","sClass":"center","fnRender":function(objectData){varindexOfColumnNo=objectData.iDataColumn;varcurrentColumnData=ob

3、jectData.aData[indexOfColumnNo];if(currentColumnData=="青年"){currentColumnData="青年";}returncurrentColumnData;11杨教授工作室,版权所有,盗版必究,11/11页杨教授工作室精心创作的优秀程序员职业提升必读系列资料}},{"sTitle":"地址"},{"sTitle":"电话","sClass":"left"},{"sTitle":"福利费"}]2)aaData数组属性定义数据表格的各个数据行"aaData":[/*采用JavaScript数组的形式定义数据表格中的数据源

4、*/["221","张三","男","22","青年","北京市","01012345678","¥2,000"],["222","张三","男","22","青年","北京市","01012345678","¥2,000"],["223","张三","男","22","青年","北京市","01012345678","¥2,000"],["224","张三","男","22","青年","北京市","01012345678","¥2,000"],["225","张三","男","22","青年","北京市","01012345678","¥2,000"],["226","张三","男",

5、"22","青年","北京市","01012345678","¥2,000"],["227","张三","男","22","青年","北京市","01012345678","¥2,000"],["228","张三","男","22","青年","北京市","01012345678","¥2,000"],["229","张三","男","22","青年","北京市","01012345678","¥2,000"],["2210","张三","男","22","青年","北京市","01012345678","¥2,000"],["2211","张三","男","22","青年","北京市",

6、"01012345678","¥2,000"],["2212","张三","男","22","青年","北京市","01012345678","¥2,000"],],此时,在指定的

标签中不需要定义有任何的数据,dataTable()函数通过一个JavaScript数组对象把数据表格中的目标数据加载到DataTables控件中。(3)AjaxAjax方式和JavaScript定义的数据很类似,开发人员只需要指定要加载的Web服务器端数据的URL地址即可。DataTables控件将通过Ajax技术异步从远程Web服务器中获取JSon数据,并绑定到DataTables表格控件中。W

7、eb服务器端的数据处理是一种特殊的数据源,每页中显示的数据将通过异步请求方式(Ajax请求方式)显示出相应的数据。因此,Ajax11杨教授工作室,版权所有,盗版必究,11/11页杨教授工作室精心创作的优秀程序员职业提升必读系列资料方式的数据源可以满足Web应用系统中需要显示大量数据集的应用场合。$('#dataTableTagID').dataTable({"sAjaxSource":targetDataURL});其中

当前文档最多预览五页,下载文档查看全文

此文档下载收益归作者所有

当前文档最多预览五页,下载文档查看全文
温馨提示:
1. 部分包含数学公式或PPT动画的文件,查看预览时可能会显示错乱或异常,文件下载后无此问题,请放心下载。
2. 本文档由用户上传,版权归属用户,天天文库负责整理代发布。如果您对本文档版权有争议请及时联系客服。
3. 下载前请仔细阅读文档内容,确认文档内容符合您的需求后进行下载,若出现内容与标题不符可向本站投诉处理。
4. 下载文档时可能由于网络波动等原因无法下载或下载错误,付费完成后未能成功下载的用户请联系客服处理。