DataTables是一个基于jQuery库的开源(MIT协议)表格插件,支持添加、排序、分页、搜索、过滤等功能,使用简单、广受欢迎,能够与主流前端UI整合(如bootstrap、jQuery UI等)。支持4种方式数据源,HTML(DOM)来源的数据、Ajax数据源、JavaScript的源数据、服务器端处理。拥有广泛的配置选项和丰富的API文档。

1、下载与初始化

https://github.com/DataTables/DataTables

下载完成后解压,把解压后的文件放到项目任意位置,再在页面引入jQuery、DataTablesCss、DataTablesJs三个文件。

然后在body中创建一个table元素,设置id属性,如下图所示。

最后运行以下脚本,代码及效果如下。一个简单的带有分页的表格就完成了。

language.url属性是国际化文件地址,当然也可以自定义名称,更多国际化语言请前往官方网站了解详情。

中文简体:

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese.json

中文繁体:

https://cdn.datatables.net/plug-ins/1.10.16/i18n/Chinese-traditional.json

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三个文件。

⑺垂直滚动条

⑻复杂表头

⑼自定义事件

⑽列渲染

下面隐藏了年龄列,并把年龄拼接到姓名后。

官方网站:

https://www.datatables.net/


DataTables是目前使用广泛的表格插件之一,功能强大、文档丰富、表格样式丰富能够适应各种风格的网站,高度灵活能够为HTML表格添加各种高级的交互功能。支持插件扩展使DataTables变得更加强大,它的功能远不止于此,需要了解详情的请前往官方网站。

有哪里写得不好的地方请大家提出来,请轻喷,谢谢。 同时有什么与编程相关的好东西可以推举给我,再次感谢!

前端开发:一个开源、简单易用的jQuery表格插件(DataTables)的更多相关文章

  1. jQuery框架开发一个最简单的幻灯效果

    在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果

  2. ZOOM - 简单易用的 jQuery 照片相册插件

    jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...

  3. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  4. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

  5. 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)

    EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...

  6. Hello,Cardboard!!-如何开发一个最简单的Cardboard虚拟现实应用(一)

    [原创文章,转载请注明出处,谢谢 !] 温馨提醒,本篇第一节主要介绍cardboard虚拟现实系统的组成,如果只想看如何开发的具体步骤请直接跳到第二节^_^ 前述:恕我啰嗦一下,主要照顾对cardbo ...

  7. 前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑

    对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...

  8. 网站开发中很有用的几个 jQuery 地图插件

    下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...

  9. 开发一个最简单的Cardboard虚拟现实应用(四)做一个Cardboard第一人称控制器

    [开源互助-原创文章,转载请说明出处]第三帖中已经创建了一个cardboard自带的demo应用,但它是不能移动的,玩家只能站在原地,通过头部转动来观察四周,除此之外,玩家并没有更多的手段与游戏场景进 ...

随机推荐

  1. 软件工程——四则运算py(我小学的时候怎么没用过这东西?)

    题目:实现一个自动生成小学四则运算题目的命令行程序 github地址:https://github.com/ILTHEW/wc.git 主编:黄晖朝3116005178 助手:朱健栋311600520 ...

  2. VMware下Debian开发环境部署之常见问题记录

    本文讲介绍windows作为宿主机,linux虚拟机作为编译环境的开发环境搭建中最常用到的三个问题,详细描述了解决过程. 目录: 1.网路配置: 2.分辨率设置: 3.共享网盘设置: 1.网络设置,V ...

  3. spoj1026Favorite Dice

    题意翻译 一个n面的骰子,求期望掷几次能使得每一面都被掷到. 题目描述 BuggyD loves to carry his favorite die around. Perhaps you wonde ...

  4. CloudStack 云计算平台框架

    前言 CloudStack 和OpenStack 一样都是IaaS层 开源框架,可以管理XenServer.ESXI.KVM.OVM等主流虚拟机,相对OpenStack比较简单.稳定: 二.Cloud ...

  5. crontab 每分钟、每小时、每天、每周、每月、每年执行

    每分钟执行 * * * * * 每小时执行 0 * * * * 每天执行 0 0 * * * 每周执行 0 0 * * 0 每月执行 0 0 1 * * 每年执行 0 0 1 1 * 每小时的第3和第 ...

  6. messageQ 消息队列

    之后就是对MessageQ的打开,关闭, 消息的发送和接受. MessageQ_create(),MessageQ_delete(): 对消息的创建和删除. MessageQ_open(); Mess ...

  7. apm固定翼调试方法

    APM飞控传说是大神的神器新手的噩梦,APM是个便宜又好用的飞控~刚开始给我的天行者X5按APM飞控的时候也查询搜索了很多,参数值,修改和混控和混控量的修改翻遍了资料发现咱们论坛教程比较少,所以开帖总 ...

  8. Saiku数据库迁移H2迁移到Mysql(二十二)

    Saiku数据库迁移H2迁移到Mysql Saiku默认使用H2数据库来存储saiku的用户与角色信息,我们可以根据角色来做saiku的权限控制,然后将角色分配给用户 ,该用户就会有对应的约束了! 由 ...

  9. springboot 多端口启动

    以eclipse(STS)为例, 选中项目右键Run Configurations 点击Spring Boot App,选中需要设定多端口项目,在启动参数一栏输入:-Dserver.port=7003 ...

  10. ES6 中 Promise

    在说Promise之前我们先简单说一下什么是同步异步? 同步(Sync):所谓同步,就是发出一个功能调用时,在没有得到结果之前,该调用就不返回或继续执行后续操作. 异步(Async):异步与同步相对, ...