Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 83167

Column width does not work with search filter

$
0
0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
When I set column widths in columnDefs, it works fine, once I set autoWidth to false.
When I add column filter row, it applies width definitions to column filter row only and for the header itself, it ignores them and just divides table width by number of columns and set each column's width to that value. Any way to get around this issue?

    $(document).ready(function () {
        ...
        // Table Column Filtering Setup
        $('#myTable thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#myTable thead');

        bindTable();

    function bindTable() {
        myTable = $("#myTable").DataTable({
            ...
            columnDefs: [
                {
                    targets: [0],
                    width: "13%"
                },
                {
                    targets: [1],
                    width: "10%"
                },
                ...
            ]

When I check generated code:

<tr role="row">
    <th style="width: 126px;" class="sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="EDL: activate to sort column ascending">EDL</th>
    <th style="width: 126px;" class="blah sorting" tabindex="0" aria-controls="myTable" rowspan="1" colspan="1" aria-label="Item ID: activate to sort column ascending">Item ID</th>
</tr>

<tr class="filters" role="row">
    <th style="width: 13%" rowspan="1" colspan="1"><input type="text" placeholder="EDL"></th>
    <th style="width: 10%" rowspan="1" colspan="1"><input type="text" placeholder="Item ID"></th>
</tr>

Viewing all articles
Browse latest Browse all 83167

Trending Articles