Я хочу исправить столбец таблицы данных, когда количество столбцов больше 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
},
Чтобы получить количество столбцов, которое вы, возможно, захотите использовать: $('.mytable tr:first td').lenth
Вам просто нужно посчитать общую длину <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.info($('#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()
.
Для более 10 столбцов измените параметр "реагировать" на false.
DataTable({
...
responsive : false,
...
}),
ты можешь сделать это
leftColumn: (numberOfColumn > 10) ? 2 : numberOfColumn