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()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止 ...
随机推荐
- 输入与enter
#include<iostream> using namespace std; int main() { char a,b,c; while(scanf("%c%c%c" ...
- 腾讯QQ表情为什么如此成功呢
本人为原创作品:e良师益友 ,转载是并且注明 e良师益友网导读:腾讯开发的QQ表情功能给中国人的聊天增添一抹幽默,很多时候图片表情比话语更好的表达我们的意思,翻开你的聊天记录就会发现夹杂这很多不同的表 ...
- JavaScript 防止事件冒泡
在我们书写一个弹窗的时候,我们往往需要点击弹窗的其他地方来隐藏弹窗. 通常我们会写成: $(document).bind('click',function(){ $('.pop-box').hide( ...
- php简单计数器程序(文本计数器、图形计数器)
分享二个php计数器的例子. 1).文本计数器 <?php $countfile="/count.txt"; //设置保存数据的文件 if (!file_exists($c ...
- C# 学习之旅（2）--- 意外的收获
今天在完成老师布置的C#作业(计算一元二次方程的根)的时候,收获到意外的知识,所以写此博文予以记录. 意外收获为: 对文本框的输入值进行检测,使之按照要求格式输入. 下面是整个的源代码: using ...
- Linux ps同时查找多个进程
1.显示当前所有进程 SDCxM-SDCAM-root-root> ps aux USER PID %CPU %MEM VSZ RSS TTY STAT STAR ...
- Pop Sequence (栈)
Pop Sequence (栈) Given a stack which can keep M numbers at most. Push N numbers in the order of 1, ...
- ThinkPHP I方法
ThinkPHP的I方法是3.1.3版本新增的,如果你是之前的3.*版本的话,可以直接参考使用3.1快速入门教程系列的变量部分. 概述 正如你所见到的一样,I方法是ThinkPHP众多单字母函数中的新 ...
- 【IOS】分享下近一年IOS开发的经验总结
从上个暑假末到现在,自己做IOS开发也快一年了.从一开始的什么都不知道,到现在大多事都能搭上一两手,期间经历了很多事情.下面来和大家分享一下心得和感触. 1.现在移动领域的知识更新的很快,无论是IOS ...
- SQL学习中（一）序列
序列可以理解数值序列生成器,通俗的说是按照已经设定的规则自动产生数据的方案对象.--SQL SERVER不支持 个人认为序列类似于SQLSERVER中的identity(1,1),可以用于在表中添加数 ...