jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格
效果图
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.dataTables插件</title>
<link rel="stylesheet" href="bootstrap3/dist/css/bootstrap.min.css" />
<script src="plugins/jquery/jquery-1.10.1.min.js"></script>
<script src="plugins/DataTables/jquery.dataTables.js"></script>
<script src="plugins/DataTables/DT_bootstrap.js"></script>
<script>
$(function(){
// $("#sample_1").dataTable({
// "bPaginate": true, //开关，是否显示分页器
// "bInfo": true, //开关，是否显示表格的一些信息
// // "bFilter": true, //开关，是否启用客户端过滤器
// // "sDom": "<>lfrtip<>",
// // "bAutoWith": false,
// // "bDeferRender": false,
// // "bJQueryUI": false, //开关，是否启用JQueryUI风格
// // "bLengthChange": true, //开关，是否显示每页大小的下拉框
// // "bProcessing": true,
// // "bScrollInfinite": false,
// // "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
// // "bSort": true, //开关，是否启用各列具有按列排序的功能
// // "bSortClasses": true,
// // "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，
// //打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的- ------当值为true时aoColumnDefs不能隐藏列
// // "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
// // "aaSorting": [[0, "asc"]],
// // "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}],//隐藏列
// // "sDom": '<"H"if>t<"F"if>',
// // "bAutoWidth": false, //自适应宽度
// // "aaSorting": [[1, "asc"]],
// // "sPaginationType": "full_numbers",
// "oLanguage": {
// "sProcessing": "正在加载中......",
// "sLengthMenu": "每页显示 _MENU_ 条记录",
// "sZeroRecords": "对不起，查询不到相关数据！",
// "sEmptyTable": "表中无数据存在！",
// "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
// "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
// "sSearch": "搜索",
// "oPaginate": {
// "sFirst": "首页",
// "sPrevious": "上一页",
// "sNext": "下一页",
// "sLast": "末页"
// }
// } //多语言配置
// });
var TableData = function () {
//function to initiate DataTable
//DataTable is a highly flexible tool, based upon the foundations of progressive enhancement,
//which will add advanced interaction controls to any HTML table
//For more information, please visit https://datatables.net/
var runDataTable = function () {
var oTable = $('#sample_1').dataTable({
"aoColumnDefs": [{
"aTargets": [0]
}],
"aaSorting": [
[1, 'asc']
],
"aLengthMenu": [
[5, 10, 15, 20, -1],
[5, 10, 15, 20, "All"] // change per page values here
],
// 设置默认显示多少条信息
"iDisplayLength": 10,
"oLanguage": {
"sProcessing": "正在加载中......",
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起，查询不到相关数据！",
"sEmptyTable": "表中无数据存在！",
"sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
"sInfoFiltered": "数据表中共为 _MAX_ 条记录",
"sSearch": "搜索",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "上一页",
"sNext": "下一页",
"sLast": "末页"
}
} //多语言配置
});
$('#sample_1_wrapper .dataTables_filter input').addClass("form-control input-sm").attr("placeholder", "Search");
// modify table search input
$('#sample_1_wrapper .dataTables_length select').addClass("m-wrap small");
// modify table per page dropdown
//$('#sample_1_wrapper .dataTables_length select').select2();
// initialzie select2 dropdown
$('#sample_1_column_toggler input[type="checkbox"]').change(function () {
/* Get the DataTables object again - this is not a recreation, just a get of the object */
var iCol = parseInt($(this).attr("data-column"));
var bVis = oTable.fnSettings().aoColumns[iCol].bVisible;
oTable.fnSetColumnVis(iCol, (bVis ? false : true));
});
};
return {
//main function to initiate template pages
init: function () {
runDataTable();
}
};
}();
TableData.init();//执行
})
</script>
</head>
<body>
<div class="container">
<table class="table table-striped table-bordered table-hover table-full-width" id="sample_1">
<thead>
<tr>
<th>Browser</th>
<th class="hidden-xs">Creator</th>
<th>Cost (
USD)</th>
<th class="hidden-xs"> Software license</th>
<th>Current
layout engine</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amaya</td>
<td class="hidden-xs">W3C,
INRIA</td>
<td>Free</td>
<td class="hidden-xs">W3C</td>
<td>Amaya</td>
</tr>
<tr>
<td>AOL Explorer</td>
<td class="hidden-xs">America Online, Inc</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Arora</td>
<td class="hidden-xs">Benjamin C. Meyer</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Avant</td>
<td class="hidden-xs">Avant Force</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Tri-engine</td>
</tr>
<tr>
<td>Camino</td>
<td class="hidden-xs">The Camino Project</td>
<td>Free</td>
<td class="hidden-xs">tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>Chromium</td>
<td class="hidden-xs">Google</td>
<td>Free</td>
<td class="hidden-xs">BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>Dillo</td>
<td class="hidden-xs">The Dillo team</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>Dillo</td>
</tr>
<tr>
<td>Dooble</td>
<td class="hidden-xs">Dooble Team</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>ELinks</td>
<td class="hidden-xs">Baudis, Fonseca, <i>et al.</i></td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Web</td>
<td class="hidden-xs">Marco Pesenti Gritti</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Flock</td>
<td class="hidden-xs">Flock Inc</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>Galeon</td>
<td class="hidden-xs">Marco Pesenti Gritti</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>Google Chrome</td>
<td class="hidden-xs">Google</td>
<td>Free</td>
<td class="hidden-xs">Google Chrome Terms of Service</td>
<td>Blink</td>
</tr>
<tr>
<td>GNU IceCat</td>
<td class="hidden-xs">GNU</td>
<td>Free</td>
<td class="hidden-xs">MPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>iCab</td>
<td class="hidden-xs">Alexander Clauss</td>
<td>$20 (Pro)</td>
<td class="hidden-xs">Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>Internet Explorer</td>
<td class="hidden-xs">Microsoft,
<br>
Spyglass</td>
<td>comes with Windows</td>
<td class="hidden-xs">Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Internet Explorer for Mac (terminated)</td>
<td class="hidden-xs">Microsoft</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Tasman</td>
</tr>
<tr>
<td>K-Meleon</td>
<td class="hidden-xs">Dorian, KKO, <i>et al.</i></td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>Konqueror</td>
<td class="hidden-xs">KDE</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>KHTML</td>
</tr>
<tr>
<td>Links</td>
<td class="hidden-xs">Patocka, <i>et al.</i></td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Lunascape</td>
<td class="hidden-xs">Lunascape Corporation</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Tri-engine</td>
</tr>
<tr>
<td>Lynx</td>
<td class="hidden-xs">Montulli, Grobe, Rezac, <i>et al.</i></td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>built-in</td>
</tr>
<tr>
<td>Maxthon</td>
<td class="hidden-xs">Maxthon International Limited</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Midori</td>
<td class="hidden-xs">Christian Dywan, et al.</td>
<td>Free</td>
<td class="hidden-xs">LGPL</td>
<td>WebKit</td>
</tr>
<tr>
<td>Mosaic</td>
<td class="hidden-xs">Marc Andreessen and
Eric Bina,
NCSA</td>
<td>non-commercial use</td>
<td class="hidden-xs">Proprietary</td>
<td>built-in</td>
</tr>
<tr>
<td>Mozilla Application Suite</td>
<td class="hidden-xs">Mozilla Foundation</td>
<td>Free</td>
<td class="hidden-xs">tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>Mozilla Firefox</td>
<td class="hidden-xs">Mozilla Foundation</td>
<td>Free</td>
<td class="hidden-xs">MPL</td>
<td>Gecko</td>
</tr>
<tr>
<td>Netscape (v.6-7) </td>
<td class="hidden-xs">Netscape Communications Corporation,
AOL</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Gecko</td>
</tr>
<tr>
<td>Netscape Browser (v.8)[note 2]</td>
<td class="hidden-xs">Mercurial Communications for
AOL</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Gecko, Trident</td>
</tr>
<tr>
<td>Netscape Communicator (v.4)[note 2]</td>
<td class="hidden-xs">Netscape Communications</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Mosaic</td>
</tr>
<tr>
<td>Netscape Navigator (v.1-4)[note 2]</td>
<td class="hidden-xs">Netscape Communications</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Mosaic</td>
</tr>
<tr>
<td>Netscape Navigator 9[note 2]</td>
<td class="hidden-xs">Netscape Communications
<br>
(division of AOL)</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Gecko</td>
</tr>
<tr>
<td>NetSurf</td>
<td class="hidden-xs">The NetSurf Developers</td>
<td>Free</td>
<td class="hidden-xs">GPL</td>
<td>NetSurf built-in</td>
</tr>
<tr>
<td>OmniWeb</td>
<td class="hidden-xs">The Omni Group</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>Opera</td>
<td class="hidden-xs">Opera Software</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Presto</td>
</tr>
<tr>
<td>Opera Mobile</td>
<td class="hidden-xs">Opera Software</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Presto</td>
</tr>
<tr>
<td>Origyn Web Browser</td>
<td class="hidden-xs">Sand-labs</td>
<td>Free</td>
<td class="hidden-xs">BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>QupZilla</td>
<td class="hidden-xs">David Rosca</td>
<td>Free</td>
<td class="hidden-xs">GNU GPLv3</td>
<td>WebKit</td>
</tr>
<tr>
<td>Safari</td>
<td class="hidden-xs">Apple Inc.</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>WebKit</td>
</tr>
<tr>
<td>SeaMonkey</td>
<td class="hidden-xs">SeaMonkey Council</td>
<td>Free</td>
<td class="hidden-xs">tri-license</td>
<td>Gecko</td>
</tr>
<tr>
<td>Shiira</td>
<td class="hidden-xs">Happy Macintosh Developing Team</td>
<td>Free</td>
<td class="hidden-xs">BSD</td>
<td>WebKit</td>
</tr>
<tr>
<td>Sleipnir</td>
<td class="hidden-xs">Fenrir Inc.</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Trident</td>
</tr>
<tr>
<td>Torch Browser</td>
<td class="hidden-xs">Torch Media</td>
<td>Free</td>
<td class="hidden-xs">Proprietary</td>
<td>Webkit</td>
</tr>
<tr>
<td>Uzbl</td>
<td class="hidden-xs">Dieter Plaetinck</td>
<td>Free</td>
<td class="hidden-xs">GNU GPLv3</td>
<td>Webkit</td>
</tr>
<tr>
<td>WorldWideWeb (Later renamed Nexus)</td>
<td class="hidden-xs">Tim Berners-Lee</td>
<td>Free</td>
<td class="hidden-xs">Public domain</td>
<td>NeXTSTEP built-in</td>
</tr>
<tr>
<td>w3m</td>
<td class="hidden-xs">Akinori Ito</td>
<td>Free</td>
<td class="hidden-xs">MIT</td>
<td>-</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
jquery.dataTables插件使用例子详解的更多相关文章
- jQuery延迟加载插件(Lazy Load)详解
最 新版本的Lazy Load并不能替代你的网页.即便你使用JavaScript移除了图片的src属性,有些现代的浏览器仍然会加载图片.现在你必须修改你的html代 码,使用占位图片作为img标签的s ...
- jQuery Fancybox插件使用参数详解
Fancybox的特点如下: 可以支持图片.html文本.flash动画.iframe以及ajax的支持 可以自定义播放器的CSS样式 可以以组的形式进行播放 如果将鼠标滚动插件(mouse whee ...
- jQuery JCrop插件的使用详解
jQuery的一个图片剪切的一个插件, 使用插件必须条件:引入jQuery.js文件,引入jQuery.Jcrop.js文件,引入JQuery.Jcrop.css文件 1.最基本的使用方法: &l ...
- Jquery validate插件使用方法详解
html: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Reg.aspx.c ...
- jquery zTree插件 json 数据详解
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 【转】JQuery上传插件Uploadify使用详解及错误处理
转自:http://www.jb51.net/article/43498.htm 关于JQuery上传插件Uploadify使用详解网上一大把,基本上内容都一样.我根据网上的步骤配置完成后,会报一些错 ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- jquery $.trim()去除字符串空格详解
jquery $.trim()去除字符串空格详解 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...
随机推荐
- [Bootstrap]全局样式（四）
按钮 1.基本类.btn {display/padding/margin-bottom/font-size/border-radius/border} 作用于< a:role:button &g ...
- 8个应该去逛逛JQuery的学习网站
根据国外科技网站 W3Techs 一项调查了近100万个网站数据显示,jQuery是目前最流行的 JavaScript 库.对于初学者来说,有的时候很难找到一个好的学习jQuery的网站,所以本文收集 ...
- How to Set Directory Permissions at Install Time using an MSI Created Using Windows Installer XML (WIX)
Original Link: http://blogs.msdn.com/b/cjacks/archive/2008/12/04/how-to-set-directory-permissions-a ...
- doctype的种类
现实生活中人们使用的浏览器是各式各样的!为了防止各各浏览器页面设置不一样而照成我们所做的网页乱序,不得不设置doctye(文档类型):doctype有3中类型:* 过渡的(Transitional): ...
- asp.net导出Excel 按照预定格式，以及解决导出乱码
protected void ToExcel() { //新建一个Gridview,原因:避免当前窗口GridView外层没有直接跟form标签,从而避免“gridview1未包含在run='serv ...
- 【Winform】 无法将类型为“System.Windows.Forms.SplitContainer”的对象强制转换为类型“System.ComponentModel.ISupportInitialize”。
问题:将dotnet framework 4.0 切换到2.0时,编译没有问题,在运行时出现如下错误:System.InvalidCastException: 无法将类型为“System.Window ...
- Linux系统下安装rz/sz命令及使用说明(转载)
对于经常使用Linux系统的人员来说,少不了将本地的文件上传到服务器或者从服务器上下载文件到本地,rz / sz命令很方便的帮我们实现了这个功能,但是很多Linux系统初始并没有这两个命令.今天,我们 ...
- SYN, FIN, ACK, PSH, RST, URG
在TCP层,有个FLAGS字段,这个字段有以下几个标识:SYN, FIN, ACK, PSH, RST, URG. 其中,对于我们日常的分析有用的就是前面的五个字段. 它们的含义是: SYN表示建立连 ...
- exec php
$m = memory_get_usage(); echo $m; require_once('include/entryPoint.php'); // for ($i=0; $i < 5000 ...
- PDF ITextSharp
示例源码 //Document:(文档)生成pdf必备的一个对象,生成一个Document示例 Document document = new Document(PageSize.A4, 30, 30 ...