checkbox in datatables ajax

Topic: checkbox in datatables ajax

maskinarbeten pro premium asked 2 years ago

Expected behavior

Checkbox should be clickable

Actual behavior

Checkbox doesn't check when you click it

Resources (screenshots, code snippets etc.)

I load data into datatables using an AJAX GET command and for my checkbox column i make a custom render to render the checkbox but these checkboxes are not clickable once rendered .. this is my custom render:

                    data: "pfid",
                    orderable: false,
                    width: "100",
                    render: function (data, type, row, meta) {
                        if (type === 'display') {
                            data = '<div class="form-check"><input type="checkbox" class="form-check-input" id="' + data + '"><label class="form-check-label" for="' + data + '"></label></div>';
                        return data;

Am i forgetting here to make it work? if i put a checkbox in the table column header in the HTML it is clickable.

Best Regards Mattias

AdamJakubowski staff answered 2 years ago


I think it's not working because you did 't give id as in the example to our checkbox.



maskinarbeten pro premium answered 2 years ago

EDIT: oops i accidentaly deleted my last post instead of comment


In my table header i have this

                                    <div class="form-check">
                                        <input type="checkbox" class="form-check-input" id="checkboxall">
                                        <label class="form-check-label" for="checkboxall"></label>

and checkbox ID for every row in the table through the render code is unique since the ID is taken from the SQL query so no two checkboxes has the same ID.

By the way, checking checkboxes in the table works fine using jQuery but clicking on them does not check them.

Mikołaj Smoleński staff commented 2 years ago

Hi there,

I've prepared a special snippet for your issue. Please add your ajax code inside (for example using some public api) and we can test it and fix errors then. For this moment we have don't have enough lines of code to reproduce it.

Best regards

Please insert min. 20 characters.


Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.8.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No