这次给大家带来jQuery表格插件datatables使用详解，使用jQuery表格插件datatables的注意事项有哪些，下面就是实战案例，一起来看一下。
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
当前最新版为1.10.2，读者可点此本站下载。
其主要特点如下：
1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的
使用方法：
首先看看如下代码：
DataTables example @import "../../media/css/demo_page.css";@import "../../media/css/demo_table.css";@import "../examples_support/themes/smoothness/jquery-ui-1.7.2.custom.css";
登录后复制
上述代码中引入js和css文件。可以在demo里复制。注意路径地址。
接着来看看如下代码：
$(document).ready(function() {$('#example').dataTable( {"oLanguage": {"sUrl": "/SSS/dataTables/de_DE.txt"},"bStateSave": true,//"bJQueryUI": true, //使用jqueryui 。我用的时候显示的不是很好"sPaginationType": "full_numbers"//分页} );} );//此处为body的id//*p 里是 table ，table包括thead等，最好按此格式写*
物品种类管理
//id 别忘了//此处可以是gradeA ,gradeX 等，但是gradeB 隔行换色 效果很好| 物品编号 | 物品名称 | 物品单位 | 编辑状态 | 随便 |
|---|---|---|---|---|
| Trident | InternetExplorer 4.0 | Win 95+ | 4 | X |
| Trident | InternetExplorer 5.0 | Win 95+ | 5 | C |
| Trident | InternetExplorer 5.5 | Win 95+ | 5.5 | A |
登录后复制
上面就能创建出如图的效果， 分页。排序。等等。
最后讲讲 各各属性（主要添加的位置）
//$(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": 'rt<"bottom"flp'//这段是自定义布局没搞明白挺复杂的。 * l - Length changing * f - Filtering input* t - The table!* i - Information* p - Pagination* r - pRocessing* - p elements* - p with a class * Examples: , <lfip> //} );//} );//$(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": " 最后一页 "}}
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
JS相互转换XML和JSON的方法
JS实现JSON.stringify步骤详解
ajax和jsonp以及json区别使用步骤详解
以上就是jQuery表格插件datatables使用详解的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2768316.html
