欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery表格插件datatables用法总结

程序员文章站 2023-11-11 17:58:28
datatables是一个jquery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何html表格。 官方网站及其下载地址：http:/w...

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

<p id="container" align="center">//*p 里是 table ，table包括thead等，最好按此格式写*
<h1>物品种类管理</h1>
<p 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>internet
explorer 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>internet
explorer 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>internet
explorer 5.5</td>
<td>win 95+</td>
<td class="center">5.5</td>
<td class="center">a</td>
</tr>
</tbody>
<tfoot>
</tfoot>  
</table>
</p>    
</p>

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

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

//$(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 > - p elements* <"class" and > - p 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 复合选择器应用的几个例子

下一篇： jquery向上向下取整适合分页查询

推荐阅读