首页 新闻 赞助 找找看

jquery datatables

0
[已解决问题] 解决于 2013-10-29 16:54

准备工作:

了解DataTables

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

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

主要特点:

 
  • 自动分页处理
  • 即时表格数据过滤
  • 数据排序以及数据类型自动检测
  • 自动处理列宽度
  • 可通过CSS定制样式
  • 支持隐藏列
  • 易用
  • 可扩展性和灵活性
  • 国际化
  • 动态创建表格
  • 免费的 
参数初始化:

 

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
  } );
} );

 

博客问的主页 博客问 | 菜鸟二级 | 园豆:206
提问于:2012-12-24 15:32
< >
分享
最佳答案
0

学习

奖励园豆:5
KivenRo | 小虾三级 |园豆:1734 | 2012-12-24 16:59
其他回答(2)
0

这个插件功能是很强大

收获园豆:1
chenping2008 | 园豆:9836 (大侠五级) | 2012-12-24 15:48
0

这个不错 谢谢楼主分享

流年岁月里 | 园豆:16 (初学一级) | 2012-12-24 23:31
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册