看一场塞北的雪
jquery datatables api（1）

一：api

bAutoWidth ：启用或禁用自动列宽度的计算。

默认值 true
类型 boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bAutoWidth": false  //关闭后，表格将不会自动计算表格大小，在浏览器大化小化的时候会挤在一坨
  4.     } );
  5. } );
复制代码

bDeferRender ：根据官网的介绍翻译过来就是，延期渲染，可以有个速度的提升，当datatable 使用Ajax或者JS源表的数据。这个选项设置为true,将导致datatable推迟创建表元素每个元素,直到他们都创建完成——本参数的目的是节省大量的时间。

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     var oTable = $('#example').dataTable( {
  3.         "sAjaxSource": "sources/arrays.txt",
  4.         "bDeferRender": true   //这个参数我个人没有使用过，到底是不是这个效果，大家自己去尝试一下
  5.     } );
  6. } );
复制代码

bFilter ：这个很容易明白，启用或禁用过滤数据。在datatable过滤是“智能”,它允许用户 最终输入多个关键字(空格分隔)，和每一行数据匹配,即使不是在被指定的顺序(这允许匹配多个列)。注意,如果您希望使用过滤，在datatable中必 须设置为true，如果要删除默认过滤输入框和留住过滤功能,请使用{ @link DataTable.defaults.sDom }。这个最后一句不明白，不知道大家怎么理解。

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bFilter": false
  4.     } );
  5. } );
复制代码

bJQueryUI ：这个不用多说了，一看就懂，启用jQuery UI样式，(需要在页面添加jQuery的样式文件)。

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "bJQueryUI": true
  4.     } );
  5. } );
复制代码

bLengthChange ：开启一页显示多少条数据的下拉菜单，允许用户从下拉框(10、25、50和100)，注意需要分页(bPaginate：true)。

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bLengthChange": false,
复制代码

bPaginate ：开启分页功能，如果不开启，将会全部显示

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bPaginate": false   
  4.     } );
  5. } );
复制代码

bProcessing ：开启读取服务器数据时显示正在加载中……特别是大数据量的时候，开启此功能比较好

默认值： false
类型: boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bProcessing": true
  4.     } );
  5. } );
复制代码

bScrollInfinite ：是否开启不限制长度的滚动条（和sScrollY属性结合使用），不限制长度的滚动条意味着当用户拖动滚动条的时候DataTable会不断加载数据当数据集十分大的时候会有些用处，该选项无法和分页选项同时使用，分页选项会被自动禁止，注意，额外推荐的滚动条会优先与该选项

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "bScrollInfinite": true,
  4.         "bScrollCollapse": true,
  5.         "sScrollY": "200px"//长200像素
  6.     } );
  7. } );
复制代码

bServerSide ：开启服务器模式，使用服务器端处理配置datatable。注意：sAjaxSource 参数也必须被给予为了给datatable源代码来获取所需的数据对于每个画。 这个翻译有点别扭。开启此模式后，你对datatables的每个操作 每页显示多少条记录、下一页、上一页、排序（表头）、搜索，这些都会传给服务器相应的值。

默认值： false
类型： boolean
  1. $(document).ready( function () {
  2.       $('#example').dataTable( {
  3.           "bServerSide": true,
  4.           "sAjaxSource": "xhr.php"
  5.        } );
  6. } );
复制代码

bInfo ：启用或禁用表信息显示。这显示了关于数据的信息,目前在网页上,包括信息过滤数据,如果行为被执行。这个参数在bServerSide配置后需要用到。

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.        "bInfo": false//如果这个参数不穿到后台去，服务器分页会报错，据说这个参数包含了表的所有信息
  4.     } );
  5. } );
复制代码

bSort ：开启排序功能，每一列都有排序功能，如果关闭了，排序功能将失效，也可以自定义排序功能。单个列的排序可以禁用“bSortable”选项。

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bSort": false
  4.     } );
  5. } );
复制代码

bSortClasses ：是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，可以切换其背景颜色，该选项作为一个来回切换的属性会增加执行时间（当class被移除和添加的时候），当对大数据集进行排序的时候你或许希望关闭该选项

默认值： true
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bSortClasses": false
  4.      } );
  5. } );
复制代码

bStateSave ：是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展示的信息的状态，例如分页信息，展示长度，过滤和排序等。这样当终端用户重新加载这个页面的时候可以使用以前的设置

默认值： false
类型： boolean
  1. $(document).ready( function () {
  2.     $('#example').dataTable( {
  3.         "bStateSave": true
  4.     } );
  5. } );
复制代码

sScrollX ：是否开启水平滚动，当一个表格过于宽以至于无法放入一个布局的时候，或者表格有太多列的时候，你可以开启该选项从而在一个可横向滚动的视图里面展示表格，该属性可以是css设置，或者一个数字（作为像素量度来使用）

默认值： blank string - i.e. disabled
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "sScrollX": "100%",
  4.         "bScrollCollapse": true
  5.      } );
  6. } );
复制代码

sScrollY：是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图之外的数据可以通过垂直滚动进行察看当在小范围区域中显示大量数据的时候，可以在分页和垂直滚动中选择一种方式，该属性可以是css设置，或者一个数字（作为像素量度来使用）

默认值： blank string - i.e. disabled
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "sScrollY": "200px",
  4.         "bPaginate": false
  5.      } );
  6. } );
复制代码

bDestroy ：使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格，如果没有匹配到表格，新的表格会被作为一个普通表格被构建

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "sScrollY": "200px",
  4.         "bPaginate": false
  5.     } );
  6.    
  7.   // Some time later....
  8.     $('#example').dataTable( {
  9.         "bFilter": false,
  10.         "bDestroy": true
  11.     } );
  12. } );
复制代码

bRetrieve ：使用指定的选择器检索表格，注意，如果表格已经被初始化，该参数会直接返回已经被创建的对象，并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点，如果你需要的话，bDestroy可以用来重新初始化表格

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     initTable();
  3.     tableActions();
  4. } );
  5. function initTable ()
  6. {
  7.     return $('#example').dataTable( {
  8.     "sScrollY": "200px",
  9.     "bPaginate": false,
  10.     "bRetrieve": true
  11.     } );
  12. }
  13. function tableActions ()
  14. {
  15.     var oTable = initTable();
  16.     // perform API operations with oTable
  17. }
复制代码

bScrollAutoCss ：指明DataTable中滚动的标题元素是否被允许设置内边距和外边距等

默认值： true
类型： boolean
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "bScrollAutoCss": false,
  4.         "sScrollY": "200px"
  5.     } );
  6. } );
复制代码

bScrollCollapse ：当垂直滚动被允许的时候，DataTable会强制表格视图在任何时候都是给定的高度（对布局有利）不过，当把数据集过滤到十分小的时候看起来会很古怪，而且页脚会留在最下面当结果集的高度比给定的高度小时该参数会使表格高度自适应

默认值： false
类型：
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "sScrollY": "200",
  4.         "bScrollCollapse": true
  5.     } );
  6. } );
复制代码

bSortCellsTop ：是否允许DataTable使用顶部（默认为true）的单元格，或者底部（默认为false）的单元格，当使用复合表头的时候会有些用处

默认值： false
类型： boolean
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "bSortCellsTop": true
  4.     } );
  5. } );
复制代码

iCookieDuration ：指定用于存储客户端信息到cookie中的时间长度，超过这个时间后，自动过期

默认值： 7200 (2 hours)
类型： int
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "iCookieDuration": 60*60*24; // 一天
  4.     } );
  5. } )
复制代码

iDeferLoading ：当选项被开启的时候，DataTable在非加载第一次的时候不会向服务器请求数据，而是会使用页面上的已有数据（不会应用排序等），因此在加载的时候保留一个XmlHttpRequest，iDeferLoading被用来指明需要延迟加载，而且也用来通知DataTable一个满的表格有多少条数据，信息元素和分页会被正确保留

默认值： null
类型： int
  1. // 57 records available in the table, no filtering applied
  2. $(document).ready( function() {
  3.     $('#example').dataTable( {
  4.         "bServerSide": true,
  5.         "sAjaxSource": "scripts/server_processing.php",
  6.         "iDeferLoading": 57
  7.     } );
  8. } );
  9. // 57 records after filtering, 100 without filtering (an initial filter applied)
  10. $(document).ready( function() {
  11.      $('#example').dataTable( {
  12.         "bServerSide": true,
  13.         "sAjaxSource": "scripts/server_processing.php",
  14.         "iDeferLoading": [ 57, 100 ],
  15.             "oSearch": {
  16.             "sSearch": "my_filter"
  17.           }
  18.       } );
  19. } );
复制代码

iDisplayLength ：单页显示的数据的条数，如果bLengthChange属性被开启，终端用户可以通过一个弹出菜单重写该数值

默认值： 10
类型： int
  1. $(document).ready( function() {
  2.        $('#example').dataTable( {
  3.             "iDisplayLength": 50
  4.         } );
  5. } )
复制代码

iDisplayStart ：当开启分页的时候，定义展示的记录的起始序号，不是页数，因此如果你每个分页有10条记录而且想从第三页开始，需要把该参数指定为20

默认值 0
类型： int
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "iDisplayStart": 20
  4.     } );
  5. } )
复制代码

iScrollLoadGap ：滚动余界是指DataTable在当前页面还有多少条数据可供滚动时自动加载新的数据，你可能希望指定一个足够大的余界，以便滚动加载数据的操作对用户来说是平滑的，同时也不会大到加载比需要的多的多的数据

默认值： 100
类型: int
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "bScrollInfinite": true,
  4.         "bScrollCollapse": true,
  5.         "sScrollY": "200px",
  6.         "iScrollLoadGap": 50
  7.     } );
  8. } );
复制代码

iTabIndex :默认情况下DataTable允许通过为需要键盘导航的元素添加tabindex属性来进行导航（排序、分页、过滤），允许你通过tab键切换控制组件，使用回车键去激活他们，默认为0表示按照文档流来切换，如果需要的话，你可以使用该参数重写切换顺序，使用-1来禁止内建的键盘导航

默认值： 0
类型： int
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "iTabIndex": 1
  4.     } );
  5. } );
复制代码

oSearch ：该参数允许你在初始化的时候使用已经定义的全局过滤状态，sSearch对象必须被定义，但是所有的其它选项都是可选的，当bRegex为true的时候，搜索字符串会被当作正则表达式，当为false（默认）的时候，会被直接当作一个字符串，当bSmart为true的时候，DataTable会使用使用灵活过滤策略（匹配任何可能的数据），为false的时候不会这样做

  1. $(document).ready( function() {
  2.       $('#example').dataTable( {
  3.           "oSearch": {"sSearch": "Initial search"}
  4.        } );
  5. } )
复制代码

sAjaxDataProp ：当使用Ajax数据源或者服务器端处理的时候，DataTable会默认搜索aaData属性作为数据源，该选项允许变更数据源的名称，你可以使用JavaScript的点号对象表示法去访问多级网状数据源

默认值： aaData
类型： string
  1. // Get data from { "data": [...] }
  2. $(document).ready( function() {
  3.     var oTable = $('#example').dataTable( {
  4.         "sAjaxSource": "sources/data.txt",
  5.        "sAjaxDataProp": "data"
  6.     } );
  7. } );
  8. // Get data from { "data": { "inner": [...] } }
  9. $(document).ready( function() {
  10.     var oTable = $('#example').dataTable( {
  11.        "sAjaxSource": "sources/data.txt",
  12.       "sAjaxDataProp": "data.inner"
  13.    } );
  14. } );
复制代码

sAjaxSource ：该参数用来向DataTable指定加载的外部数据源（如果想使用现有的数据，请使用aData），可以简单的提供一个可以用来获得数据url或者JSON对象，该对象必须包含aaData，作为表格的数据源

默认值： null
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.         "sAjaxSource": "list.action"
  4.      } );
  5. } )
复制代码

sCookiePrefix :该参数可以用来重写DataTable默认指定的用来存储状态信息的cookie的前缀

默认值： SpryMedia_DataTables_
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.       "sCookiePrefix": "my_datatable_"
  4.     } );
  5. } );
复制代码

sDom ：这是用于定义DataTable布局的一个强大的属性，包括分页，显示多少条数据和搜索，格式如下：

  1. The following options are allowed:
  2.     'l' - 左上角按个下拉框，10个，20个，50个，所有的哪个
  3.     'f' - 快速过滤框
  4.     't' - 表格本身
  5.     'i' - 分页信息
  6.     'p' -分页按钮
  7.     'r' - 现在正在加载中……
  8. The following constants are allowed:
  9.     'H' - jQueryUI theme "header" classes ('fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix')
  10.     'F' - jQueryUI theme "footer" classes ('fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix')
  11. The following syntax is expected:
  12.     '<' and '>' - div 元素
  13.     '<"class" and '>' - 给div加clasa
  14.     '<"#id" and '>' - 给div加上id
  15. Examples:
  16.     '<"wrapper"flipt>'
  17.     'ip>'
复制代码
默认值： lfrtip (when bJQueryUI is false) or <"H"lfr>t<"F"ip> (when bJQueryUI is true)
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "sDom": '<"top"i>rt<"bottom"flp><"clear">'
  4.     } );
  5. } );
复制代码
'<"top"i>rt<"bottom"flp><"clear">'


这段代码翻译为html就是这样子的：

  2.     i
  • rt
  •     flp
复制代码

这样一对比起来，就容易理解多了.Datatables之强大的sDom属性的应用
sPaginationType ：DataTable内建了两种交互式分页策略，两个按钮和全页数，展现给终端用户不同的控制方式，可以通过API增加策略

默认值： two_button
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "sPaginationType": "full_numbers"
  4.     } );
  5. } )
复制代码

sScrollXInner ：当横向滚动可用的时候，该属性可以用来强制DataTable的宽度比需要的更长，比如你需要表格彼此相隔适宜，该变量可以用来使表格变大，而且强制滚动，该该属性可以是css设置，或者一个数字（作为像素量度来使用）

默认值： blank string - i.e. disabled
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "sScrollX": "100%",
  4.        "sScrollXInner": "110%"
  5.    } );
  6. } );
复制代码

sServerMethod ：设置使用Ajax方式调用的服务器端的处理方法或者Ajax数据源的HTTP请求方式

默认值： GET
类型： string
  1. $(document).ready( function() {
  2.     $('#example').dataTable( {
  3.        "bServerSide": true,
  4.        "sAjaxSource": "list.action",
  5.        "sServerMethod": "POST"   //以post的方式提交数据
  6.     } );
  7. } )

最后注明：本文转自http://blog.csdn.net/lisky119/article/details/25884197

posted on 2016-06-07 09:44  看一场塞北的雪  阅读(429)  评论(0)  编辑  收藏  举报

Copyright © 2024 看一场塞北的雪
Powered by .NET 9.0 on Kubernetes Powered By博客园