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. hdu 1099(数学)

    Lottery Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. AC日记——乘积最大 洛谷 P1018

    题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一个好朋友XZ也有幸得 ...

  3. AC日记——爱改名的小融2 codevs 3149

    3149 爱改名的小融 2  时间限制: 2 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description Wikioi上有个人叫小融,他喜 ...

  4. VUE之命令行报错：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法

    Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...

  5. windows命令行更改IP地址

    修改IP地址时,提示出现一个意外情况 netsh interface ip set address "以太网" static 192.168.3.151 255.255.255.0 ...

  6. (3)unity3d 地形

    在Hierarchy(层次) 建一个Terrain(地形) Terrain属性按钮 第一个按钮:抬升与下陷地面.单击抬升地形,同时按住shift下陷地形 第二个按钮:绘制高度.同时按住shift绘制等 ...

  7. GO --微服务框架(一) goa

    当项目逐渐变大之后,服务增多,开发人员增加,单纯的使用go来写服务会遇到风格不统一,开发效率上的问题. 之前研究go的微服务架构go-kit最让人头疼的就是定义服务之后,还要写很多重复的框架代码,一直 ...

  8. mysql数据库连接状态，不要做修改数据库表结构的操作；数据库迁移操作；

    在开发过程中,python的flask框架使用sqlalmysql连接mysql数据库. 在程序连接数据量过程中,不要修改数据表的结构.比如在连接状态中使用下面的软件修改数据表结构,这个软件立即就会卡 ...

  9. pyquery库的使用

    pyquery标签选择 获取了所有的img标签(css选择器,你也可以换成不同的class和id) import requests import re from pyquery import PyQu ...

  10. POJ2386 Lake Counting 【DFS】

    Lake Counting Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 20782   Accepted: 10473 D ...