前言:
而今我们对“jquery固定表格表头”都比较注意,我们都需要知道一些“jquery固定表格表头”的相关资讯。那么小编同时在网络上汇集了一些有关“jquery固定表格表头””的相关资讯,希望各位老铁们能喜欢,我们快快来了解一下吧!DataTables是一个基于jQuery库的开源(MIT协议)表格插件,支持添加、排序、分页、搜索、过滤等功能,使用简单、广受欢迎,能够与主流前端UI整合(如bootstrap、jQuery UI等)。支持4种方式数据源,HTML(DOM)来源的数据、Ajax数据源、JavaScript的源数据、服务器端处理。拥有广泛的配置选项和丰富的API文档。
1、下载与初始化
下载完成后解压,把解压后的文件放到项目任意位置,再在页面引入jQuery、DataTablesCss、DataTablesJs三个文件。
然后在body中创建一个table元素,设置id属性,如下图所示。
最后运行以下脚本,代码及效果如下。一个简单的带有分页的表格就完成了。
language.url属性是国际化文件地址,当然也可以自定义名称,更多国际化语言请前往官方网站了解详情。
中文简体:
中文繁体:
2、功能展示
⑴组件定位
datatables默认会打开部分组件,如分页按钮、表格信息、搜索框等,这些组件支持自定义布局。
⑵不同分页样式
numbers - 只有只有数字按钮
simple - 只有上一页、下一页两个按钮
simple_numbers - 除了上一页、下一页两个按钮还有页数按钮,Datatables默认是这个
full - 有四个按钮首页、上一页、下一页、末页
full_numbers - 除首页、上一页、下一页、末页四个按钮还有页数按钮
first_last_numbers - 除首页、末页两个按钮还有页数按钮
⑶多列排序
⑷格式化数字显示格式
通过language.decimal选项可以配置数字的友好显示,比如1200450,显示为12.004,50
⑸隐藏列
索引从1开始,隐藏了2、3列的name和age。
⑹bootstrap样式
需要额外引入dataTables.bootstrap.min.js、bootstrap.min.css、dataTables.bootstrap.min.css三个文件。
⑺垂直滚动条
⑻复杂表头
⑼自定义事件
⑽列渲染
下面隐藏了年龄列,并把年龄拼接到姓名后。
官方网站:
DataTables是目前使用广泛的表格插件之一,功能强大、文档丰富、表格样式丰富能够适应各种风格的网站,高度灵活能够为HTML表格添加各种高级的交互功能。支持插件扩展使DataTables变得更加强大,它的功能远不止于此,需要了解详情的请前往官方网站。
有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!
标签: #jquery固定表格表头