javascript - 在 DataTables 中切换列后设置以前的列宽

Question

在this例如，您可以看到如何在 jQuery DataTables 中切换列。切换后如何设置以前的列宽？我使用 Bootstrap 并在 my example 中如果您切换列，“位置”列总是太窄。

html

<div class="table-responsive">
    <h2>DataTables - resize columns</h2>
    <div class="toggle_column_wrapper">
        <h4>Toggle column</h4>
        <div class="btn-group" data-toggle="buttons">
            <label class="btn btn-primary active" data-column="1">
                <input type="checkbox" autoComplete="off" checked /> Customer Name
            </label>
            <label class="btn btn-primary active" data-column="2">
                <input type="checkbox" autoComplete="off" checked /> Location Type
            </label>
            <label class="btn btn-primary active" data-column="3">
                <input type="checkbox" autoComplete="off" checked /> Location
            </label>
        </div>
    </div>

    <table class="table table-striped table-bordered table-hover" cellSpacing="0" id="mytable">
        <thead>
            <tr>
                <th class="no-sort"><input type="checkbox" id="checkall"/></th>
                <th>Customer Name</th>
                <th>Location Type</th>
                <th>Location</th>
            </tr>   
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" className="checkthis" /></td>
                <td>GE Capital Corporation</td><td>Main Office</td><td>901 Merritt 7 |  Norwalk CT 06851 | USA</td>
            </tr>
            <tr>
                <td><input type="checkbox" className="checkthis" /></td><td>GE Capital Corporation</td>
                <td>Other Office</td><td>201 Merritt 7 |  Norwalk CT 06851 | USA</td>
            </tr>
            <tr>
                <td><input type="checkbox" className="checkthis" /></td>
                <td>Telefonica UK</td><td>Main Office</td><td>260 Bath Rd | Slough SL1 4DX | UK</td>
            </tr>
        </tbody>
    </table>
</div>

CSS

#mytable{
        width: 100%;
    }

    .table-responsive{
        width: 98%;
        margin: 0 auto;
    }

    .table-responsive h2{
        margin-bottom: 20px;
    }

    .toggle_column_wrapper{
        margin-bottom: 20px;
    }

    .toggle_column_wrapper h4, .toggle_column_wrapper .btn-group{
        display: inline-block;
    }

    .toggle_column_wrapper h4{
        margin-right: 10px;
    }

    .btn-group .btn-primary.active:hover, 
    .btn-group .btn-primary{
        color: #333;
        background-color: #e6e6e6;
        border-color: #adadad;
    }

    .btn-group .btn-primary.active{
        color: #333;
        background-color: #fff;
        border-color: #ccc;
    }

javascript

$( document ).ready(function() {
    var tableVar = $('#mytable').DataTable({
        "bDestroy": true,    
        "order": [],
        "columnDefs": [{
            "targets": 'no-sort',
            "orderable": false,
        }],
        "fnDrawCallback": function() {
        } 
    });

    $('.toggle_column_wrapper label').on( 'click', function (e) {
        e.preventDefault();
        // Get the column API object
        var column = tableVar.column( $(this).attr('data-column') );
        // Toggle the visibility
        column.visible( ! column.visible() );
    });
});

Answer 1

如果我没有正确理解您的问题，那么当您切换列时，您的 DataTable 会失去响应能力吗？

尝试添加:

"autoWidth" : false

到您的数据表。

可以找到文档here .

示例 here .希望对您有所帮助。