DataTables - 非常强大的 jQuery 表格插件，可变宽页码浏览，现场过滤。

多列排序，自动探测数据类型，智能列宽，可从几乎任何数据源获取数据。

那么在Bootstrap下如何使用DataTables：

只需要在html或ejs下引用写好的样式表css和脚本文件js，对应代码如下：

 <head>

     <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

     <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>

     <script src="http://apps.bdimg.com/libs/bootstrap/3.0.3/js/bootstrap.min.js"></script>

     <link rel="stylesheet" href="http://cdn.datatables.net/1.10.4/css/jquery.dataTables.css"></style>

     <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.js"></script>

     <script src="http://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>

     <script>

     $(document).ready(function(){

     $('#example').dataTable();

     });

     </script>

     <meta charset=utf-8">

     <title><%= title %></title>

   </head>

   <body>

    <div class="table-responsive">

    <table id="example" class="display table table-bordered table-striped table-hover" width="100%">

其中第5行是建立与外部资源jquery dataTables的联系;

第6,7行是分别加载jquery的脚本文件dataTables.js与dataTables.min.js

8-11行通过jquery读Table，然后把结果展示在页面上。

在此过程中我犯的错误是在第5行，我把link写成了像6,7行一样的script，这样一来并没有得到我想要的结果，

后来通过查询资料才知道link与script的区别：

<link> 标签定义了文档与外部资源之间的关系<link> 标签通常用于链接到样式表;

<style> 标签定义了HTML文档的样式文件引用地址<style> 元素中你需要指定样式文件来渲染HTML文档。

这样以来没有建立与样式表的来就不可能得到想要的样式。

jquery DataTables表格插件的使用(网页数据表格化及分页显示)的更多相关文章

  1. Jquery解析Json字符串,并且动态生成数据表格Table

    //ajax获得后台传来的json字符串 $.post("UserInfo.ashx", function (data) { //假设data="{T1:[{User_I ...

  2. magento中对获取的数据在前台进行分页显示

    1.数据加载类class Bf170_Bf170Logistics_Block_Inquiry_Index extends Mage_Core_Block_Template {        publ ...

  3. 25款顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  4. jQuery 表格插件25

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  5. 25个顶级的jQuery表格插件

    jQuery 表格插件可以让你创建各种各样的表格布局,表格布局是报纸和杂志中最常见的布局,现在的网站中也很常见,在这篇文章中,我向大家推荐25个jQuery 的表格插件,你可以任意控制表格的行和列,用 ...

  6. jquery datatables api （转）

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  7. 最全的jquery datatables api 使用详解

    学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...

  8. jquery datatables api

    原文地址 学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/ ...

  9. easyui源码翻译1.32--ComboGrid（数据表格下拉框）

    前言 扩展自$.fn.combo.defaults和$.fn.datagrid.defaults.使用$.fn.combogrid.defaults重写默认值对象.下载该插件翻译源码 数据表格下拉框结 ...

随机推荐

  1. NYOJ90 整数划分(经典递归和dp)

    整数划分 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 将正整数n表示成一系列正整数之和:n=n1+n2+…+nk,  其中n1≥n2≥…≥nk≥1,k≥1.  正 ...

  2. Codeforces 786B Legacy（线段树优化建图）

    题目链接  Legacy 首先对于输入的$n$,建立一棵线段树. 显然线段树有大概$2n$个结点,每个节点对应一段区间 我们把这$2n$个结点加入我们的无向图中,一起跑最短路. 具体连边方案: 我们把 ...

  3. 【UTR #2】题目交流通道

    题目描述 定好了难度,雄心勃勃的吉米多出题斯基开始寻找智慧的神犇星球的居民出题. 然而吉米多出题斯基没有料到,神犇星球的居民告诉吉米多出题斯基:"今年神犇星球经济不景气,大家都想宅在家里,哪 ...

  4. filter和spring 的interceptor都是单例的，都不是线程安全的

    Filter 是在 Servlet 容器启动时就初始化的,因此可以认为是以单例对象存在的,如果一个请求线程对其中的成员变量修改的话,会影响到其他的请求线程,因此认为是多线程不安全的.

  5. iOS -- SKScene类

      SKScene类 继承自 SKEffectNode:SKNode:UIResponder:NSObject 符合 NSCoding(SKNode)NSCopying(SKNode)NSObject ...

  6. python中 urllib, urllib2, httplib, httplib2 几个库的区别

    转载 摘要: 只用 python3, 只用 urllib 若只使用python3.X, 下面可以不看了, 记住有个urllib的库就行了 python2.X 有这些库名可用: urllib, urll ...

  7. [C++11]_[0基础]_[左值引用声明和右值引用声明]

    场景: 在 remove_reference 结构体中能看到右值引用的身影 &&, 那么这里的右值引用究竟有什么用呢? 常常也发现int& 和int&& 这两种 ...

  8. 自己定义UITextField

    目的是实现例如以下的效果: UITextField的leftView是自己定义的UIView,当中: 1.包括一个居中显示的icon.而且上,左,下各有1px的间隙 2.左上和左下是圆角,右边没有圆角 ...

  9. 【学习笔记】C#中HashTable和快速排序的用法，从单词频率统计小程序写起

    先瞎扯点别的.进入这个神圣的地方总需要些鞭策,阿西巴,我是被鞭策进来摆摊的程序猿.软件工程老师说,写程序,发博客,就来博客园.这是个号召力很强的口号.最近看网络营销 搜索引擎优化的书多一些,只能说王老 ...

  10. 剖析CPU温度监控技术

    转载 :剖析CPU温度监控技术   标签: CPU 温度控制技术 1805 具体温度检测调整代码(转载)        迄今为止还没有一种cpu散热系统能保证永不失效.失去了散热系统保护伞的“芯”,往 ...