DataTable中各行数据的设置

浅浅的花香味﹌ 2022-03-22 05:42 585阅读 0赞

[jquery datatable][] 是一个很强大的表格控件，但是很多资料都是国外的。

昨天遇到设置表头固定宽度的问题，这里整理一下：

设置表头的参数只有一个：sWidth。

但是可以用2种方式：aoColumnDefs和aoColumns。

这2个参数的意思是：

<table> 
 <tbody> 
 <tr> 
 <td> <code>除了Datatable默认的列属性，给DataTable中的每一列的具体说明。&nbsp;利用aoColumnDefs参数和aoColumns来配置每列中的对象信息。</code> <code>该aoColumnDefs参数和aoColumns达到同样的目的，但是有点不同的。</code> <code>工作原理如下：</code> <code>aoColumnDefs：此数组可以让您针对特定的列，多列或所有列，使用每个对象的aTargets属性数组中（请注意，aoColumnDefs是在数据表1.7中引入）。这允许极大的灵活性创建表的时候，因为aoColumnDefs数组可以是任意长度的，针对你特别想要的列。该aTargets属性是一个数组来针对一个多列，并在它可以是每个元素：</code> <code>一个字符串&nbsp;-&nbsp;类名称将被匹配上的TH为列</code> <code>0或正整数&nbsp;-&nbsp;从左边的列索引计数</code> <code>一个负整数&nbsp;-&nbsp;列索引从右边计数</code> <code>字符串“_all”&nbsp;-&nbsp;所有的列（即指定一个默认值）</code> <code>aoColumns：如果指定，那么这个数组的长度必须等于列的原始HTML表格的数量。您希望只使用默认值，并自动检测选项使用'空'。</code> <code>既aoColumnDefs参数和aoColumns可以一起使用，虽然aoColumnDefs优选由于它的灵活性。如果两者都使用，aoColumns定义将最高优先级。同样地，如果同一列对象中多次aoColumnDefs，阵列中的第一个元素将采取的最高优先级，而上是最低的。</code> </td> 
 </tr> 
 </tbody> 
</table>

示例代码：

<table> 
 <tbody> 
 <tr> 
 <td> <code>//&nbsp;使用aoColumnDefs</code> <code>$(document).ready(&nbsp;</code><code>function</code><code>()&nbsp;{ </code> <code>&nbsp;&nbsp;</code><code>$(</code><code>'#example'</code><code>).dataTable(&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"aoColumnDefs"</code><code>:&nbsp;[</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{&nbsp;</code><code>"sWidth"</code><code>:&nbsp;</code><code>"20%"</code><code>,&nbsp;</code><code>"aTargets"</code><code>:&nbsp;[&nbsp;0&nbsp;]&nbsp;}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;);</code> <code>}&nbsp;);</code> <code>&nbsp;</code>&nbsp; <code>&nbsp;</code>&nbsp; <code>//&nbsp;使用aoColumns</code> <code>$(document).ready(&nbsp;</code><code>function</code><code>()&nbsp;{ </code> <code>&nbsp;&nbsp;</code><code>$(</code><code>'#example'</code><code>).dataTable(&nbsp;{ </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>"aoColumns"</code><code>:&nbsp;[</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>{&nbsp;</code><code>"sWidth"</code><code>:&nbsp;</code><code>"20%"</code>&nbsp;<code>},</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>null</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>null</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>null</code><code>,</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>null</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>]</code> <code>&nbsp;&nbsp;</code><code>}&nbsp;);</code> <code>}&nbsp;);</code> </td> 
 </tr> 
 </tbody> 
</table>

定义 sWidth的数值，可以使用3种css格式：px，百分比，em。

aTargets参数：是指对那几个表头列进行宽度约束。支持数组。

注意：aTargets支持索引、class类名。

下面是使用class类名的例子:

`   ``oTable = $(``"#TablebillList"``).dataTable({`

`                        ``"aaData"``: tempdata, ``"bPaginate"``: ``false``,                       `

`                        ``"aaSorting"``: [[ 0, ``"desc"` `]],`

`                        ``"oLanguage"``: {`

`                            ``"sProcessing"``: ``"正在加载中......"``,`

`                            ``"sLengthMenu"``: ``"每页显示 _MENU_ 条记录"``,`

`                            ``"sZeroRecords"``: ``"正在加载中......"``,`

`                            ``"sEmptyTable"``: ``"查询无数据！"``,`

`                            ``"sInfo"``: ``"当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录"``,`

`                            ``"sInfoEmpty"``: ``"显示0到0条记录"``,`

`                            ``"sInfoFiltered"``: ``"数据表中共为 _MAX_ 条记录"``,`

`                            ``"sSearch"``: ``"当前数据搜索"``,`

`                            ``"oPaginate"``: {`

`                                ``"sFirst"``: ``"首页"``,`

`                                ``"sPrevious"``: ``"上一页"``,`

`                                ``"sNext"``: ``"下一页"``,`

`                                ``"sLast"``: ``"末页"`

`                            ``}`

`                        ``}, ``"bJQueryUI"``: ``true``,`

`                        ``"sScrollY"``: ``"500px"``, ``"sScrollX"``: ``"500px"``,`

`                        ``"aoColumnDefs"``: [`

`                         ``{ ``"sWidth"``: ``"5%"``, ``"aTargets"``: [0] }, `

`                         ``{ ``"sWidth"``: ``"250px"``, ``"aTargets"``: [``"jizhan"``] },`

`                           ``{ ``"sWidth"``: ``"100px"``, ``"aTargets"``: [``"shichang"``] },`

`                         ``{ ``"sWidth"``: ``"250px"``, ``"aTargets"``: [``"jizhan2"``] },`

`                        ``{ ``"sWidth"``: ``"250px"``, ``"aTargets"``: [``"shijian"``] },`

`                   ``{ ``"sWidth"``: ``"150px"``, ``"aTargets"``: [``"guishudi"``] },`

`                     ``{ ``"sWidth"``: ``"150px"``, ``"aTargets"``: [``"haoma"``] }`

`                        ``],`

`                      `

`                         ``"bProcessing"``: ``true``,   `

`                        ``"bInfo"``: ``false``, ``"bDestroy"``: ``true``,`

`                        ``"fnRowCallback"``: ``function` `(nRow, aData, iDisplayIndex) { `

`                            ``return` `nRow;`

`                        ``}`

`                    ``});`

[jquery datatable]: http://s.suchso.com/cse/search?s=12412226648514097955&entry=1&q=datatable+

DataTable中各行数据的设置

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 DataTables中设置checkbox回显选中

相关 DataTables中设置某些列不进行排序

相关 DataTable 类（二）处理表中的数据

相关 DataTable中数据导出成Excel文件

相关数据列表 datatable的应用

相关 DataTable中各行数据的设置

相关 dataTable 定时更新数据

相关 dataTable定时刷新数据

相关 dataTable 基本设置

相关 datatable设置成中文