Таблицы данных - L oop через столбцы / заголовок и установить ширину - PullRequest
Новая
       164

Таблицы данных - L oop через столбцы / заголовок и установить ширину

1 голос
/ 21 июня 2020

Я хочу l oop через столбцы в datatable. Проверьте класс заголовка и установите ширину столбца.

Согласно документации DataTables. Вот как вы oop просматриваете заголовок, но как установить ширину столбца? 

<table id="data-table">
    <thead>
        <tr>
            <th>ID</th>
            <?php if ($client) : ?>
            <th class="client">Client</th>
            <?php endif; ?>
            <th>Product</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><?php echo $id; ?></td>
            <?php if ($client) : ?>
            <td><?php echo $client; ?></td>
            <?php endif; ?>
            <td><?php echo $product; ?></td>
        </tr>
    </tbody>
</table>

<script>
  var myTable = $('#data-table').DataTable();
  myTable.columns().header().each(function(value, index){
    if ( $(value).hasClass('client') ) {
       // Set column width here
    }
  })
</script>

Ответы [ 2 ]

2 голосов
/ 21 июня 2020

Ненавижу это говорить, но я не думаю, что приведенный выше ответ когда-нибудь поможет. Прежде всего, вы должны указать columns(), а не columns; вторая установка width в элементах <th> не меняет расчет внутренней таблицы браузеров, но определение min-width меняет. Также используйте цепочку, чтобы убедиться, что columns() зацикливаются после создается экземпляр DataTable: 

const table = $('#data-table').DataTable({
}).columns().header().each(function(value){
  if ( $(value).hasClass('client') ) {
    $(value).css('min-width', '200px') 
  }
})

http://jsfiddle.net/wvtmq5d7/

1 голос
/ 21 июня 2020

Я думаю, вы можете легко сделать это, используя CSS только как: 

.client { width: 100px; }

Но если вам нужно сделать некоторые манипуляции с JS, чтобы установить ширину, вы можете сделать это как : 

var myTable = $('#data-table').DataTable();
myTable.columns.header().each(function(column, index) {
  if ($(column).hasClass('client')) {
    // Set column width here
    $(column).width(100)
    
    //Or
    // $(column).css("width", 100);
  }
})

Обратите внимание, если не указаны явные единицы измерения (например, "em" или "%"), то предполагается "px". Итак, в примере это на самом деле 100px. Вы можете обновить его в соответствии с вашими требованиями.

...