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 相关文章推荐
gridpanel动态加载数据的实例代码
Jul 18 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 Javascript
JS拉起或下载app的实现代码
Feb 22 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
Sep 25 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
Sep 25 Javascript
Vue实现背景更换颜色操作
Jul 17 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
Aug 14 Javascript
如何在JavaScript中使用localStorage详情
Feb 04 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 addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
javascript setTimeout()传递函数参数(包括传递对象参数)
2010/04/07 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
jQuery实现表格颜色交替显示的方法
2015/03/09 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
js中window.open的参数及注意注意事项
2016/07/06 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
轻松学习Javascript闭包
2017/03/01 Javascript
JavaScript数组push方法使用注意事项
2017/10/30 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
vue+element模态框中新增模态框和删除功能
2019/06/11 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
2019/08/29 Javascript
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
vue-model实现简易计算器
2020/08/17 Javascript
[59:48]LGD vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python的Flask框架中Flask-Admin库的简单入门指引
2015/04/07 Python
Python生成随机密码的方法
2017/06/16 Python
Python3实现的画图及加载图片动画效果示例
2018/01/19 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
Pandas中DataFrame的分组/分割/合并的实现
2019/07/16 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python实发邮件实例详解
2019/11/11 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
一款纯css3实现的颜色渐变按钮的代码教程
2014/11/12 HTML / CSS
简单整理HTML5的基本特性和语法
2016/02/18 HTML / CSS
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
Farah官方网站:男士服装及配件
2019/11/01 全球购物
教师个人剖析材料
2014/02/05 职场文书
2014法制宣传日活动总结
2014/07/09 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
详解Vue的sync修饰符
2021/05/15 Vue.js
CentOS8.4安装Redis6.2.6的详细过程
2021/11/20 Redis