DataTables 入门使用

前言简述

DataTables是一个JavaScript类库，它操作HTML表格，改变表格CSS样式，增强表格功能使其更具有交互性。DataTables依赖于JQuery类库。

入门示例

环境：DataTables 1.10.11 、JQuery 2.2.1入门代码：<！DOCTYPE html><html><head><meta charset="utf-8" /><title>DataTable Learning</title><link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" /></head><body><table id="table_id" class="display"><thead><tr><th>Column 1</th><th>Column 2</th></tr></thead><tbody><tr><td>Row 1 Data 1</td><td>Row 1 Data 2</td></tr><tr><td>Row 2 Data 1</td><td>Row 2 Data 2</td></tr></tbody></table><！-- jquery.js 要先于 jquery.dataTables.min.js 引入 --><script src="//cdn.bootcss.com/jquery/2.2.1/jquery.js" type="text/javascript"></script><script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js" type="text/javascript"></script><script type="text/javascript">$（function（） {$（"#table_id"）.DataTable（）;}）</script></body></html>

使用要点

1、首先引入DataTables必需的文件：jquery.dataTables.min.css 和 jquery.dataTables.min.js2、因为DataTable依赖于JQuery，所以在引入DataTables的JS文件之前，还要先引入JQuery文件：jquery.js3、定义普通的HTML表格：<table id="table_id">...</table>4、使用DataTable初始化表格：$（"#table_id"）.DataTable（）;5、示例表格中有一个样式：class="display"，这是DataTables的CSS文件中的样式。本文永久更新链接地址：http://www.linuxidc.com/Linux/2016-05/131141.htm