Jquery DataTables 之完全总结

最新推荐文章于 2024-06-06 16:19:15 发布

jazwoo

最新推荐文章于 2024-06-06 16:19:15 发布

阅读量2.2k

点赞数

分类专栏： js/ajax

本文链接：https://blog.csdn.net/jazywoo123/article/details/17491441

版权

js/ajax 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

了解DataTables

官方网站：http://www.datatables.net/

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

主要特点：

自动分页处理

即时表格数据过滤

数据排序以及数据类型自动检测

自动处理列宽度

可通过CSS定制样式

支持隐藏列

易用

可扩展性和灵活性

国际化

动态创建表格

免费的

参数初始化：

引入文件：

<style type="text/css" title="currentStyle">
@import "css/demo_page.css";
@import "css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready( function () {
  $('#example').dataTable( );
} );
</script>

body内数据表格必备结构：thead tbody tboot ;

<body>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>;
<th>第一列</th>
<th>浏览器</th>
<th>系统</th>
<th>版本</th>
<th>CSS 支持等级</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<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="even 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="odd 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>
<tr>
<th>第一列</th>
<th>浏览器</th>
<th>系统</th>
<th>版本</th>
<th>CSS 支持等级</th>
</tr>
</tfoot>
</table>
</body>

基本参数设置：

$(document).ready(function(){  
$('#example').dataTable({   
  "sScrollX": "100%",   //表格的宽度  
  "sScrollXInner": "110%",   //表格的内容宽度    
  "bScrollCollapse": true,  //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)      
  "bPaginate": true,  //是否显示分页    
  "bLengthChange": true,  //每页显示的记录数    
  "bFilter": true, //搜索栏    
  "bSort": true, //是否支持排序功能    
  "bInfo": true, //显示表格信息    
  "bAutoWidth": false,  //自适应宽度    
  "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc    
  "aoColumns": [    
      null,    
      null,    
      {     
          "bVisible": true, //不可见    
          "bSearchable": false, //参与搜索    
      },   
      null,    
      null   
  ], //列设置，表有几列，数组就有几项    
  "bStateSave": true, //保存状态到cookie *************** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了    
  "sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)    
  "oLanguage": {    
      "sLengthMenu": "每页显示 _MENU_ 条记录",    
      "sZeroRecords": "对不起，查询不到任何相关数据",    
      "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",    
      "sInfoEmtpy": "找不到相关数据",    
      "sInfoFiltered": "数据表中共为 _MAX_ 条记录)",    
      "sProcessing": "正在加载中...",    
      "sSearch": "搜索",    
      "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt    
      "oPaginate": {    
          "sFirst":    "第一页",    
          "sPrevious": " 上一页 ",    
          "sNext":     " 下一页 ",    
          "sLast":     " 最后一页 "   
      }    
  
  }, //多语言配置    
  "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css   
  "aLengthMenu": [[10, 25, 50, -1, 0], ["每页10条", "每页25条", "每页50条", "显示所有数据", "不显示数据"]]  //设置每页显示记录的下拉菜单    
    });  
});

分组实例解释一些：

bAutoWidth 
是否启用自动适应列宽
默认值：True
示例代码： 
$(document).ready( function () {
  $('#example').dataTable( {
    "bAutoWidth": false
  } );
} );
 
 bDeferRender 
 是否启用延迟加载：当你使用AJAX数据源时，可以提升速度。
 默认值：False
示例代码：
$(document).ready(function() {
  var oTable = $('#example').dataTable( {
    "sAjaxSource": "sources/arrays.txt",
    "bDeferRender": true
  } );
} ); 
 
bFilter 
是否启用内置搜索功能：可以跨列搜索。
默认值：True 
示例代码：
 $(document).ready( function () {
  $('#example').dataTable( {
    "bFilter": false
  } );
} );
 
bInfo  
 是否显示表格相关信息：例如翻页信息等。
默认值：True 
示例代码： 
$(document).ready( function () {
  $('#example').dataTable( {
    "bInfo": false
  } );
} ); 
 
bJQueryUI
是否启用  jQuery UI 皮肤插件支持
默认值:False
示例代码： 
$(document).ready( function() {
  $('#example').dataTable( {
    "bJQueryUI": true
  } );
} ); 
 
 bLengthChange
是否允许用户，在下拉列表自定义选择分页大小(10, 25, 50 and 100),需要分页支持
默认值：True
示例代码： 
 $(document).ready( function () {
  $('#example').dataTable( {
    "bLengthChange": false
  } );
} );
 
bPaginate 
是否开启分页
默认值：Ture
示例代码:
 $(document).ready( function () { 
  $('#example').dataTable( {
    "bPaginate": false
  } );
} );

bProcessing 
 是否启用进度显示，进度条等等，对处理大量数据很有用处。
默认值：false
示例代码： 
$(document).ready( function () {
  $('#example').dataTable( {
    "bProcessing": true
  } );
} );
 
bScrollInfinite  
是否开启内置滚动条，并且显示所有数据
默认值：fasle 
 示例代码： 
$(document).ready(function() {
  $('#example').dataTable( {
    "bScrollInfinite": true,
    "bScrollCollapse": true,
    "sScrollY": "200px"
  } );
} );
 
 bServerSide
是否启用服务器处理数据源，必须sAjaxSource指明数据源位置
默认值：False
示例代码：

$(document).ready( function () {
  $('#example').dataTable( {
    "bServerSide": true,
    "sAjaxSource": "xhr.php"
  } );
} );
 
 bSort 
是否开启列排序功能，如果想禁用某一列排序，可以在每列设置使用bSortable参数
 默认值：True
示例代码： 
$(document).ready( function () {
  $('#example').dataTable( {
    "bSort": false
  } );
} );

 bSortClasses  
不清楚是做什么用的，如果处理大量数据时，必须关闭（有人知道吗？）
默认值：False
示例代码：
$(document).ready( function () {
  $('#example').dataTable( {
    "bSortClasses": false
  } );
} );

bStateSave  
 是否开启cookies保存当前状态信息
 默认值：false
 示例代码：
$(document).ready( function () {
  $('#example').dataTable( {
    "bStateSave": true
  } );
} );

sScrollX 
是否开启水平滚动条
默认值：空 （字符串类型）
 示例代码：
$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollX": "100%",
    "bScrollCollapse": true
  } );
} );
  
sScrollY
 是否开启垂直滚动条，滚动条大小受限于Datatable的高度大小
默认值：空 （字符串类型）
示例代码：
$(document).ready(function() {
  $('#example').dataTable( {
    "sScrollY": "200px",
    "bPaginate": false
  } );
} );


分页
bPaginite:true;是否启用分页功能
sPaginationType:two_button  或者full_numbers 分页风格
sFirst:告诉他第一页怎么写
sLast:告诉他最后一页怎么写
sNext:告诉他下一页怎么写
sPrevious:告诉他上一页怎么写
语言
"sInfo":"共_TOTAL_页 第_START_到_END_页",
"sEmptyTable":"没有数据"
"sInfoFiltered":"从_MAX_条记录中搜索",
"sInfoPostFix": "      底边栏的静态信息",
"sInfoThousands": "我靠",//格式化信息用的
"sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"
  "sSearch":"搜索"
基本的命令
aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式
aaSortingFixed:锁定某一列的排序方式  用户不能改变
iDisplayLength:规定每一页的显示数目
aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]
bAutoWidth:自动调整列宽
bDestroy:好比重新部署
bFilter:是否启用过滤器
bInfo:是否启用底边信息栏
bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框
bProcessing:表格在处理数据时是否要显示信息
sProcessing:定义表格在处理数据时要显示的信息
bScrollAutoCss:是否允许显示滚动条
sScrollY:表格的高度 不够的话用滚动条
bScrollCollapse:当设置sScrolly时  如果数据没那么高  表格是否自适应高度
bScrollInfinite:允许无限滚动  和google的图片搜索功能一样  一滚到最后就自动刷新
sScrollXInner:是个百分比 实际就是表格的宽度一样
sScrollX:也是百分比  实际就是水平方向滚动条件
bSort:是否启用排序功能

附：详细参数表

http://www.cnblogs.com/nier/archive/2012/03/18/2404836.html

三、代码实例属性说明

/$(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": "",    //"sUrl": "dataTables/de_DE.txt" 添加个国际化的文件
"oPaginate": {
"sFirst":    "第一页",
"sPrevious": " 上一页 ",
"sNext":     " 下一页 ",
"sLast":     " 最后一页 "
}
}
de_DE.txt内容如下：
{
    "sProcessing":   "处理中...",
    "sLengthMenu":   "显示 _MENU_ 项结果",
    "sZeroRecords":  "没有匹配结果",
    "sInfo":         "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
    "sInfoEmpty":    "显示第 0 至 0 项结果，共 0 项",
    "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
    "sInfoPostFix":  "",
    "sSearch":       "搜索:",
    "sUrl":          "",
    "oPaginate": {
        "sFirst":    "首页",
        "sPrevious": "上页",
        "sNext":     "下页",
        "sLast":     "末页"
    }
}

动态更改sAjaxSource的值 并重新加载dataTable

[javascript]view plaincopy 
   
 oPage.oTable.fnSettings().sAjaxSource = "sourcing/salesAmidExclude/listAll.do?mySearchArea="+$("#mySearchArea").val()+"&mySearchSelect="+ params;  

[javascript]view plaincopy 
   
 oPage.oTable._fnReDraw();  

jazwoo

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Jquery DataTables 之完全总结

了解DataTables官方网站：http://www.datatables.net/简介：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：自动分页处理即时表格数据过滤数据排序以及数据类型自动检测自动处理列宽度可通过C
复制链接

扫一扫

专栏目录