频道栏目
首页 > 程序开发 > web前端 > JavaScript > 正文
Jquery DataTables学习笔记(一)
2012-05-24 15:03:50      个评论      
收藏   我要投稿

简介: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
  } );
} );

点击复制链接 与好友分享!回本站首页
相关TAG标签 笔记
上一篇:JS动态绘点总结
下一篇:Javascript的常规数组和关联数组对比
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站