jQuery技术

Jquery DataTables学习笔记(一)

字号+ 作者:H5之家 来源:H5之家 2017-08-31 14:04 我要评论( )

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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 快速学习jQuery插件 Form表单插件使用方法

    快速学习jQuery插件 Form表单插件使用方法

    2017-08-31 15:00

  • jquery插件学习三

    jquery插件学习三

    2017-08-31 14:04

  • Jquery.validate.js表单验证详解

    Jquery.validate.js表单验证详解

    2017-08-31 13:00

  • jQuery学习mongoDB驱动——插入数据

    jQuery学习mongoDB驱动——插入数据

    2017-08-31 13:00

网友点评