jquery 的datatable的属性说明

来源：互联网发布：数车的caxa编程编辑：程序博客网时间：2024/06/05 05:17

ataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。

官方网站及其下载地址：http:/www.datatables.net

当前最新版为1.10.2，读者可点此本站下载。

其主要特点如下：

1.自动分页处理
2.即时表格数据过滤
3.数据排序以及数据类型自动检测
4.自动处理列宽度
5.可通过CSS定制样式
6.支持隐藏列
7.易用
8.可扩展性和灵活性
9.国际化
10.动态创建表格
11.免费的

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

//$(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": " 最后一页 "}}

//      $("#sample_1").dataTable({
//                 "bPaginate": true, //开关，是否显示分页器
//                 "bInfo": true, //开关，是否显示表格的一些信息
//   //              "bFilter": true, //开关，是否启用客户端过滤器
//   //              "sDom": "<>lfrtip<>",
//   //              "bAutoWith": false,
//  //               "bDeferRender": false,
//   //              "bJQueryUI": false, //开关，是否启用JQueryUI风格
//   //              "bLengthChange": true, //开关，是否显示每页大小的下拉框
//  //               "bProcessing": true,
//   //              "bScrollInfinite": false,
//  //               "sScrollY": "800px", //是否开启垂直滚动，以及指定滚动区域大小,可设值：'disabled','2000px'
//  //               "bSort": true, //开关，是否启用各列具有按列排序的功能
//  //               "bSortClasses": true,
// //                "bStateSave": false, //开关，是否打开客户端状态记录功能。这个数据是记录在cookies中的，
// //打开了这个记录后，即使刷新一次页面，或重新打开浏览器，之前的状态都是保存下来的-  ------当值为true时aoColumnDefs不能隐藏列
// //                "sScrollX": "50%", //是否开启水平滚动，以及指定滚动区域大小,可设值：'disabled','2000%'
//  //               "aaSorting": [[0, "asc"]],
//  //               "aoColumnDefs": [{ "bVisible": false, "aTargets": [0]}],//隐藏列
// //                "sDom": '<"H"if>t<"F"if>',
// //                "bAutoWidth": false, //自适应宽度
// //                "aaSorting": [[1, "asc"]],
//  //               "sPaginationType": "full_numbers",
//                 "oLanguage": {
//                     "sProcessing": "正在加载中......",
//                     "sLengthMenu": "每页显示 _MENU_ 条记录",
//                     "sZeroRecords": "对不起，查询不到相关数据！",
//                     "sEmptyTable": "表中无数据存在！",
//                     "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
//                     "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
//                     "sSearch": "搜索",
//                     "oPaginate": {
//                         "sFirst": "首页",
//                         "sPrevious": "上一页",
//                         "sNext": "下一页",
//                         "sLast": "末页"
//                     }
//                 } //多语言配置
//             });

阅读全文

0 0