jQuery表格插件datatables用法总结

前端技术 2023/08/31 JavaScript

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>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>
</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程序设计的学习有所帮助。

本文地址：https://www.stayed.cn/item/1018

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案