Как исправить столбец данных, если номер столбца больше 10

Question

Я хочу исправить столбец таблицы данных, когда номер столбца больше 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  
        },

Answer 1

Вам просто нужно посчитать общую длину <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()