datatable导出json、text、excel、word等格式资源-CSDN文库

共6个文件

js：4个

html：1个

css：1个

需积分: 20 103 浏览量 2016-08-19 17:54:15 上传评论 1 收藏 95KB RAR 举报

在IT行业中，`DataTable` 是一个广泛使用的组件，特别是在Web应用程序开发中，它允许开发者以表格形式展示数据，并提供各种操作功能，如排序、过滤、分页等。本资源主要涉及的是如何在`DataTable`中实现动态加载数据，并且提供导出数据到不同格式的功能，包括JSON、文本、Excel和Word。 1. **动态加载数据**：动态加载，也称为懒加载或按需加载，是一种优化网页性能的技术。在`DataTable`中，数据不是一次性全部加载到页面上，而是根据用户的滚动或分页行为，只请求和显示当前需要的数据。这样可以显著减少页面初始化时的数据量，提高用户体验。实现这一功能通常需要结合服务器端接口，通过Ajax请求获取数据。 2. **导出为JSON**： JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。在`DataTable`中导出数据为JSON，意味着将表格中的所有数据转换成JSON字符串，方便进一步的存储或处理。这通常涉及到遍历表格数据，将每一行转化为键值对的JavaScript对象，然后组成JSON数组。 3. **导出为文本**：文本导出简单直观，通常是将数据以制表符或逗号分隔的形式保存。在`DataTable`中，这个过程可能涉及将每列数据拼接成字符串，然后换行写入新的行。对于有特殊字符或需要转义的情况，需要注意处理。 4. **导出为Excel**： Excel是Microsoft Office中的电子表格应用，广泛用于数据管理和分析。导出`DataTable`到Excel，通常需要用到第三方库，如`js-xlsx`或` SheetJS`。这些库能将数据转换为符合Excel格式的二进制流，然后可以被下载或者发送到服务器进行进一步处理。Excel导出通常会包含列名、数据以及可能的样式和格式设置。 5. **导出为Word**： Word是文字处理软件，用于创建文档和报告。在`DataTable`中导出到Word可能需要更复杂的处理，因为表格结构需要转化为Word的表格元素。这通常需要借助库如`docx`来创建Word文档，并将`DataTable`的结构和数据填充进去。 6. **实现方式**：这些导出功能的实现通常需要JavaScript库的配合，例如`datatables.net`，该库提供了丰富的API和插件来支持这些操作。用户可能还需要自定义函数来处理数据格式化和导出格式的转换。在实际应用中，还需要考虑兼容性问题，确保在不同的浏览器和设备上都能正常工作。 7. **示例代码**：在`demo`文件中，可能包含了实现这些功能的示例代码，包括HTML、CSS和JavaScript部分。通过查看和学习这个`demo`，你可以了解如何集成和配置`DataTable`，以及如何添加导出功能。 `DataTable`的动态加载和多种格式导出是提高交互性和数据处理能力的重要手段。理解并掌握这些技术，对于提升Web应用的用户体验和功能完整性具有重要意义。在实际开发中，要根据具体需求灵活运用，不断优化和调整，以达到最佳效果。

资源推荐

资源详情

资源评论

收起资源包目录

demo.rar （6个子文件）

demo

tableExport.js 36KB

bootstrap.min.css 109KB

index.html 4KB

jquery.2.1.1.min.js 82KB

jquery.dataTables.min.js 78KB

bootstrap.min.js 35KB

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>datatable export</title> <link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery.2.1.1.min.js"></script> <script src="bootstrap.min.js"></script> <script src="jquery.dataTables.min.js"></script>  </head> <body> <h1>datatable导出excel表格</h1> <h3>datatable静态数据</h3> <table class="table table-hover" id="table2" width="200px"> <thead> <tr> <th>标题一</th> <th>标题二</th> <th>标题三</th> </tr> </thead> <tbody> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> <tr> <td><a href="http://w3cboy.com" target="_blank">文字</a></td> <td>咨询</td> <td>测试</td> </tr> </tbody> </table> <h3>datatable动态数据</h3> <table class="table table-striped table-bordered table-hover" id="table1" > <thead> </thead> <tbody> </tbody> </table> <div id="export"> <button class="btn btn-info"> <a data-type="json" href="javascript:;">导出json</a> </button> <button class="btn btn-info"> <a data-type="txt" href="javascript:;">导出txt</a> </button> <button class="btn btn-info"> <a data-type="csv" href="javascript:;">导出csv</a> </button> <button class="btn btn-info"> <a data-type="xml" href="javascript:;">导出xml</a> </button> <button class="btn btn-info"> <a data-type="xls" href="javascript:;">导出excel</a> </button> <button class="btn btn-info"> <a data-type="doc" href="javascript:;">导出word</a> </button> <button class="btn btn-info"> <a data-type="image" href="javascript:;">导出图片</a> </button> <button class="btn btn-info"> <a data-type="pdf" href="javascript:;">导出pdf</a> </button> </div> <script src="tableExport.js"></script> <script> $(function(){ $("#table1").dataTable({ "destroy":true, "bPaginate":false, "bFilter":false, /*"oLanguage":{ "sInfo":"显示 _START_ 至 _END_ 条    本页共 _TOTAL_ 条", "sZeroRecords":"没有数据", }, */ "aoColumns":[ {"data":"name","sTitle":"姓名"}, {"data":"sex","sTitle":"性别"}, {"data":"age","sTitle":"年龄"}, {"data":"grade","sTitle":"成绩"}, /* {"data":" ","sTitle":"操作","bSortable":false, "mRender":function(data,type,full){ return "<div class='hidden-sm hidden-xs action-buttons'><a id='detail' class='blue' title='查看详情'><i style='cursor:pointer' class='ace-icon fa fa-info-circle bigger-120 blue'></i></a>  <a href='#modal-table-editShop' data-toggle='modal' id='edit' class='blue' title='修改'><i class='ace-icon fa fa-edit bigger-130'></i></a></div>"; }}, */ ], "aaData":[ {"name":"张三","sex":"男","age":"19","grade":"100"}, {"name":"张三","sex":"男","age":"19","grade":"100"}, {"name":"张三","sex":"男","age":"19","grade":"100"}, {"name":"张三","sex":"男","age":"19","grade":"100"}, {"name":"张三","sex":"男","age":"19","grade":"100"}, {"name":"李四","sex":"男","age":"21","grade":"99"}, {"name":"王丽","sex":"1","age":"22","grade":"45"}, ], }); }) var $exportLink = document.getElementById('export'); $exportLink.addEventListener('click', function(e){ e.preventDefault(); if(e.target.nodeName === "A"){ tableExport('table1', 'table', e.target.getAttribute('data-type')); } }, false); </script> </body> </html>

评论收藏

内容反馈