jQuery表格插件datatables用法总结

2019-11-20 14:10:18

字体：大中小

来源：转载

供稿：网友

DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

官方网站及其下载地址：http:/www.datatables.net

当前最新版为1.10.2，读者可点此本站下载。

其主要特点如下：

1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的

使用方法：

首先看看如下代码：

<title>DataTables example</title><style type="text/css" title="currentStyle">@import "../../media/css/demo_page.css";@import "../../media/css/demo_table.css";@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";</style><script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script><script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script><script type="text/javascript" charset="utf-8">

上述代码中引入js和css文件。可以在demo里复制。注意路径地址。

接着来看看如下代码：

<script type="text/javascript" charset="utf-8">$(document).ready(function() {$('#example').dataTable( {"oLanguage": {"sUrl": "/SSS/dataTables/de_DE.txt"},"bStateSave": true,//"bJQueryUI": true,  //使用jqueryui 。我用的时候显示的不是很好"sPaginationType": "full_numbers"//分页} );} );</script></head><body id="dt_example">//此处为body的id<div id="container" align="center">//*div 里是 table ，table包括thead等，最好按此格式写*<h1>物品种类管理</h1><div id="demo"><table cellpadding="5" cellspacing="0" border="1" class="display" id="example" align="center">//id 别忘了<thead><tr><th>物品编号</th><th>物品名称</th><th>物品单位</th><th>编辑状态</th><th>随便</th></tr></thead><tr class="gradeX">//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好<td>Trident</td><td>InternetExplorer 4.0</td><td>Win 95+</td><td class="center">4</td><td class="center">X</td></tr><tr class="gradeC"><td>Trident</td><td>InternetExplorer 5.0</td><td>Win 95+</td><td class="center">5</td><td class="center">C</td></tr><tr class="gradeA"><td>Trident</td><td>InternetExplorer 5.5</td><td>Win 95+</td><td class="center">5.5</td><td class="center">A</td></tr></tbody><tfoot></tfoot>  </table></div>    </div>

上面就能创建出如图的效果，分页。排序。等等。

最后讲讲各各属性（主要添加的位置）

//$(document).ready(function() {  //$('#example').dataTable( {//加载    //"bPaginate": true,//分页按钮    //"bLengthChange": true,//每行显示记录数    //"bFilter": true,//搜索栏    //"bSort": true,//排序    //"bInfo": true,//Showing 1 to 10 of 23 entries 总记录数没也显示多少等信息    //"bAutoWidth": true } );//} );//$(document).ready(function() {  //$('#example').dataTable( {    //"aaSorting": [[ 4, "desc" ]]//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc  //} );//} );//$(document).ready(function() {  //$('#example').dataTable( {    //"aoColumns": [     //  /* Engine */  null, //默认    //  /* Browser */ null,    //  /* Platform */ { "bSearchable": false, //不可参与搜索    //           "bVisible":  false },//不可见    //  /* Version */ { "bVisible":  false },//不可见    //  /* Grade */  null    //] } );//} );//$(document).ready(function() {  //$('#example').dataTable({  //});//} );//$(document).ready(function() {  //$('#example').dataTable( {    //"sDom": '<"top"i>rt<"bottom"flp<"clear">'//这段是自定义布局没搞明白挺复杂的。  * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* < and > - div elements* <"class" and > - div with a class  * Examples: <"wrapper"flipt>, <lf<t>ip>  //} );//} );//$(document).ready(function() {//  $('#example').dataTable( {  //  "bStateSave": true //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了  //} );//} );//$(document).ready(function() {  //$('#example').dataTable( {    //"sPaginationType": "full_numbers" //分页，一共两种样式 另一种为two_button 是datatables默认  //} );//} );//$(document).ready(function() {  //$('#example').dataTable( { //分页信息 不是很难理解。    //"oLanguage": {      //"sLengthMenu": "Display _MENU_ records per page",      //"sZeroRecords": "Nothing found - sorry",      //"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",      //"sInfoEmtpy": "Showing 0 to 0 of 0 records",      //"sInfoFiltered": "(filtered from _MAX_ total records)"    //}  //} );//} )$(document).ready(function() {  oTable = $('#example').dataTable({    "bJQueryUI": true, //可以添加 jqury的ui theme 需要添加css    "sPaginationType": "full_numbers"  });} );

默认的语言是英文的当然可以国际化：
"sUrl": "/SSS/dataTables/de_DE.txt" 添加个国际化的文件就可以。名字随便路径对了就可以。我写的国际化文件内容如下，可以直接复制到txt中使用.

{"sProcessing": "Bitte warten...","sLengthMenu": "显示_MENU_条 ","sZeroRecords": "没有您要搜索的内容","sInfo": "从_START_ 到 _END_ 条记录――总记录数为 _TOTAL_ 条","sInfoEmpty": "记录数为0","sInfoFiltered": "(全部记录数 _MAX_ 条)","sInfoPostFix": "","sSearch": "搜索","sUrl": "","oPaginate": {"sFirst":  "第一页","sPrevious": " 上一页 ","sNext":   " 下一页 ","sLast":   " 最后一页 "}}

这些是datatables的基础部分。比较容易掌握。

希望本文所述对大家jQuery程序设计的学习有所帮助。

上一篇：JS来动态的修改url实现对url的增删查改

下一篇：jQuery中index()的用法分析