Как зафиксировать столбец datatable, если количество столбцов больше 10

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

ты можешь сделать это leftColumn: (numberOfColumn > 10) ? 2 : numberOfColumn

shajji 31.10.2018 11:39

Чтобы получить количество столбцов, которое вы, возможно, захотите использовать: $('.mytable tr:first td').lenth

Jean-Marc Zimmer 31.10.2018 11:43
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
0
2
1 396
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

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

Другие вопросы по теме