Set previous column width after toggling column in DataTables

Matt

In this example you can see how to toggle columns in jQuery DataTables. How I can set previous width of column after toggling? I use Bootstrap and in my example if you toggle a column, "Location" column is always too narrow.

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

If I have understood your question correctly, your DataTable is losing its responsiveness when you toggle the columns?

Try adding:

"autoWidth" : false

to your DataTable.

Documentation can be found here.

Example here. Hope it helps.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to set column width for DataTables

How do I set the column width of some column width in datatables

Not able to set column width in angular datatables

Column width not working in DataTables bootstrap

Set column width in flutter

Set GraphView column width

jquery datatables set column to not order

unable to set column width after jtable becomes visible

Angularjs angular datatables changing column width on DTColumnDef

datatables Column width trying to divide evenlly

Dynamically change datatables column width via API

Specifying a fixed column width in jQuery Datatables

How to automatically adjust the column width of datatables

Xlsxwriter: Grouping using set_column after setting width with set_column

How to set the column width of workbook

Set minimum width of column in grid

Highcharts Heatmap Set Column Width

how to subtract the next column by the previous column and create a new column after?

Datatables: disable column resizing after filtering

Summing a hidden column in DataTables after filtering

Toggling wrap and column flow with flexbox

Datatables.net ScrollX | Header and Data column width issues

Column width issue with jQuery DataTables and jQuery UI Accordion

jQuery DataTables column.width option not working as expected

How to adjust width of one column for shiny DataTables created with the JavaScript?

Set identity to the previous created column during migration

How to set width of DataTables?

Retain the previous index of the dataframe as a column after setting another column as a index

Impute values after a column if previous column contains given value

TOP Ranking

  1. 1

    Failed to listen on localhost:8000 (reason: Cannot assign requested address)

  2. 2

    How to import an asset in swift using Bundle.main.path() in a react-native native module

  3. 3

    Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

  4. 4

    pump.io port in URL

  5. 5

    Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

  6. 6

    BigQuery - concatenate ignoring NULL

  7. 7

    ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

  8. 8

    Do Idle Snowflake Connections Use Cloud Services Credits?

  9. 9

    maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

  10. 10

    Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

  11. 11

    Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

  12. 12

    Generate random UUIDv4 with Elm

  13. 13

    Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

  14. 14

    Is it possible to Redo commits removed by GitHub Desktop's Undo on a Mac?

  15. 15

    flutter: dropdown item programmatically unselect problem

  16. 16

    Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

  17. 17

    EXCEL: Find sum of values in one column with criteria from other column

  18. 18

    Pandas - check if dataframe has negative value in any column

  19. 19

    How to use merge windows unallocated space into Ubuntu using GParted?

  20. 20

    Make a B+ Tree concurrent thread safe

  21. 21

    ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

HotTag

Archive