jquery DataTables表格插件的使用(网页数据表格化及分页显示)
2014-12-23 17:37
363 查看
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤。
多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。
那么在Bootstrap下如何使用DataTables:
只需要在html或ejs下引用写好的样式表css和脚本文件js,对应代码如下:
其中第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文档。
这样以来没有建立与样式表的来就不可能得到想要的样式。
多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据。
那么在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文档。
这样以来没有建立与样式表的来就不可能得到想要的样式。
相关文章推荐
- ajax获取json数据使用jquery分页插件显示
- ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
- 带有分页排序功能的表格插件的使用(通过ajax获取后台数据)
- 利用表格分页显示数据的js组件datatable的使用
- 使用该JavaBean可以将数据在JSP页面中以表格的形式显示出来,并具有动态排序、动态生成查询、自动分页功能
- 使用 Dojo 显示表格数据,并带筛选(filter)功能(2) - filter 插件
- 利用表格分页显示数据的js组件bootstrap datatable的使用
- 使用 UITableView 创建表格应用演练(3)——使用区段分类显示表格数据
- 关于使用asp.net 的分页显示数据。Repeater绑定数据后的分页显示。
- 使用表格显示数据
- Android之怎么使用SQLite数据库(增、删、改、查、分页等)以及ListView显示数据
- 使用XML、XSLT和XPath创建可排序、分页、重用的数据显示页面
- Android之怎么使用SQLite数据库(增、删、改、查、分页等)以及ListView显示数据
- UITableView 分页显示,数据源远程数据,使用JSON格式 [xcode 4.4.1]
- asp.net使用listview分页显示数据
- 如何读取EXCEL 表格文件并使他在WEB网页上显示(使用ASP.NET)
- 使用DataList分页显示数据,双向排序,添加checkbox控件
- 使用XML、XSLT和XPath创建可排序、分页、重用的数据显示页面
- displaytag的使用方法(用于数据表格的显示和功能控制)