Customize jQuery DataTable To Get Custom CheckBox Event Row Wise

Question

I am trying to modify jQuery DataTable with a custom CheckBox column. My requirement is to add a CheckBox with every row of a table and add click event with the respective row check boxes, so whenever I click on the check boxes, it should show the related row details or get the data to the database. I am able to get data with Ajax call from database and done with the CheckBoxes. I was following this tutorial to make it work and it works fine now:

jQuery DataTable with CheckBoxes

This is what I've done so far in the back-end:

public JsonResult GetData()
{
   var result = db.Doctors.Select(c => new
   {
      FirstName = c.Firstname,
      LicenseNo = c.LicenseNo
   }).ToList();

   return Json(new { data = result }, JsonRequestBehavior.AllowGet);
}

In the front-end:

<link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/css/dataTables.checkboxes.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/js/dataTables.checkboxes.min.js"></script>
<script>
    $(document).ready(function () {
        var table = $('#example').DataTable({
            "ajax": {
                url: '@Url.Action("GetData")',
                type: "get",
                datatype: "json",
                data: {}
            },

            "columnDefs": [
                   {
                       'targets': 0,
                       'checkboxes': {
                           'selectRow': true
                       }
                   }
            ],

            "columns": [
                { "data": "FirstName" },
                { "data": "FirstName" },
                { "data": "LicenseNo" }
            ],

            'select': {
                'style': 'multi'
            },
            'order': [[1, 'asc']]
        });
    });
</script>

<body>
    <div>
        <hr><br>
        <form>
            <table id="example" class="display" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>License No</th>
                    </tr>
                </thead>
            </table>
            <hr>
        </form>
    </div>
</body>

Now the issue is how can I add the check box click events in the jQuery DataTable. So whenever I click with check boxes, I can retrieve the respective row details.

N.B: I've done little R&D on this and checked that the CheckBox is given a class named dt-checkboxes. It's generated dynamically. Is there any way that I can make it to my requirement like assigning unique ids to the check boxes, bit stuck here. This is how it looks like - Simple enough:

Have you tried with jQuery loops to iterate over the check boxes? — AT-2017
– AT-2017, Commented May 25, 2018 at 16:20
You do not need to give an Id to that. What is stopping you from using ` dt-checkboxes` css class selector to wireup the click event on the checkbox and make the ajax call ? — Shyju
– Shyju, Commented May 25, 2018 at 16:21
I guess, the dt-checkboxes class will be applicable to all the check boxes whenever clicked on a single row @Shyju. — AT-2017
– AT-2017, Commented May 25, 2018 at 16:22
Yes. But your click happens on only one checkbox and $(this) will give you that. — Shyju
– Shyju, Commented May 25, 2018 at 16:24
And the code you shared will not render the the checkbox at all!!!! — Shyju
– Shyju, Commented May 25, 2018 at 16:27

Rich · Accepted Answer · 2018-05-25 18:00:58Z

2

You can use event listeners on the select and deselect events.

table.on( 'deselect', function ( e, dt, type, indexes ) {
   //get the row information for the row deselected.
   console.log(dt.row(indexes).data());
});
table.on( 'select', function ( e, dt, type, indexes ) {
   //get the row information for the row selected.
   console.log(dt.row(indexes).data());
});

The above code snippet will provide you the data for the row that was selected or deselected.

I forked your fiddle to demonstrate it.

answered May 25, 2018 at 18:00

Rich

1,65515 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Customize jQuery DataTable To Get Custom CheckBox Event Row Wise

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related