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. Python语言 介绍

    一.python介绍python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语 ...

  2. String()和.toString()的区别

    一.相同点:都可以转为字符串类型: 二.不同点: 1..toString() :null.toString()和undefined.toString() 程序报错误; 2..toString(): . ...

  3. Codeforces 932 C.Permutation Cycle-数学 (ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined))

    C. Permutation Cycle   time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  4. luogu P2746 [USACO5.3]校园网Network of Schools

    题目描述 一些学校连入一个电脑网络.那些学校已订立了协议:每个学校都会给其它的一些学校分发软件(称作“接受学校”).注意即使 B 在 A 学校的分发列表中, A 也不一定在 B 学校的列表中. 你要写 ...

  5. Jenkins自动化部署入门（一）

    开始使用 Jenkins 这一段时间,技术总监为了减少测试环境每次提交新增接口都要部署项目的时间,搞了一个jenkins持续集成github.docker,这样只要每次push代码都会自动部署,确实节 ...

  6. 关于 Bellman-Ford 与 Floyd 算法的一点感想

    在四种常用的最短路算法 Dijkstra, SPFA, floyd, Bellman-Ford 中, Dijks 和 SPFA 的使用较为普遍, 对大多数人来说, 也较为熟悉. 然而, floyd 与 ...

  7. JDBC_完整版

    1,新建WEB项目:JDBC 2,导入驱动 将mysql-connector-java-5.0.8-bin.jar包放入web-inf目录下面的lib目录中 3,新建User类,放入entity包中 ...

  8. 如何设置tomcat服务器编码为utf-8编码

    原文:http://blog.csdn.net/u014079773/article/details/52637057 在实际开发中我们经常遇到request请求的中文乱码,那么如何解决中文乱码问题? ...

  9. xpath的匹配规则

    starts-with 匹配一个属性开始位置的关键字 contains 匹配一个属性值中包含的字符串 text() 匹配的是显示文本信息,此处也可以用来做定位用 i.e. //input[starts ...

  10. linux如和对其他用户隐藏进程？

    Linux kernel 3.2以上,root用户可以设置内核,让普通用户看不到其它用户的进程.适用于有多个用户使用的系统.该功能由内核提供,因此本教程适用于Debian/Ubuntu/RHEL/Ce ...