https://www.hangge.com/blog/cache/detail_1978.html
一、基本介绍
1,什么是DataTables?
Datatables 是一款开源的 jQuery 表格插件。它具有高度灵活的特性,可以对任何 HTML 表格添加高级的交互功能。
2,功能特点
- 自带分页,即时搜索和排序功能
- 几乎支持任何数据源,比如:DOM、javascript、Ajax 和 服务器处理
- 支持不同主题:DataTables、jQuery UI、Bootstrap、Foundation
- 支持各种扩展,包括编辑器, 表格工具, 固定列等等
- 丰富多样的选项配置和强大的 API
- 支持国际化
- 超过 2900+ 个单元测试
- 免费开源(MIT license)
3,安装配置
DataTables 配置很简单,只需要引入两个文件:DataTables 本身的脚本文件以及它的 css 样式文件。(当然作为 jQuery 插件,也别忘了引入 jQuery)。
1 2 3 | < script src = "js/jquery-3.1.1.js" type = "text/javascript" ></ script > < script src = "media/js/jquery.dataTables.js" type = "text/javascript" ></ script > < link rel = "stylesheet" href = "media/css/jquery.dataTables.css" type = "text/css" /> |
二、使用 DOM 元素作为表格数据
1,样例代码
这里我们直接调用 table 的 DataTable() 方法即可初始化表格。
注意:由于没有指定 data、ajax 选项,DataTable 会将该 table 的 html 标签上内容转换成对应的数据(Array 数据形式)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | <!DOCTYPE html> < html > < head > < meta charset = "utf-8" > < title ></ title > < script src = "js/jquery-3.1.1.js" type = "text/javascript" ></ script > < script src = "media/js/jquery.dataTables.js" type = "text/javascript" ></ script > < link rel = "stylesheet" href = "media/css/jquery.dataTables.css" type = "text/css" /> < script type = "text/javascript" > $(document).ready(function() { $('#myTable').DataTable(); }); </ script > </ head > < body > < table id = "myTable" > < thead > < tr > < th >编号</ th > < th >姓名</ th > < th >出生日期</ th > </ tr > </ thead > < tbody > < tr > < td >011</ td > < td >张三</ td > < td >2011-11-23</ td > </ tr > < tr > < td >002</ td > < td >李四</ td > < td >2001-11-23</ td > </ tr > < tr > < td >003</ td > < td >刘士元</ td > < td >2021-08-21</ td > </ tr > < tr > < td >004</ td > < td >李波斯</ td > < td >2011-11-03</ td > </ tr > < tr > < td >005</ td > < td >赵军</ td > < td >2002-01-01</ td > </ tr > < tr > < td >006</ td > < td >李子明</ td > < td >2006-08-21</ td > </ tr > < tr > < td >007</ td > < td >李小明</ td > < td >2011-04-13</ td > </ tr > < tr > < td >008</ td > < td >李大明</ td > < td >2010-10-20</ td > </ tr > < tr > < td >009</ td > < td >周生生</ td > < td >2011-01-01</ td > </ tr > < tr > < td >010</ td > < td >唐不甜</ td > < td >2008-08-04</ td > </ tr > < tr > < td >001</ td > < td >马成功</ td > < td >2001-06-05</ td > </ tr > </ tbody > </ table > </ body > </ html > |
2,效果图
可看到表格自动添加了一些简单样式,且数据被自动分页。同时表格上下方会自动生成一些操作按钮:
- 左上方的下拉框可以选择每页显示的数量。
- 右上方可输入内容进行数据的实时筛选。
- 点击列头可以按该列数据进行排序(默认是按第一列数据升序排列)
- 表格下方则是页脚信息,以及翻页按钮。
三、使用 JS 设置表格数据
我们还可以通过 data 配置来指定数据源。
1,条目数据类型为数组的情况
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title></title> <script src= "js/jquery-3.1.1.js" type= "text/javascript" ></script> <script src= "media/js/jquery.dataTables.js" type= "text/javascript" ></script> <link rel= "stylesheet" href= "media/css/jquery.dataTables.css" type= "text/css" /> <script type= "text/javascript" > $(document).ready( function () { var data = [ [ "011" , "张三" , "2011-11-23" ], [ "002" , "李四" , "2001-11-23" ], [ "003" , "刘士元" , "2021-08-21" ] ]; $( '#myTable' ).DataTable({ data: data }); }); </script> </head> <body> <table id= "myTable" > <thead> <tr> <th>编号</th> <th>姓名</th> <th>出生日期</th> </tr> </thead> </table> </body> </html> |
2,条目为对象的情况
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | var data = [ { "id" : "001" , "name" : "张三" , "birthday" : "2015-12-31" }, { "id" : "002" , "name" : "李四" , "birthday" : "2001-11-31" }, { "id" : "003" , "name" : "王五" , "birthday" : "2011-12-31" } ]; $( '#myTable' ).dataTable({ data: data, columns: [ { data: 'id' }, { data: 'name' }, { data: 'birthday' } ] }); |
3,条目为自定义实例的情况
这个本质和上面是一样的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | function User(id, name, birthday) { this .id = id; this .name = name; this .birthday = birthday; }; $( '#myTable' ).dataTable({ data: [ new User( "001" , "张三" , "2014-01-21" ), new User( "002" , "李四" , "2001-01-21" ), new User( "003" , "王五" , "2013-01-21" ) ], columns: [ { data: 'id' }, { data: 'name' }, { data: 'birthday' } ] }); |
附:刷新数据(重新加载数据)
如果想要手动重新设置全部数据,可以先清空表格,再重新设置。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | //需要设置的新数据 var newData = [ [ "110" , "余得水" , "2000-11-23" ], [ "111" , "曹得旺" , "2001-11-23" ], ]; //重新设置数据 var table = $( '#myTable' ).DataTable(); table.clear(); table.rows.add(newData).draw(); |
原文出自:www.hangge.com 转载请保留原文链接:https://www.hangge.com/blog/cache/detail_1978.html