DataTables初始化配置选项学习

这个是我在学习DataTables时参考官方1.10.20的文档写的一些理解,在这里分享给大家,如果理解有误,欢迎大家在评论区留言.

该文档是用yaml文件,所以大家可以用其它支持yaml的编辑器打开查看或者转成json格式,但是注意json格式不支持注释,所以不建议.

如果只需要DataTables核心功能,只要看前600行就好,如果需要官方扩展的可以参考后600行的部分内容.当然有些部分可能是历史版本的参数,这里并没有记录

%YAML 1.2 # v1.10.20
---
Features:
  autoWidth: # 允许或禁用自动列宽计算.
    default: true
    type: boolean
  deferRender: # 功能控制延迟渲染以提高初始化速度.
    default: false
    type: boolean
  info: # 功能控制表信息显示字段,一般位于左下角.
    default: true
    type: boolean
  lengthChange: # 功能控制最终用户更改表的分页显示长度的能力.若禁用分页功能,则此功能设置无效
    default:  true
    type: boolean
  ordering: # 功能控制DataTables的排序功能
    default: true
    type: boolean
  paging: # 允许或禁用表格分页功能
    default: true
    type: boolean
  processing: # 允许或禁用处理状态(例如大量数据的排序)的显示(language.processing)
    default: false
    type: boolean
  scroolX: # 设置横向滚动,允许设置布尔值,任意css单位或数字(当做像素)
    default: false
    type: boolean
  scroolY: # 设置纵向滚动,允许设置任意css单位或数字(当做像素),此高度是table的body的高度,不包含表头和表尾.
    default: ''
    type: string
  searching: # 允许或禁用DataTables的搜索能力
    default: true
    type: boolean
  serverSide: # 启用DataTables服务端模式,默认是客户端模式,搜索(过滤),分页,排序在浏览器中完成
    default: false
    type: boolean
  stateSave: # 状态保存,在表重新加载时恢复表的状态
    default: false
    type: boolean
Data:
  ajax: # 从Ajax源加载表内容的数据
    - type: string
      description: 设置加载数据的URL
    - type: object
      description: 将参数传递给JQuery.ajax,不过有些参数和ajax不一样
      data: # 根据Ajax请求添加或修改提交给服务器的数据
        - type: object
          description: 作为对象使用时可以传递一些静态参数的值,如果传递的参数是动态的,请使用下面的函数形式.
        - type: function
          parameters:
            - name: data
              type: object
              description: 传递给服务端的原始参数
            - name: settings
              type: object
              description: 从1.10.6开始有了DataTables settings作为参数
      dataSrc: # 读取从服务器返回的数据,选择表格的数据源,默认值是字符串data
        - type: string
          default: 'data'
          description: 定义要读取的对象的属性,默认值是data,如果返回的是数组则是空字符串,如果返回的层级较多可以使用(.)调用
        - type: function
          description: 作为函数只有一个参数,就是服务器返回的json数据,函数返回的值就是数据源,数据源必须是数组类型的
          parameters:
            - name: data
              type: object
              description: ajax请求后从服务端返回的数据
      Notes: # 此选项说明一些与jQuery.ajax不一样的需要注意的地方
        - data: ajax.data. 与jQuery.ajax一样可以作为对象传递数据,DataTables将它拓展可为函数
        - dataSrc: ajax.dataSrc. 用来指定返回的数据集
        - success: 不要使用success,因为它在DataTables内部使用,如果想操作或修改服务端返回的数据,请使用ajax.dataSrc或ajax的函数形式,但是其它的回调监听函数可以继续使用
    - type: function
      parameters:
        - name: data
          type: object
          description: 发送给服务器的数据
        - name: callback
          type: function
          description: 获取所需数据后必须执行的回调函数。该数据应作为唯一参数传递到回调中
        - name: settings
          type: DataTables.Settings
          description: DataTables设置对象
  data:
    type: array
    description: 用作表初始化的数据,会覆盖table中的DOM数据。data数组中的可以是数组或对象(如果指定了columns.data)
Callbacks:
  createdRow:
    description: 当table的body中插入tr时执行的回调,当使用deferRender或serverSide时非常有用,你可以添加事件,类名信息或在创建行时对其进行初始化
    type: function
    parameters:
      - name: row
        type: node
        description: tr标签,刚创建的行元素
      - name: data
        type: array,object
        description: 该行的原始数据源(数组或对象)
      - name: dataIndex
        type: integer
        description: DataTables内部存储中的行的索引。
      - name: cells
        type: node[]
        description: 列的单元格组成的数组(自1.10.17新增)
  drawCallback:
    description: 每次DataTables执行绘制时调用的函数
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
  footerCallback:
    description: 页脚显示回调函数,与headerCallback相同，但是对于表脚，此函数允许您在每个“绘制”事件上修改表脚.如果表没有tfoot标签,则回调不会调用.
    type: function
    parameters:
      - name: tfoot
        type: node
        description: 表的tfoot标签
      - name: data
        type: array
        description: 表的完整数据数组。请注意，这是按照数据索引顺序进行的。将display参数用于当前的显示顺序
      - name: start
        type: integer
        description: 在显示的数组的当前显示起点的索引
      - name: end
        type: integer
        description: 在显示的数组的当前显示终点的索引
      - name: display
        type: array
        description: 可视位置的数组
  formatNumber:
    description: 这个回调用于格式化较大的数字,可以配置language.thousands或columns.render达到效果
    type: function
    default: 用逗号分隔符显示成千的数字
    parameters:
      - name: formatNumber
        type: integer
        description: 待格式化的数字
  headerCallback:
    description: 表头显示回调,每次重绘都会调用并允许您动态修改表头行。这可用于计算和显示有关表的有用信息。
    type: function
    parameters:
      - name: thead
        type: node
        description: 表头的thead标签
      - name: data
        type: array
        description: 表的完整数据数组。请注意，这是按照数据索引顺序进行的。将display参数用于当前的显示顺序
      - name: start
        type: integer
        description: 在显示的数组的当前显示起点的索引
      - name: end
        type: integer
        description: 在显示的数组的当前显示终点的索引
      - name: display
        type: array
        description: 可视位置的数组 
  infoCallback:
    description: 表摘要信息显示回调.国际化选项language可以处理大多数情况,也可以在此回调中自定义.如果禁用info就无法调用.
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: start
        type: integer
        description: 用于重绘数据的起始位置
      - name: end
        type: integer
        description: 用于重绘数据的终点位置
      - name: max
        type: integer
        description: 表中的总行数(不考虑过滤)
      - name: total
        type: integer
        description: 过滤后数据集中的总行数
      - name: pre
        type: string
        description: DataTables使用其自己的规则格式化的字符串
  initComplete:
    description: 初始化完成回调,processing的字符串也会显示加载信息
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: json
        type: object
        description: 如果设置了ajax,则是服务器返回的数据,否则是undefined
  preDrawCallback:
    description: 绘图前回调, 可以在每次绘制前执行更新或清除或移除监听事件,返回false会取消重绘
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
  rowCallback:
    description: 行绘制调用.通过此回调,你可以在为每个表格绘制生成行之后,但在将其呈现到文档之前,对每个行进行"后处理".这意味着行尚未在文档中可能没有宽度.
    type: function
    parameters:
      - name: row
        type: node
        description: 正在插入文档的tr标签
      - name: data
        type: array,object
        description: 该行的数据源,根据DataTables配置确定该行是数组还是对象,同时假如有隐藏的列,td.eq(4)和data[4]是有区别的.
      - name: displayNum
        type: integer
        description: 当前显示页面中的行号
      - name: displayIndex
        type: integer
        description: 当前数据搜索集中的行号(即所有可用页面上的行数)
      - name: dataIndex
        type: integer
        description: 该行的DataTables内部索引
  stateLoadCallback:
    description: 定义在何处以及如何加载保存状态的回调.
    type: function
    parameters: 
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: callback
        type: function
        description: 自1.10.13开始,支持异步获取数据,调用callback(data)而不需要发起同步请求然后return结果
  stateLoadParams:
    description: 允许在加载状态之前修改保存状态的回调
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: data
        type: object
        description: 要保存的数据.数据来自stateSaveParams
  stateLoaded:
    description: 状态加载完毕后的回调,如果你仅需要知道保存状态的信息,那么就很有用.
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: data
        type: object
        description: 要保存的数据.数据来自stateSaveParams
  stateSaveCallback:
    description: 定义表的状态如何存储,存储在哪里的回调
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: data
        type: object
        description: 要保存的数据.数据来自stateSaveParams
  stateSaveParams:
    description: 在状态数据实际被保存之前修改状态的回调,该回调每当DataTables请求被保存的状态时执行
    type: function
    parameters:
      - name: settings
        type: DataTables.Settings
        description: DataTables设置对象
      - name: data
        type: object
        description: 要保存的数据.数据来自stateSaveParams
Options:
  deferLoading: # 延迟加载服务器端数据直到第二次绘制,比如初始HTML页面有一些数据显示
    - type: integer
      description: 允许延迟加载,指示DataTables完整数据集中有多少项
      default: null
    - type: array
      description: 允许延迟加载,第一个参数是过滤后的行数,第二个参数是过滤前的行数
  destroy: # 销毁与选择器匹配的所有现有表,并使用新的初始化参数.如果不需要修改参数可以使用ajax.reload()
    type: boolean
    default: false
  displayStart: #