JQuery插件之-----Datatables(一)一个简单的例子
来源:互联网 发布:ig是什么社交软件 编辑:程序博客网 时间:2024/06/06 03:09
一、简单介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
特点有:
◆分页,即时搜索和排序
◆几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
◆支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
◆各式各样的扩展: Editor, TableTools, FixedColumns ……
◆丰富多样的option和强大的API
◆支持国际化
◆超过2900+个单元测试
◆免费开源
◆更多特性请到官网查看
官网:https://www.datatables.net/
中文网:http://datatables.club/
这是官网提供的一个demo:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="css/demo.css"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="js/demo.js"></script></head><body> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Tokyo</td> <td>55</td> <td>2010/10/14</td> <td>$327,900</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$205,500</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$103,600</td> </tr> <tr> <td>Jena Gaines</td> <td>Office Manager</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$90,560</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$313,500</td> </tr> <tr> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>2010/03/17</td> <td>$385,750</td> </tr> <tr> <td>Michael Silva</td> <td>Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$198,500</td> </tr> <tr> <td>Paul Byrd</td> <td>Chief Financial Officer (CFO)</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$725,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$237,500</td> </tr> </tbody> </table><script type="text/javascript"> $(document).ready(function() { $('#example').dataTable();});</script></body></html>
运行效果为这样:
完整的demo下载地址:http://download.csdn.net/detail/u011781521/9669469
1 0
- JQuery插件之-----Datatables(一)一个简单的例子
- 关于jquery插件datatables的简单应用
- jquery插件之DataTables
- jquery插件之DataTables
- jquery插件之DataTables
- jQuery 的插件 dataTables
- JQuery表格插件之Datatables
- Jquery插件之DataTables初探
- jquery.dataTables插件使用例子详解
- jQuery的插件datatables,一个bootstrap风格的表格控件
- 【转】 jQuery的表格插件datatables学习总结(一)
- jquery表格插件Datatables的使用学习(一)
- 使用jquery flip插件的一个简单例子
- jQuery的表格插件datatables
- JQuery插件DataTables的使用
- jquery插件之DataTables 详细参数说明
- jquery之DataTables的使用
- jQuery的DataTables插件的使用方法[转]
- 线性判别分析
- 莫比乌斯反演
- XUtils3.0快速开发框架
- Android分享之时间日期转换工具类DateTime
- 第12节--支持向量机(SVM)算法在人脸识别上的应用
- JQuery插件之-----Datatables(一)一个简单的例子
- HDU5950【矩阵快速幂】
- test
- 老友记引发的血案—英语学习
- 第九周 OJ-3
- 文章分享----面向对象与面向过程的区别
- 人生的意义
- 线性判别分析(2)
- [web面试必备]深入浅出HTTP协议