dataTables使用整理

Posted 2020-08-03 Zoe`

初次使用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/

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

属性	取值局限	说明
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"， 打开后，在处理惩罚大数据时，机能有所丧失

二、补充说明:

 /*
     *  默认为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.‘ );
         }
     });
 })