如何固定数据表的列，如果列数大于10
如何固定数据表的列，如果列数大于10
提问于 2018-10-31 10:35:02
当列数超过10时，我想修复数据表的列。
在数据表初始化过程中，如何找出列数？
DataTable({
"bRetrieve":true,
responsive : true,
order: [],
scrollX:false,
scrollCollapse: false,
fixedColumns:{
leftColumns: 2
// here I want put condition if numberOfColumn > 10 only then it will return 2
},回答 2
Stack Overflow用户
回答已采纳
发布于 2018-10-31 11:57:05
您只需要在第一个<td>中计算<tr>的总长度。(没有应用colspan的任何一行)
$('#example thead th').length将返回表中列的总数。
您需要为>10应用条件等等。
请查看下面的示例：
$(document).ready(function () {
var table = $('#example').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: checkColumn()
}
});
});
function checkColumn() {
console.log($('#example thead th').length);
return $('#example thead th').length >= 10 ? 2 : 1;
}<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
<table id="example" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
<th>Col 7</th>
<th>Col 8</th>
<th>Col 9</th>
<th>Col 10</th>
<th>Col 11</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>data 1.3</td>
<td>data 1.4</td>
<td>data 1.5</td>
<td>data 1.6</td>
<td>data 1.7</td>
<td>data 1.8</td>
<td>data 1.9</td>
<td>data 1.10</td>
<td>data 1.11</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>data 2.3</td>
<td>data 2.4</td>
<td>data 2.5</td>
<td>data 2.6</td>
<td>data 2.7</td>
<td>data 2.8</td>
<td>data 2.9</td>
<td>data 2.10</td>
<td>data 2.11</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>data 3.3</td>
<td>data 3.4</td>
<td>data 3.5</td>
<td>data 3.6</td>
<td>data 3.7</td>
<td>data 3.8</td>
<td>data 3.9</td>
<td>data 3.10</td>
<td>data 3.11</td>
</tr>
</tbody>
</table>
在上面的例子中，如果您想要在内部创建更多用于验证的代码，我已经创建了一个函数checkColumn()。
然后返回int值，该值将直接应用于leftColumns:checkColumn()。
Stack Overflow用户
发布于 2021-10-22 17:10:45
对于更多的10列，请更改选项“响应”为false。
DataTable({
...
responsive : false,
...
}),页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53081333
复制相关文章
相似问题
腾讯云开发者
