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. Android之观察者/被观察者模式Observer/Observable

    Android 本身也是有观察者模式的.虽然项目中很多需要通知数据改变的地方,用了EventBus,但是不得不说这个观察者模式还是很好用的.最近在开发新版本的时候引用了腾讯的IM,之前写直播的时候就用 ...

  2. 搭建vue-cli时候报错处理

    最近在使用vue-cli搭建目录时出现 “webpack-dev-server不是内部或外部命令,也不是可运行的程序 或批处理文件”情况 在网上查了不少资料和解决方法后,结合自己的情况应该是环境变量的 ...

  3. python 终端模拟模块 pexpect

    简单介绍pexpect是 Don Libes 的 Expect 语言的一个 Python 实现,是一个用来启动子程序,并使用正则表达式对程序输出做出特定响应,以此实现与其自动交互的 Python 模块 ...

  4. Pollard_rho定理 大数的因数个数 这个板子超级快

    https://nanti.jisuanke.com/t/A1413 AC代码 #include <cstdio> #include <cstring> #include &l ...

  5. Codeforces Gym101502 F.Building Numbers-前缀和

    F. Building Numbers   time limit per test 3.0 s memory limit per test 256 MB input standard input ou ...

  6. ubuntu网络、包管理、工作内容小结

    中国地图 1.配置IP cat /etc/network/interfaces auto lo iface lo inet loopback # The loopback network interf ...

  7. luogu P3119 [USACO15JAN]草鉴定Grass Cownoisseur

    题目描述 In an effort to better manage the grazing patterns of his cows, Farmer John has installed one-w ...

  8. 好用的Python IDLE Sublime Text 3推荐

    Sublime Text 3 下载地址为 LINK, Sublime Text 3 is currently in beta. The latest build is 3114. 参考的激活方式为输入 ...

  9. windows10系统下安装nginx的安装步骤

    打开nginx的官网:http://nginx.org/,下载最新的稳定版本.   下载完成后,解压到你想要解压的文件路径中,我解压到了D盘中,并把文件名改为nginx:进入文件内,打开nginx.e ...

  10. 解决Sophos UTM 9防火墙上的“根分区填满”问题

    Resolving 'Root Partition Is Filling Up' Issue on Sophos UTM Firewall 收到“Sophos UTM 9”防火墻的“根分區填满”问题的 ...