dataTables使用整理(一)

初次使用dataTables，对一些用到的属性及遇到的问题作一个简要的记录

参考资料：

http://blog.csdn.net/mickey_miki/article/details/8240477/

http://q.cnblogs.com/q/45111/

http://www.mamicode.com/info-detail-621566.html

http://blog.csdn.net/ly210501076/article/details/46817375/

 1、初次使用遇到的属性 ：

属性	取值局限	说明
bAutoWidth	true or false ，default true	是否主动策画表格各列宽度[是否启用自动适应列宽]
bJQueryUI	true or false， default false	是否应用jquery ui themeroller的风格
sScrollY	"disabled" or "200px"相似的字符串	是否开启垂直迁移转变，以及指定迁移转变区域大小
sScrollX	"disabled" or "100％"相似的字符串	是否开启程度迁移转变，以及指定迁移转变区域大小
bStateSave	true or false， default false	开关，是否打开客户端情况记录功能。这个数据是记录 在cookies中的， 打开了这个记录后，即便刷新一次页面，   或从头打开浏览器，以前的情况都是保存下来的
bDeferRender	true or false， default false	用于衬着的一个参数
bProcessing	true or false， defualt false	开关，以指定当正在处理惩罚数据的时辰， 是否显示“正在处理惩罚”这个提示信息
bServerSide	true or false， defualt false	是否启用服务器处理数据源，必须使用sAjaxSource指明数据源位置
sAjaxSource	URL字符串，default null	指定要从哪一个URL获取数据
fnServerParams	无默认值	用来在向服务器发送Ajax请求时发送额外的数据
bSort	true or false， default true	开关，是否让各列具备按列排序功能【单独列，在每列设置中使用bSortable指定】
bInfo	true or false ， default true	开关，是否显示表格的一些信息【是否显示页脚信息】
bPaginate	true or false， default true	开关，是否显示（应用）分页器
bRetrieve	true or false， default false	用于指明当履行dataTable绑按时，是否返回DataTable对象
bDestroy	true or false， default false	用于当要在同一个元素上履行新的dataTable绑按时， 将以前的那个数据对象清除掉，换以新的对象设置
fnServerData	——	以使用该参数重写从服务器获取数据的方法 【详见参考资料】
oLanguage	——	自定义语言设置
bVisible	true or false， default true	false 隐藏 true不隐藏
aoColumnDefs	——	隐藏某些列等 对列的一系列处理，与aoColumns的区别见：http://www.07net01.com/zhishi/178827.html
aoColumns	——	排序控制等 对列的一系列处理
sPaginationType	"full_numbers" or"two_button"	用于指定分页器风格default ""two_button""
bScrollCollapse	true or false， default false	指定恰当的时辰缩起迁移转变视图【是否开启内置滚动条，而且显示全部数据】
aaSorting	array array[int，string]	指定按多列数据排序的根据如[]， [[0，"asc"]， [0，"desc"]]
bSortClasses	true or false， default true	开关，指定当当前列在排序时，是否增长classes "sorting_1"， "sorting_2"and "sorting_3"， 打开后，在处理惩罚大数据时，机能有所丧失

2、补充说明:

 /*
     *  默认为true
     *  是否自动计算列宽，计算列宽会花费一些时间，若是列宽经过aoColumns传递，能够关闭该属性做为优化
     *  建议设为false
     */
    "bAutoWidth":true,
 /*
     * 默认为fasle
     * 是否开启jQuery UI ThemeRoller支持，须要一些ThemeRoller使用的标记，这些标记有些与DataTable传统使用的有轻微的差别，有些是额外附加的
     */
    "bJQueryUI":false,

/*
     * 默认为空字符串，即：无效
     * 是否开启垂直滚动，垂直滚动会驱使DataTable设置为给定的长度，任何溢出到当前视图以外的数据能够经过垂直滚动进行察看
     * 当在小范围区域中显示大量数据的时候，能够在分页和垂直滚动中选择一种方式，该属性能够是css设置，或者一个数字（做为像素量度来使用）
     */
    "sScrollY":"100%",
/*
     * 默认为空字符串，即：无效
     * 是否开启水平滚动，当一个表格过于宽以致于没法放入一个布局的时候，或者表格有太多列的时候，你能够开启该选项
     * 从而在一个可横向滚动的视图里面展现表格，该属性能够是css设置，或者一个数字（做为像素量度来使用）
     */
   "sScrollX":"100%",

  /*
     * 默认为false
     * 是否开启状态保存，当选项开启的时候会使用一个cookie保存表格展现的信息的状态，例如分页信息，展现长度，过滤和排序等
     * 这样当终端用户从新加载这个页面的时候可使用之前的设置
     * 简单来讲：是否开启cookies保存当前状态信息
     */
    "bStateSave":false,
/*
     *  默认为false  
     *  是否延迟渲染，当用Ajax或者js方式加载数据时开启延迟渲染会带来很大的速度提高
     *  当该属性设置为true时，表格每一行新增的元素只有在须要被画出来时才会被DataTable建立出来
     * 简单来讲: 是否启用延迟加载：当你使用AJAX数据源时，能够提高速度。
     */
    "bDeferRender":false,

 /*
     * 默认为false
     * 当表格在处理的时候（好比排序操做）是否显示“处理中...”
     * 当表格的数据中的数据过多以致于对其中的记录进行排序时会消耗足以被察觉的时间的时候，该选项会有些用处
     * 简单来讲：是否启用进度显示，进度条等等，对处理大量数据颇有用处。
     */
    "bProcessing":false, 

    /*
     * 默认为false
     * 配置DataTable使用服务器端处理，注意，sAjaxSource参数必须指定，以便给DataTable一个为每一行获取数据的数据源
     * 简单来讲：是否启用服务器处理数据源，必须sAjaxSource指明数据源位置
     */
    "bServerSide":false,



 /*
  * sAjaxSource
  * 默认为null
  * 该参数用来向DataTable指定加载的外部数据源（若是想使用现有的数据，请使用aData）
  * 能够简单的提供一个能够用来得到数据url或者JSON对象，该对象必须包含aaData，做为表格的数据源
  */
"sAjaxSource": "http://www.sprymedia.co.uk/dataTables/json.php"

 /*
  * bDestroy
  * 默认为false
  * 使用传递的新的初始化对象中的属性构造一个新的表格，并替换一个匹配指定的选择器的表格
  * 若是没有匹配到表格，新的表格会被做为一个普通表格被构建
  */
 $(‘selector‘).dataTable({
      "bFilter": false,
      "bDestroy": true
  });
  

  /*
   * bRetrieve
   * 默认为false
   * 使用指定的选择器检索表格，注意，若是表格已经被初始化，该参数会直接返回已经被建立的对象
   * 并不会顾及你传递进来的初始化参数对象的变化，将该参数设置为true说明你确认已经明白这一点
   * 若是你须要的话，bDestroy能够用来从新初始化表格
   */
  $(document).ready(function(){
    initTable();
    tableActions();
  });
  
  function initTable()
  {
    return $(‘#example‘).dataTable( {
      "sScrollY": "200px",
      "bPaginate": false,
      "bRetrieve": true
    });
  }
 
 function tableActions()
 {
   var oTable = initTable();
   // perform API operations with oTable 
 }

  /*
     * 默认为true
     * 是否显示表格信息，是指当前页面上显示的数据的信息，若是有过滤操做执行，也会显示过滤操做的信息
     * 简单来讲： 是否显示页脚信息
     */
    "bInfo":true,

 
 /*
     * 默认为true
     * 是否开启列排序，对单独列的设置在每一列的bSortable选项中指定
     * 即:是否开启列排序功能，若是想禁用某一列排序，能够在每列设置使用bSortable参数
     */
    "bSort":true,
 

    /*
     * 默认为true
     * 是否在当前被排序的列上额外添加sorting_1,sorting_2,sorting_3三个class，当该列被排序的时候，能够切换其背景颜色
     * 该选项做为一个来回切换的属性会增长执行时间（当class被移除和添加的时候）
     * 当对大数据集进行排序的时候你或许但愿关闭该选项
     *建议：若是处理大量数据时，将其关闭关闭
     */
    "bSortClasses":true,

/*
  * bScrollCollapse
  * 默认为false
  * 当垂直滚动被容许的时候，DataTable会强制表格视图在任什么时候候都是给定的高度（对布局有利）
  * 不过，当把数据集过滤到十分小的时候看起来会很古怪，并且页脚会留在最下面
  * 当结果集的高度比给定的高度小时该参数会使表格高度自适应
  * 简单来讲：是否开启内置滚动条，而且显示全部数据;是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
  */
 $(document).ready(function(){
   $(‘#example‘).dataTable( {
     "sScrollY": "200",
     "bScrollCollapse": true
   });
 });



/*
  * fnServerParams
  * 无默认值
  * 用来在向服务器发送Ajax请求时发送额外的数据，例如自定义的过滤信息，该函数使向服务器发送额外参数变得简单
  * 传递进来的参数是DataTable创建的数据集合，你能够根据须要添加或者修改该集合
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "bProcessing": true,
         "bServerSide": true,
         "sAjaxSource": "scripts/server_processing.php",
         "fnServerParams": function ( aoData ) {
             aoData.push( { "name": "more_data", "value": "my_value" } );
         }
     });
 });


 /*
  * sPaginationType
  * 默认为two_button
  * DataTable内建了两种交互式分页策略，两个按钮和全页数，展示给终端用户不一样的控制方式
  * 能够经过API增长策略
  */
 $(document).ready(function(){
     $(‘#example‘).dataTable( {
         "sPaginationType": "full_numbers"
     });
 })

 /*
  * fnInitComplete
  * 无默认值
  * 当表格被初始化后调用该函数，一般DataTable会被持续初始化，并不须要该函数
  * 但是，当使用异步的XmlHttpRequest从外部得到语言信息时，初始化并非持续的
  */
 $(document).ready( function(){
     $(‘#example‘).dataTable({
         "fnInitComplete": function(oSettings, json) {
             alert( ‘DataTables has finished its initialisation.‘ );
         }
     });
 })