Question 266032 in Html Question posted in
Some basic documentation can be found here.

Html – How to Make All Columns Toggle Collapse in DataTable Responsive on Click except last one?

I am using the DataTables library to create a responsive table. I want to achieve a behavior where all columns in the DataTable can toggle the collapse/expand state when clicked, except for the last column.
Here’s a simplified version of my current code:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.7/css/jquery.dataTables.min.css">
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.7/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="example" class="display responsive nowrap" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready( function () {
            var table = $('#example').DataTable();
        });

        function performAction() {
            // Perform the desired action here
            alert("Action performed!");
        }
    </script>
</body>
</html>

As of now, clicking on ONLY FIRST column in the DataTable toggles the collapse state,
I want all other columns "AGE" to also work as DataTable toggles the collapse state,
However, I want to exclude the last column from this behavior and make it perform a different action when clicked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This works for me. By trigger the click on the first column when user click on other columns i get the toggle working as per my requirement.

    table = $('#datatable_list').DataTable({
    drawCallback: function() {
        $("#datatable_list tbody tr td:not(:last-child):not(:first-child)").off("click").on('click',function() {
        var td_f = $(this).parent('tr').children('td:first');                       
        td_f.trigger('click');
    }
});

  2. 0

    We can use these library. I think your code may lack of some libraries, so it can’t work properly.
    Hope it will help!!

    <!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.4.1/css/rowGroup.bootstrap.min.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.4.1/js/dataTables.rowGroup.min.js"></script>
</head>
<body>
    <table id="example" class="table table-striped table-bordered" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>John Doe</td>
                <td>30</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
            <tr>
                <td>Jane Smith</td>
                <td>25</td>
                <td><button onclick="performAction()">Do Action</button></td>
            </tr>
        </tbody>
    </table>
    <script>
        new DataTable('#example', {
            //order: [[1, 'asc']],
            //rowGroup: { dataSrc: 1 }
        });

        function performAction() {
            // Perform the desired action here
            alert("Action performed!");
        }
    </script>

</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search