首页 > 代码库 > jquery.dataTables插件使用例子详解
jquery.dataTables插件使用例子详解
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格
效果图
代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery.dataTables插件</title>
<link rel="stylesheet" href="http://www.mamicode.com/bootstrap3/dist/css/bootstrap.min.css" />
<script src="http://www.mamicode.com/plugins/jquery/jquery-1.10.1.min.js"></script>
<script src="http://www.mamicode.com/plugins/DataTables/jquery.dataTables.js"></script>
<script src="http://www.mamicode.com/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 = http://www.mamicode.com/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>