注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

php开发lamp

《西安--木木》-经历丰富了生活。 架构师QQ群: 246695517

 
 
 

日志

 
 

Jquery DataTables 之完全总结(一)  

2014-05-07 17:35:43|  分类: jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
了解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="http://net08118.blog.163.com/blog/js/jquery.js"></script>

<script type="text/javascript" language="javascript" src="http://net08118.blog.163.com/blog/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
  } );
} );



  1. 分页

  1. bPaginite:true;是否启用分页功能

  2. sPaginationType:two_button  或者full_numbers 分页风格

  3. sFirst:告诉他第一页怎么写

  4. sLast:告诉他最后一页怎么写

  5. sNext:告诉他下一页怎么写

  6. sPrevious:告诉他上一页怎么写

  • 语言

  1. "sInfo":"共_TOTAL_页 第_START_到_END_页",

  2. "sEmptyTable":"没有数据"

  3. "sInfoFiltered":"从_MAX_条记录中搜索",

  4. "sInfoPostFix": "      底边栏的静态信息",

  5. "sInfoThousands": "我靠",//格式化信息用的

  6. "sLengthMenu":"显示<select><option>20</option><option>40</option></select>条信息"

  7.   "sSearch":"搜索"

  • 基本的命令

  1. aaSorting:参数是个数组  [[],[]]单独定义每一列的排序方式

  2. aaSortingFixed:锁定某一列的排序方式  用户不能改变

  3. iDisplayLength:规定每一页的显示数目

  4. aLengthMenu:[[两个数组要一样],[真正显示的是这个数组中的内容 最后一个是”all”]]

  5. bAutoWidth:自动调整列宽

  6. bDestroy:好比重新部署

  7. bFilter:是否启用过滤器

  8. bInfo:是否启用底边信息栏

  9. bLengthChange:就是是否启用上面那个可以方便显示几页的下拉框

  10. bProcessing:表格在处理数据时是否要显示信息

  11. sProcessing:定义表格在处理数据时要显示的信息

  12. bScrollAutoCss:是否允许显示滚动条

  13. sScrollY:表格的高度 不够的话用滚动条

  14. bScrollCollapse:当设置sScrolly时  如果数据没那么高  表格是否自适应高度

  15. bScrollInfinite:允许无限滚动  和google的图片搜索功能一样  一滚到最后就自动刷新

  16. sScrollXInner:是个百分比 实际就是表格的宽度一样

  17. sScrollX:也是百分比  实际就是水平方向滚动条件

  18. bSort:是否启用排序功能


  评论这张
 
阅读(656)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017