datatable例子超大表格资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

javascript

datatable

前端超大表格

4星 · 超过85%的资源需积分: 18 162 浏览量 2013-06-07 16:48:15 上传评论收藏 154KB RAR 举报

在前端开发中，数据展示是不可或缺的一部分，尤其是在处理大量数据时。`Datatable` 是一个非常流行的 JavaScript 库，专门用于创建功能丰富的交互式表格。在这个"datatable例子超大表格"中，我们将深入探讨如何使用 Datatable 处理大规模数据，并确保兼容老版本的 Internet Explorer（如 IE6、7、8、9）。 `Datatable` 提供了强大的数据处理和展示能力，支持分页、排序、过滤和快速搜索等功能。在描述中提到的 `datatable.3.0.html` 文件可能是示例代码的核心，它展示了 Datatable 的具体应用。这个版本可能针对的是 Datatable 3.0，该版本可能包含了优化大表格性能的特性，例如服务器端处理和懒加载，以减轻客户端的计算负担。 `datatabletheme.css` 文件是 Datatable 的样式表，用于定义表格的外观和布局。这包括列宽、颜色、边框、滚动条样式等，使得表格在视觉上更易读且美观。对于兼容旧版 IE 浏览器，这个 CSS 文件可能包含了特殊的 hack 或条件注释，以解决这些浏览器的样式兼容性问题。 `ltext_core.js` 和 `datatable3.0.js` 是 JavaScript 文件，它们提供了 Datatable 功能的核心逻辑。`ltext_core.js` 可能包含了一些基础的库函数或工具集，而 `datatable3.0.js` 很可能是 Datatable 库的实现。在使用 Datatable 时，我们需要正确引用这两个文件，确保所有功能可以正常运行。在老版本的 IE 中，可能需要考虑使用 polyfill 来补充一些不被支持的 ES5 以上的语法特性，以保证代码的兼容性。在实际应用中，使用 Datatable 处理超大表格时，我们需要注意以下几点： 1. **数据分页**：为了提高性能，大型数据集通常会进行分页处理，只加载当前视图所需的数据。 2. **服务器端处理**：当数据量极大时，前端处理所有数据可能导致页面加载缓慢。通过服务器端处理，前端仅请求当前需要的数据，服务器则负责筛选和排序。 3. **延迟加载**（Lazy Loading）：只有在用户滚动到可视区域时才加载额外的数据行，这可以显著减少初始加载时间。 4. **列宽调整**：Datatable 允许用户动态调整列宽，以适应不同大小的数据和屏幕。 5. **搜索和过滤**：提供搜索框和列过滤功能，让用户能快速找到所需信息。 6. **排序**：用户可对任意列进行升序或降序排序，Datatable 内置了排序算法。 7. **响应式设计**：确保在不同设备和屏幕尺寸上，表格都能良好显示。 8. **国际化**：Datatable 支持多语言，方便不同地区的用户使用。 9. **自定义扩展**：Datatable 提供了丰富的插件和扩展，可以根据需求定制各种功能。在开发过程中，要充分测试各个功能，确保在不同浏览器中表现一致。对于老旧的 IE 浏览器，要特别关注其特定的兼容性问题。此外，优化代码，减少不必要的网络请求，也是提升用户体验的关键。

资源推荐

资源详情

资源评论

收起资源包目录

table.rar （4个子文件）

datatable.3.0.html 447KB

datatabletheme.css 67KB

datatable3.0.js 131KB

ltext_core.js 262KB

<html> <head> <title></title> <script> var _ROOT_PATH_=''; </script> <script src="./ltext_core.js"></script> <script src="./datatable3.0.js"></script> <style type="text/css">  </style> <link rel="stylesheet" type="text/css" href="./datatabletheme.css" /> </head> <body> <div id="table_eare" style="width:1000px;height:500px;margin:5px" class='divtable div1'></div> </body> </html> <script> var datas=[["NCKZCS000001","101301","04","基本工资"], ["NCKZCS000002","101301","04","福利费"], ["NCKZCS000003","102301","04","福利费"], ["NCKZCS000004","206313","04","邮电费"], ["NCKZCS000005","383302","04","印刷费"], ["NCKZCS000006","383302","04","水费"], ["NCKZCS000007","383302","04","电费"], ["NCKZCS000008","383302","04","邮电费"], ["NCKZCS000009","383302","04","交通费"], ["NCKZCS000010","383302","04","交通费-车辆加油3吨"], ["NCKZCS000011","383302","04","差旅费"], ["NCKZCS000012","383302","04","会议费"], ["NCKZCS000013","383302","04","培训费"], ["NCKZCS000014","383302","04","招待费"], ["NCKZCS000015","206313","04","物业管理费"], ["NCKZCS000016","383302","04","劳务费"], ["NCKZCS000017","383302","04","其他商品和服务支出"], ["NCKZCS000018","384601","04","基本工资"], ["NCKZCS000019","384601","04","保留补贴"], ["NCKZCS000020","384601","04","国家出台岗位津贴"], ["NCKZCS000021","384601","04","国家出台其他津补贴"], ["NCKZCS000022","384601","04","地方出台的津贴补贴（机关）"], ["NCKZCS000023","384601","04","年终一次性奖金（机关）"], ["NCKZCS000024","384601","04","失业保险"], ["NCKZCS000025","384601","04","基本医疗保险"], ["NCKZCS000026","206313","04","交通费"], ["NCKZCS000027","384601","04","公务员医疗补助"], ["NCKZCS000028","384601","04","地方出台的津补贴（事业）"], ["NCKZCS000029","384601","04","年终一次性奖金（事业）"], ["NCKZCS000030","384601","04","工会经费"], ["NCKZCS000031","384601","04","福利费"], ["NCKZCS000032","384601","04","基本离休费"], ["NCKZCS000033","384601","04","地方出台的津贴补贴（离休）"], ["NCKZCS000034","384601","04","保留补贴（离休）"], ["NCKZCS000035","384601","04","国家出台其他津补贴（离休）"], ["NCKZCS000036","384601","04","基本退休费"], ["NCKZCS000037","206313","04","差旅费"], ["NCKZCS000038","384601","04","地方出台的津贴补贴（退休）"], ["NCKZCS000039","384601","04","保留补贴（退休）"], ["NCKZCS000040","384601","04","国家出台其他津补贴（退休）"], ["NCKZCS000041","384601","04","独生子女父母奖励"], ["NCKZCS000042","384601","04","住房公积金"], ["NCKZCS000043","384601","04","购房补贴"], ["NCKZCS000044","384601","04","办公费"], ["NCKZCS000045","384601","04","办公费-纸张1批"], ["NCKZCS000046","384601","04","水费"], ["NCKZCS000047","384601","04","电费"], ["NCKZCS000048","206313","04","维修(护)费"], ["NCKZCS000049","384601","04","邮电费"], ["NCKZCS000050","384601","04","交通费"], ["NCKZCS000051","384601","04","交通费-车辆维修5辆"], ["NCKZCS000052","384601","04","交通费-车辆加油5辆"], ["NCKZCS000053","384601","04","交通费-车辆保险5辆"], ["NCKZCS000054","384601","04","差旅费"], ["NCKZCS000055","384601","04","维修(护)费"], ["NCKZCS000056","384601","04","会议费"], ["NCKZCS000057","384601","04","培训费"], ["NCKZCS000058","384601","04","招待费"], ["NCKZCS000059","206313","04","会议费"], ["NCKZCS000060","384601","04","劳务费"], ["NCKZCS000061","384601","04","离退休公用经费"], ["NCKZCS000062","384601","04","机动经费"], ["NCKZCS000063","384601","04","其他商品和服务支出"], ["NCKZCS000064","384601","04","办公设备购置-家具1批"], ["NCKZCS000065","390301","04","基本工资"], ["NCKZCS000066","390301","04","基本工资"], ["NCKZCS000067","390301","04","保留补贴"], ["NCKZCS000068","390301","04","国家出台其他津补贴"], ["NCKZCS000069","390301","04","国家出台其他津补贴"], ["NCKZCS000070","206313","04","培训费"], ["NCKZCS000071","390301","04","地方出台的津贴补贴（机关）"], ["NCKZCS000072","390301","04","年终一次性奖金（机关）"], ["NCKZCS000073","390301","04","失业保险"], ["NCKZCS000074","390301","04","基本医疗保险"], ["NCKZCS000075","390301","04","基本医疗保险"], ["NCKZCS000076","390301","04","公务员医疗补助"], ["NCKZCS000077","390301","04","地方出台的津补贴（事业）"], ["NCKZCS000078","390301","04","年终一次性奖金（事业）"], ["NCKZCS000079","390301","04","工会经费"], ["NCKZCS000080","390301","04","福利费"], ["NCKZCS000081","206313","04","招待费"], ["NCKZCS000082","390301","04","聘用人员经费"], ["NCKZCS000083","390301","04","基本离休费"], ["NCKZCS000084","390301","04","地方出台的津贴补贴（离休）"], ["NCKZCS000085","390301","04","保留补贴（离休）"], ["NCKZCS000086","390301","04","国家出台其他津补贴（离休）"], ["NCKZCS000087","390301","04","基本退休费"], ["NCKZCS000088","390301","04","地方出台的津贴补贴（退休）"], ["NCKZCS000089","390301","04","保留补贴（退休）"], ["NCKZCS000090","390301","04","国家出台其他津补贴（退休）"], ["NCKZCS000091","390301","04","独生子女父母奖励"], ["NCKZCS000092","206313","04","劳务费"], ["NCKZCS000093","390301","04","住房公积金"], ["NCKZCS000094","390301","04","办公费"], ["NCKZCS000095","390301","04","办公费-纸张25箱"], ["NCKZCS000096","390301","04","印刷费"], ["NCKZCS000097","390301","04","水费"], ["NCKZCS000098","390301","04","电费"], ["NCKZCS000099","390301","04","邮电费"], ["NCKZCS000100","390301","04","交通费"], ["NCKZCS000101","390301","04","交通费-车辆维修5次"], ["NCKZCS000102","390301","04","交通费-车辆加油7000升"], ["NCKZCS000103","206313","04","离退休公用经费"], ["NCKZCS000104","390301","04","交通费"], ["NCKZCS000105","390301","04","差旅费"], ["NCKZCS000106","390301","04","差旅费"], ["NCKZCS000107","390301","04","维修(护)费"], ["NCKZCS000108","390301","04","租赁费"], ["NCKZCS000109","390301","04","会议费-会议3次"], ["NCKZCS000110","390301","04","培训费"], ["NCKZCS000111","390301","04","招待费"], ["NCKZCS000112","390301","04","劳务费"], ["NCKZCS000113","390301","04","离退休公用经费"], ["NCKZCS000114","102301","04","基本离休费"], ["NCKZCS000115","206313","04","其他商品和服务支出"], ["NCKZCS000116","390301","04","省领导公用经费"], ["NCKZCS000117","390301","04","机动经费"], ["NCKZCS000118","390301","04","其他商品和服务支出"], ["NCKZCS000119","390301","04","办公设备购置-计算机3台"], ["NCKZCS000120","390301","04","办公设备购置-传真机2台"], ["NCKZCS000121","390301","04","办公设备购置-打印机3台"], ["NCKZCS000122","391301","04","基本工资"], ["NCKZCS000123","391301","04","基本工资"], ["NCKZCS000124","391301","04","保留补贴"], ["NCKZCS000125","391301","04","保留补贴"], ["NCKZCS000126","206314","04","基本工资"], ["NCKZCS000127","391301","04","国家出台岗位津贴"], ["NCKZCS000128","391301","04","国家出台其他津补贴"], ["NCKZCS000129","391301","04","地方出台的津贴补贴（机关）"], ["NCKZCS000130","391301","04","年终一次性奖金（机关）"], ["NCKZCS000131","391301","04","失业保险"], ["NCKZCS000132","391301","04","基本医疗保险"], ["NCKZCS000133","391301","04","公务员医疗补助"], ["NCKZCS000134","391301","04","地方出台的津补贴（事业）"], ["NCKZCS000135","391301","04","年终一次性奖金（事业）"], ["NCKZCS000136","391301","04","工会经费"], ["NCKZCS000137","206314","04","保留补贴"], ["NCKZCS000138","391301","04","工会经费"], ["NCKZCS000139","391301","04","福利费"], ["NCKZCS000140","391301","04","福利费"], ["NCKZCS000141","391301","04","聘用人员经费"], ["NCKZCS000142","391301","04","基本离休费"], ["NCKZCS000143","391301","04","地方出台的津贴补贴（离休）"], ["NCKZCS000144","391301","04","保留补贴（离休）"], ["NCKZCS000145","391301","04","国家出台其他津补贴（离休）"], ["NCKZCS000146","391301","04","基本退休费"], ["NCKZCS000147","391301","04","地方出台的津贴补贴（退休）"], ["NCKZCS000148","206314","04","国家出台岗位津贴"], ["NCKZCS000149","391301","04","保留补贴（退休）"], ["NCKZCS000150","391301","04","国家出台其他津补贴（退休）"], ["NCKZCS000151","391301","04","独生子女父母奖励"], ["NCKZCS000152","391301","04","独生子女父母奖励

评论收藏

内容反馈