locked
How to make collapsible column in Datatable ? RRS feed

  • Question

  • User-20594325 posted

    Hi,

    I have  below code with Multi level column in Jquery Datatable. What i want is that i want to make HR Information and Contact columns to be collapsible by adding + and - symbol next to them name? How Can i do that? below is my code.

    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"
              rel="stylesheet">
        <link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css"
              rel="stylesheet">
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
        <table id="example" class="stripe row-border order-column table table-condensed table-striped table-bordered" style="width:100%"  >
            <thead>
                <tr>
                    <th rowspan="2">Name</th>
                    <th colspan="2" class="header-1"  name="speed">HR Information <img src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
                    <th colspan="4">Contact</th>
                </tr>
                <tr class="this_h">
                    <th id="hrcolumn" class="x"  name="speed">Position</th>
                    <th>Salary</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tiger Nixon</td>
                    <td>System Architect</td>
                    <td>$320,800</td>
                    <td>Edinburgh</td>
                    <td>5421</td>
                    <td>t.nixon@datatables.net</td>
                </tr>
                <tr>
                    <td>Garrett Winters</td>
                    <td>Accountant</td>
                    <td>$170,750</td>
                    <td>Tokyo</td>
                    <td>8422</td>
                    <td>g.winters@datatables.net</td>
                </tr>
                <tr>
                    <td>Ashton Cox</td>
                    <td>Junior Technical Author</td>
                    <td>$86,000</td>
                    <td>San Francisco</td>
                    <td>1562</td>
                    <td>a.cox@datatables.net</td>
                </tr>
    
            </tbody>
    
        </table>
    
    
    
        $(document).ready(function () {
            var table = $('#example').DataTable({
                scrollY: "300px",
                scrollX: true,
                scrollCollapse: true,
                paging: false,
                fixedColumns: true
            });
        });
    
    
        th, td {
                white-space: nowrap;
                padding-left: 40px !important;
                padding-right: 40px !important;
            }
            div.dataTables_wrapper {
                width: 800px;
                margin: 0 auto;
            }

    Sunday, May 26, 2019 1:39 AM

Answers

  • User839733648 posted

    Hi bhavesh7098,

    According to your description and code, I suggest that you could use the column visibility plug-in for Buttons to achieve your reuqirment.

    It provides a set of buttons that can be used to easily give the end user the ability to set the visibility of columns.

    And you could use  table.column(1).visible(!table.column(1).visible()) to find and hide the column.

    Here are the working sample:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet" />
    
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
    
        <style>
            th, td {
                white-space: nowrap;
                padding-left: 40px !important;
                padding-right: 40px !important;
            }
    
            div.dataTables_wrapper {
                width: 800px;
                margin: 0 auto;
            }
        </style>
        <script>
            $(document).ready(function () {
                var table = $('#example').DataTable({
                    scrollY: "300px",
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    fixedColumns: true,
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'colvisGroup',
                            text: 'Show HR',
                            show: [1, 2]
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Show Contact',
                            show: [3, 4, 5]
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Show all',
                            show: ':hidden'
                        }
                    ]
                });
    
                $('#test').on('click', function (e) {
                    e.preventDefault();
                    table.column(1).visible(!table.column(1).visible());
                    table.column(2).visible(!table.column(2).visible());
                });
    
                $('#test1').on('click', function (e) {
                    e.preventDefault();
                    table.column(3).visible(!table.column(3).visible());
                    table.column(4).visible(!table.column(4).visible());
                    table.column(5).visible(!table.column(5).visible());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="example" class="stripe row-border order-column table table-condensed table-striped table-bordered" style="width: 100%">
                <thead>
                    <tr>
                        <th rowspan="2">Name</th>
                        <th colspan="2">HR Information
                            <img id="test" src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
                        <th colspan="3">Contact
                            <img id="test1" src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
                    </tr>
                    <tr class="this_h">
                        <th>Position</th>
                        <th>Salary</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>$320,800</td>
                        <td>Edinburgh</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>$170,750</td>
                        <td>Tokyo</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>$86,000</td>
                        <td>San Francisco</td>
                        <td>1562</td>
                        <td>a.cox@datatables.net</td>
                    </tr>
    
                </tbody>
    
            </table>
    
        </form>
    </body>
    </html>
    

    result:

    Reference: 

    https://datatables.net/extensions/buttons/examples/column_visibility/index.html

    https://datatables.net/examples/api/show_hide.html

    https://datatables.net/reference/type/column-selector

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 27, 2019 2:50 AM

All replies

  • User839733648 posted

    Hi bhavesh7098,

    According to your description and code, I suggest that you could use the column visibility plug-in for Buttons to achieve your reuqirment.

    It provides a set of buttons that can be used to easily give the end user the ability to set the visibility of columns.

    And you could use  table.column(1).visible(!table.column(1).visible()) to find and hide the column.

    Here are the working sample:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/fixedcolumns/3.2.6/css/fixedColumns.dataTables.min.css" rel="stylesheet" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css" rel="stylesheet" />
    
        <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <script src="https://cdn.datatables.net/fixedcolumns/3.2.6/js/dataTables.fixedColumns.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
        <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
    
        <style>
            th, td {
                white-space: nowrap;
                padding-left: 40px !important;
                padding-right: 40px !important;
            }
    
            div.dataTables_wrapper {
                width: 800px;
                margin: 0 auto;
            }
        </style>
        <script>
            $(document).ready(function () {
                var table = $('#example').DataTable({
                    scrollY: "300px",
                    scrollX: true,
                    scrollCollapse: true,
                    paging: false,
                    fixedColumns: true,
                    dom: 'Bfrtip',
                    buttons: [
                        {
                            extend: 'colvisGroup',
                            text: 'Show HR',
                            show: [1, 2]
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Show Contact',
                            show: [3, 4, 5]
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Show all',
                            show: ':hidden'
                        }
                    ]
                });
    
                $('#test').on('click', function (e) {
                    e.preventDefault();
                    table.column(1).visible(!table.column(1).visible());
                    table.column(2).visible(!table.column(2).visible());
                });
    
                $('#test1').on('click', function (e) {
                    e.preventDefault();
                    table.column(3).visible(!table.column(3).visible());
                    table.column(4).visible(!table.column(4).visible());
                    table.column(5).visible(!table.column(5).visible());
                });
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <table id="example" class="stripe row-border order-column table table-condensed table-striped table-bordered" style="width: 100%">
                <thead>
                    <tr>
                        <th rowspan="2">Name</th>
                        <th colspan="2">HR Information
                            <img id="test" src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
                        <th colspan="3">Contact
                            <img id="test1" src="http://t1.gstatic.com/images?q=tbn:1PS9x2Ho4LHpaM:http://www.unesco.org/ulis/imag/minus.png" /></th>
                    </tr>
                    <tr class="this_h">
                        <th>Position</th>
                        <th>Salary</th>
                        <th>Office</th>
                        <th>Extn.</th>
                        <th>E-mail</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>$320,800</td>
                        <td>Edinburgh</td>
                        <td>5421</td>
                        <td>t.nixon@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>$170,750</td>
                        <td>Tokyo</td>
                        <td>8422</td>
                        <td>g.winters@datatables.net</td>
                    </tr>
                    <tr>
                        <td>Ashton Cox</td>
                        <td>Junior Technical Author</td>
                        <td>$86,000</td>
                        <td>San Francisco</td>
                        <td>1562</td>
                        <td>a.cox@datatables.net</td>
                    </tr>
    
                </tbody>
    
            </table>
    
        </form>
    </body>
    </html>
    

    result:

    Reference: 

    https://datatables.net/extensions/buttons/examples/column_visibility/index.html

    https://datatables.net/examples/api/show_hide.html

    https://datatables.net/reference/type/column-selector

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, May 27, 2019 2:50 AM
  • User-20594325 posted

    Thank you so much Jenifer... This will work. Really appreciate with your help... 

    Wednesday, May 29, 2019 7:10 AM