DataTable bAutoWidth错误问题

时间:2014-08-04 16:34:23

标签: javascript css html5 twitter-bootstrap jquery-datatables

我正在尝试为每列定义列宽,但它们的宽度都相同,即使我将bAutoWidth设置为false,它们仍会计算最长列的宽度并将其设置为相同专栏的其余部分,我该怎么做才能解决这个问题。

以下是我的表格的HTML代码:

<table id="table_output" class="table table-bordered table-striped">
    <thead>
        <tr class="filters">
            <td>ID</td>
            <td>Date Time</td>
            <td>Event</td>
        </tr>
        <tr>
            <th style="width: 25px;">ID</th>
            <th style="width: 80px;">Date Time</th>
            <th style="width: 105px;">Event</th>
        </tr>
    </thead>
</table>

以下是我的数据表代码:

<script type="text/javascript">
    $(document).ready(function() {
        var dataSet = [
            <?=$data;?>
        ];
        $('#table_output').dataTable({
            "order": [[ 0, "desc" ]],
            "data": dataSet,
            "bAutoWidth": false
        });

        // Setup - add a text input to each footer cell
        var tbnum = 0;
        $('#table_output thead td').each( function () {
            var title = $('#table_output thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" class="search'+ tbnum +'" placeholder="Search '+title+'" />' );
            tbnum+=1;
        });

        // DataTable
        var table = $('#table_output').DataTable();
        // Apply the search
        table.columns().eq( 0 ).each( function ( colIdx ) {
            //alert(colIdx);
            $('.filters .search'+colIdx).on( 'keyup change', function () {
                table.column(colIdx).search(this.value).draw();
            });
        });
    });
</script>

0 个答案:

没有答案