jQuery Datatable 表格插件

时间:2022-04-10 00:50:18

Datatable 总体来说很好用,可以实现即时搜索和排序。但是只能用于数据量较少的情况下,如果数据量超过1K建议还是用表格加翻页,不然会很慢。

datatable 中文网  http://datatables.club/

开始使用DataTables很简单,只需要引入两个文件, 一个css样式文件和DataTables本身的脚本文件。在DataTables CDN上,可以使用下面这两个文件:

css   cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css
js  cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
 
提到 CDN,这里稍微提一句,百度的CDN http://cdn.code.baidu.com/ 以及Bootstrap 的cdn 都是不错的选择 http://www.bootcdn.cn/
 
在引入这两个文件之后,怎样简单地使用DataTables?使用下方简单的几行代码,就可以初始化table。
$(document).ready(function(){
$('#data_table').DataTable(); });

其中#myTable 就是对应的  table id,如下所示

<table id="data_table" cellpadding="0" cellspacing="0" border="0"
class="data_table table table-striped table-bordered table-hover">
</table> 如果你想设置你的翻页,每页显示10个,可以加上下面这一段
$(function () {var dataTableOption = {
pageLength: 10,
language: {
paginate: {
previous: "上一页",
next: "下一页"
}
},
"order": [[ 0, "desc" ]]
};
$("#data_table").DataTable(dataTableOption);})

好了,现在你已经实现Datatable 了!

jQuery Datatable 表格插件的更多相关文章

  1. jQuery dataTable 表格插件的后台分页与界面展示

    效果: html部分: {include file="Public:inner_header" /} <nav class="breadcrumb"&gt ...

  2. jQuery动态表格插件 AppendGrid

    AppendGrid是一个jQuery动态表格插件,提供像填写电子表格数据一样在页面去输入结构化数据. 它允许用户在表格里增加/删除/插入/删除行,控制input/select/textarea 提交 ...

  3. 001&lowbar; jQuery的表格插件dataTable详解

    一. 1.启用id为"datatable1"标签的html的表格jQuery库 $("#datatable1").dataTable( ) Reference: ...

  4. jquery DataTables表格插件的使用&lpar;网页数据表格化及分页显示&rpar;

    DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...

  5. jquery datatable&lbrack;表格处理&rsqb;

    最近在公司实习发现一个额功能强大的表格解决方案,了解了一下,先总结如下: 1.官网:http://www.datatables.net/ 2.需要特别注意:被dataTable处理的table对象,必 ...

  6. 黄聪:jquery&period;bootgrid表格插件有的属性(visibleInSelection、cssClass、headerCssClass、headerAlign)不能识别的解决办法

    主要是属性大小写问题,修改jquery.bootgrid.js文件,在function loadColumns()方法里面添加下面的语句就好了 data.headerAlign = data.head ...

  7. jquery开发表格插件项目之知识点累积 二

    $.addClass() 增加样式 $.removeClass() 去除样式 $.toggleClass() 单击增加样式,再单击取消样式 $.hasClass() 判断是否存在样式,存在返回true ...

  8. jquery开发表格插件项目之知识点累积

    js设置节点的属性与属性值用setAttribute(),获取节点的属性和属性值用getAttribute(). jquery 中使用attr 就可以获取及设置元素属性. 在设置checkbox状态时 ...

  9. jquery 强大表格插件 DataTables

    官网:https://datatables.net/ 配置:https://datatables.net/reference/option/ API :https://datatables.net/r ...

随机推荐

  1. asp&period;net 性能优化

    在MSDN网络课堂中下载了一些九月份的网络讲座.有很多还是很有意义的.<ASP.NET系列讲座之一:性能与缓存>是由微软开发工具专家王立楠讲授.王先生的讲解非常清晰,课件也很详细,虽然是网 ...

  2. zoeDylan&period;ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  3. iOS 登陆的实现四种方式

    iOS 登陆的实现四种方式 一. 网页加载: http://www.cnblogs.com/tekkaman/archive/2013/02/21/2920218.ht ml [iOS登陆的实现] A ...

  4. 简述负载均衡&amp&semi;CDN技术

    曾经见到知乎上有人问“为什么像facebook这类的网站需要上千个工程师维护?”,下面的回答多种多样,但总结起来就是:一个高性能的web系统需要从无数个角度去考虑他,大到服务器的布局,小到软件中某个文 ...

  5. 【leetcode】Dungeon Game (middle)

    The demons had captured the princess (P) and im*ed her in the bottom-right corner of a dungeon. ...

  6. Android:一个高效的UI才是一个拉风的UI(一)

    开篇 Android是一个运行在移动终端上的操作系统,跟传统PC最大的不同所在就是移动终端的资源紧缺问题“比较”明显,当然对于一些屌丝机型,应该用“非常“来形容才靠谱.所以经常会出现在一些比较缺乏青春 ...

  7. Asp&period;Net MVC 实用视频教程

    [北盟学习BaMn.Cn] Asp.Net MVC 第01课--创建第一个项目.avi [北盟学习BaMn.Cn] Asp.Net MVC 第02课--自己建一个controller view.avi ...

  8. PS2251-07 海力士(金士顿U盘量产,成功!)

    U盘挂掉了,用芯片无忧测到是这个样子的,看到是PS2251-07 海力士的 网上找了很多方法都不成功,最后找到了两个可以量产成功的方法,建议使用第一种. 首先,附上三个检测工具 芯片无忧.GetInf ...

  9. js页面加载事件

    <body onload="myfunction()" > </body> <script type="text/javascript&qu ...

  10. 打包静态库&period;a文件的方法(ar&comma;ranlib&comma;nm命令介绍)

    一 常用脚本 1 打包脚本 脚本如下,下面附上ar 和 ranlib命令参考(命令来自于网络) ALLLIB=*.aFILE=`ls *.a`#原来的库解压重命名 for F in $FILEdo   ...