jQuery表格插件datatables用法总结


Posted in Javascript onSeptember 05, 2014

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

Javascript 相关文章推荐
从URL中提取参数与将对象转换为URL查询参数的实现代码
Jan 12 Javascript
jquery中的on方法使用介绍
Dec 29 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
Vue.js通用应用框架-Nuxt.js的上手教程
Dec 25 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
探索JavaScript中私有成员的相关知识
Jun 13 Javascript
vue实现百度搜索功能
Dec 28 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
关于Javascript闭包与应用的详解
Apr 22 Javascript
jQuery中index()的用法分析
Sep 05 #Javascript
使用jquery解析XML的方法
Sep 05 #Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
You might like
PHP获得用户使用的代理服务器ip即真实ip
2006/12/31 PHP
PDO预处理语句PDOStatement对象使用总结
2014/11/20 PHP
Symfony2获取web目录绝对路径、相对路径、网址的方法
2016/11/14 PHP
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
js 关键词高亮(根据ID/tag高亮关键字)案例介绍
2013/01/21 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
javascript 操作符(~、&amp;、|、^、)使用案例
2014/12/31 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
基于jQuery实现仿51job城市选择功能实例代码
2016/03/02 Javascript
js获取iframe中的window对象的实现方法
2016/05/20 Javascript
jQuery调用Webservice传递json数组的方法
2016/08/06 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
2017/01/05 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
浅谈vuex 闲置状态重置方案
2018/01/04 Javascript
使用async-validator编写Form组件的方法
2018/01/10 Javascript
node.js文件上传重命名以及移动位置的示例代码
2018/01/19 Javascript
微信小程序仿美团城市选择
2018/06/06 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
2020/09/12 Javascript
python读写文件操作示例程序
2013/12/02 Python
Python 自动补全(vim)
2014/11/30 Python
Python Flask基础教程示例代码
2018/02/07 Python
wx.CheckBox创建复选框控件并响应鼠标点击事件
2018/04/25 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python判断有效的数独算法示例
2019/02/23 Python
python print出共轭复数的方法详解
2019/06/25 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python-opencv 双线性插值实例
2020/01/17 Python
Django重设Admin密码过程解析
2020/02/10 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
40行Python代码实现天气预报和每日鸡汤推送功能
2020/02/27 Python
编码实现字符串转整型的函数
2012/06/02 面试题