Question

在this示例中，您可以看到如何在jQuery DataTables中切换列。如何在切换后设置列的前一个宽度？我使用Bootstrap并在my example中切换列，＆＃34;位置＆＃34;专栏总是太窄了。

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

到您的DataTable。

可以找到文档here。

示例here。希望它有所帮助。

在DataTables中切换列后设置上一列宽度

1 个答案: