在DataTables中切换列后设置先前的列宽度

Question

在这个示例中，您可以看到如何在jQuery DataTables中切换列。我如何在切换后设置先前的列宽？我使用Bootstrap，在我的示例中，如果您切换一列，“位置”列始终过窄。

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() );
    });
});

- Matt

Answer 1

如果我理解您的问题正确，当您切换列时，您的DataTable失去了响应性？

尝试添加以下内容：

"autoWidth" : false

将其添加到您的数据表中。

文档可以在这里找到。

示例在此处。希望能对您有所帮助。

- Ash