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. 首次远程安装 GlassFish 后以远程 Web 方式访问其后台管理系统出现错误的解决方法（修订）

    首次远程安装 GlassFish 服务后,如果以远程 Web 方式访问其后台管理系统,会提示 Secure Admin must be enabled to access the DAS remote ...

  2. MongoDB管理与监控

    https://blog.csdn.net/Chen_Victor/article/details/74855050 https://www.cnblogs.com/zhangyinguang/p/5 ...

  3. Understanding Linux CPU Load - when should you be worried?

    http://blog.scoutapp.com/articles/2009/07/31/understanding-load-averages

  4. Python基础数据类型补充及深浅拷贝

    本节主要内容:1. 基础数据类型补充2. set集合3. 深浅拷贝主要内容:一. 基础数据类型补充首先关于int和str在之前的学习中已经讲了80%以上了. 所以剩下的自己看一看就可以了.我们补充给一 ...

  5. netcore3.0 webapi集成Swagger 5.0

    在项目中引用Swashbuckle.AspNetCore和Swashbuckle.AspNetCore.Filters两个dll,在Startup中的ConfigureServices相关配置代码如下 ...

  6. jvm类加载的过程

    java类加载过程:加载-->验证-->准备-->解析-->初始化,之后类就可以被使用了.绝大部分情况下是按这 样的顺序来完成类的加载全过程的.但是是有例外的地方,解析也是可以 ...

  7. 松鼠的新家（lca）

    洛谷—— P3258 [JLOI2014]松鼠的新家 题目描述 松鼠的新家是一棵树,前几天刚刚装修了新家,新家有n个房间,并且有n-1根树枝连接,每个房间都可以相互到达,且俩个房间之间的路线都是唯一的 ...

  8. [Bzoj5359][Lydsy1805月赛]寻宝游戏（dp）

    5359: [Lydsy1805月赛]寻宝游戏 Time Limit: 2 Sec  Memory Limit: 512 MBSubmit: 71  Solved: 19[Submit][Status ...

  9. 深入理解Atomic原子类

    Atomic是基于unsafe类和自旋操作实现的,下面以AtomicInteger类为例进行讲解. 要理解Atomic得先了解CAS CAS CAS全程Compare And Swap ,是条并发原语 ...

  10. 手机遥控器,3.5mm耳机接口红外遥控改造解析

    很多家电都用红外遥控,如电视机.机顶盒.空调.电风扇等.越来越多的遥控器反而给我们带来了更多的问题,有时找不到遥控器放哪儿了,或者混淆了都是麻烦,事实上对手机进行简单的改造,可以自制一个万能红外遥控器 ...