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()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...
随机推荐
- C#判断输入的是否是汉字
第一种方法:正则表达式 string text = "是不是汉字"; for (int i = 0; i < text.Length; i++) { if (Regex.Is ...
- linux(ubuntu)和windows下面快速搭建android开发环境
在windows和linux下面搭建android开发环境,一般要安装以下几个软件: 1.JDK安装 2.Eclipse安装 3.Android SDK安装 4.在eclipse里面安装ADT 5.e ...
- ASP.NET Cache的一些总结分享
最近我们的系统面临着严峻性能瓶颈问题,这是由于访问量增加,客户端在同一时间请求增加,这迫使我们要从两个方面解决这一问题,增加硬件和提高系统的性能. 1.1.1 摘要 最近我们的系统面临着严峻性能瓶颈问 ...
- H5API——Canvas
http://item.jd.com/11241807.html HTML5移动Web开发实战http://item.jd.com/10982275.html HTML5程序设计(第2版)http:/ ...
- Windows Phone 8.1 列表控件（1）：基本
说到 List 控件,Windows Phone 8.1 上推荐使用的是 ListView 和 GridView. 而这两个控件实在太多东西可讲了,于是分成三篇来讲: (1)基本 (2)分组数据 (3 ...
- PHP的基础计算器
设计一个计算的功能,该功能能够完成运算并且能够对不合理的数据进行验证并且给出错误提示. 规则: 第一个数,第二个数不能够为空 如果操作符是/,第二个数数不能够为0. <?php header(' ...
- 如何使用Git——（二）
8.首次安装git,然后要把创建好的仓库放到github上,首先,你要先做一些基本设置,继续设置吧~~. 在git黑框框中输入 ssh-keygen -t rsa -C "your ema ...
- 如何利用VS2010安装和部署应用程序
转自:http://jingyan.baidu.com/article/4b52d70255d7f0fc5d774b4d.html 1.假设你当前的winform已经okay了 2.解决方案中新建&q ...
- 运用百度开放平台接口根据ip地址获取位置
使用百度开放平台接口根据ip地址获取位置 今天无意间发现在百度开放平台接口,就把一段代码拿了下来,有需要的可以试试看:http://opendata.baidu.com/api.php?query=5 ...
- Spark小课堂Week5 Scala初探
Spark小课堂Week5 Scala初探 Scala是java威力加强版. 对Java的改进 这里会结合StreamingContext.scala这个代码说明下对Java的改进方面. 方便测试方式 ...