dataTables-说明

水深无声 2022-07-13 11:56 175阅读 0赞

"iDisplayLength": -1,//整数，默认为10,用于指定一屏显示的条数，需开启分页器
    "aaSorting": [[0, 'desc']],//array array[int，string]，如[]， [[0，""asc""]， [0，""desc""]]指定按多列数据排序的根据
    "ordering":true,
    "orderCellsTop": true,
    "responsive" : true,
    "dom": '<"wrapper"lfit><"bottom"p>',
    "bAutoWidth": true

## 选项 ##

### 默认设置(Setting defaults) ###

// 默认禁用搜索和排序
    $.extend( $.fn.dataTable.defaults， {
        searching;false,
        ordering;false
    } );
    // 排序将会打开,搜索功能仍然是关闭
    $('#example').DataTable( {
        ordering：true
    } )；

### 特性 ###

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>jQueryUI Option</td> 
   <td>控制是否使用jquerui的样式（需引入jqueryui.css）,默认FALSE</td> 
  </tr> 
  <tr> 
   <td>info Option</td> 
   <td>控制是否显示表格左下角的信息</td> 
  </tr> 
  <tr> 
   <td>lengthChange Option</td> 
   <td>是否允许用户改变表格每页显示的记录数</td> 
  </tr> 
  <tr> 
   <td>ordering Option</td> 
   <td>是否允许Datatables开启排序</td> 
  </tr> 
  <tr> 
   <td>paging Option</td> 
   <td>是否开启本地分页</td> 
  </tr> 
  <tr> 
   <td>processing Option</td> 
   <td>是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)</td> 
  </tr> 
  <tr> 
   <td>scrollX Option</td> 
   <td>设置水平滚动</td> 
  </tr> 
  <tr> 
   <td>scrollY Option</td> 
   <td>设置垂直滚动</td> 
  </tr> 
  <tr> 
   <td>searching Option</td> 
   <td>是否允许Datatables开启本地搜索</td> 
  </tr> 
  <tr> 
   <td>serverSide Option</td> 
   <td>是否开启服务器模式</td> 
  </tr> 
  <tr> 
   <td>stateSave Option</td> 
   <td>保存状态 - 在页面重新加载的时候恢复状态（页码等内容）</td> 
  </tr> 
  <tr> 
   <td>autoWidth Option</td> 
   <td>控制Datatables是否自适应宽度</td> 
  </tr> 
  <tr> 
   <td>deferRender Option</td> 
   <td>控制Datatables的延迟渲染，可以提高初始化的速度</td> 
  </tr> 
 </tbody> 
</table>

--------------------

> info Option

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>l - Length changing</td> 
   <td>改变每页显示多少条数据的控件</td> 
  </tr> 
  <tr> 
   <td>f - Filtering input</td> 
   <td>即时搜索框控件</td> 
  </tr> 
  <tr> 
   <td>t - The Table</td> 
   <td>表格本身</td> 
  </tr> 
  <tr> 
   <td>i - Information</td> 
   <td>表格相关信息控件</td> 
  </tr> 
  <tr> 
   <td>p - Pagination</td> 
   <td>分页控件</td> 
  </tr> 
  <tr> 
   <td>r - pRocessing</td> 
   <td>加载等待显示信息</td> 
  </tr> 
  <tr> 
   <td>&lt; &gt; - div elements</td> 
   <td>代表一个div元素<code>&lt;div&gt;&lt;div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;”#id” &gt; -</td> 
   <td>id的div元素 <code>&lt;div id='id'&gt;&lt;div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;”class” &gt;</td> 
   <td>样式名的div元素 <code>&lt;div class='class'&gt;&lt;div&gt;</code></td> 
  </tr> 
  <tr> 
   <td>&lt;”#id.class” &gt;</td> 
   <td>id和样式的div元素 <code>&lt;div id='id' class='class'&gt;&lt;div&gt;</code></td> 
  </tr> 
 </tbody> 
</table>

这些字母你可以理解为一个标签，dt会自动把这些字母替换成相应的控件，就想模板一样。上面的这些元素 l、f、t、i、p、r除了t只能指定一次，其他的均可多次指定。  
下面还有两个字母是应用到jQueryUI上的，不过作者推荐在1.10甚至1.11版本中不去使用他，通过使用 jQueryUIOption 来分离开  
突然写好的就没了伤心，不再重复

<table> 
 <thead> 
  <tr> 
   <th>设置项</th> 
   <th>设置效果</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>“jQueryUI”: true</td> 
   <td>jQuery UI的标签和类</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“info”: false</td> 
   <td>控制是否显示表格的信息</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>“lengthChange”: false</td> 
   <td>改变表格每页显示的记录数</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>“ordering”: false</td> 
   <td>DataTables排序</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>“paging”: false</td> 
   <td>表格分页</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>“processing”: true</td> 
   <td>处理的状态</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“scrollX”: true</td> 
   <td>水平滚动</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“scrollY”: “200px”</td> 
   <td>垂直滚动</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“scrollCollapse”: true</td> 
   <td>Allow reduce in height when a limited number</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“searching”: true</td> 
   <td>本地搜索</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>“serverSide”: true</td> 
   <td>服务器模式</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“stateSave”: true</td> 
   <td>加载页面时还原表格状态</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>“deferRender”: true</td> 
   <td>控制表格的延迟渲染</td> 
   <td>false</td> 
  </tr> 
 </tbody> 
</table>