前端开发:一个开源、简单易用的jQuery表格插件(DataTables)
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)的更多相关文章
- jQuery框架开发一个最简单的幻灯效果
在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果
- ZOOM - 简单易用的 jQuery 照片相册插件
jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入一些让人惊叹的图片切换效果.ZOOM 是一款全屏效果的 jQuery 图片切换展示插件,支持键盘前后按键切换,支持 ...
- Table Dragger - 简单的 JS 拖放排序表格插件
Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
- 设计与开发一款简单易用的Web报表工具(支持常用关系数据及hadoop、hbase等)
EasyReport是一个简单易用的Web报表工具(支持Hadoop,HBase及各种关系型数据库),它的主要功能是把SQL语句查询出的行列结构转换成HTML表格(Table),并支持表格的跨行(Ro ...
- Hello,Cardboard!!-如何开发一个最简单的Cardboard虚拟现实应用(一)
[原创文章,转载请注明出处,谢谢 !] 温馨提醒,本篇第一节主要介绍cardboard虚拟现实系统的组成,如果只想看如何开发的具体步骤请直接跳到第二节^_^ 前述:恕我啰嗦一下,主要照顾对cardbo ...
- 前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑
对于前端开发的园友来说有可能IDE工具有很多,层次不穷,还有每个人的喜好及习惯也不一样,因为我是一名后端开发的.Net程序员,但是大家都知道,现在都提倡什么全栈工程师,所以也得会点前端开发,所以我对于 ...
- 网站开发中很有用的几个 jQuery 地图插件
下面提到的 jQuery 地图插件不仅仅是提供一个简便的方式来安装一个地图,如果你想在它们之间选择一个放到你的网站上,那么它们还有更多的额外选项来提供更多更全面的功能.大部分的 jQuery 地图插件 ...
- 开发一个最简单的Cardboard虚拟现实应用(四)做一个Cardboard第一人称控制器
[开源互助-原创文章,转载请说明出处]第三帖中已经创建了一个cardboard自带的demo应用,但它是不能移动的,玩家只能站在原地,通过头部转动来观察四周,除此之外,玩家并没有更多的手段与游戏场景进 ...
随机推荐
- ssh-keygen公钥进行免登
A服务器地址:192.168.1.200,下面简称A B服务器地址:192.168.1.201,下面简称B 1.在A生成密钥对ssh-keygen -t rsa -P ""1执行上 ...
- package.json和npm install、cnpm install 的問題
問題:最近使用cnpm安装项目依赖后,运行项目出现样式错乱问题. 描述:最近项目开发,需求参插了很多个版本,所以在前端项目的主干上拉好几套分支代码.拉的分支并不会把node_modules也拉过去,所 ...
- Oracle通用维、父子维相互转换
所谓通用维即维度层级1.2.3均作为字段展示为列,父子维即维度id+父级维度+维度层级字段 通用维 lvl_id1 lvl_name1 lvl_id2 lvl_name2 lvl_id3 lvl_na ...
- lr12脚本参数化
1.注册.登录.获取商品列表lr脚本 Action() { lr_save_string("192.168.46.129:8080","IP"); ...
- C#中自定义高精度Timer定时器的实例教程
Timer 用于以用户定义的事件间隔触发事件.Windows 计时器是为单线程环境设计的,其中,UI 线程用于执行处理.它要求用户代码有一个可用的 UI 消息泵,而且总是在同一个线程中操作,或者将调用 ...
- vue使用动态渲染v-model输入框无法输入内容
最近使用ElementUI框架,在动态渲染表单的时候,表单框无法输入内容,但是绑定model的数据是会发生变化 解决方法: 将动态生成的表单对象,深拷贝到 data 对象中 <el-date-p ...
- dev控件 xtraTabbedMdiManager 如何将关闭子窗体改为收回主窗体内
前言 本文主要讲解 xtraTabbedMdiManager 如何将关闭子窗体改为收回主窗体内,顺便附上Float(浮动)的时候使窗体最大化,及指定只能某一个子窗体能浮动放大. 下面进入正题. 一.首 ...
- 用反射的形式将一个对象属性值赋值给另一个对象,省略点get/set方法的冗余代码
1.本例使用的是idea 首先需要在idea中安装lombok插件,省略getter和setter方法的书写 在maven项目中加入lombok依赖 <dependency> <gr ...
- *args和**kwargs的区别
*args和**kwargs表示可变长度的参数. *args是元组类型: **kwargs是字典类型: 注意:arg.*args.**kwargs三个参数的位置必须是固定的,否则会报错.
- python列表的学习笔记
列表的操作 第一个例子: #names = "zhangyang guyun xiangpeng xuliangchen" #通过空格或逗号存变量 names = [" ...