checkbox in datatables ajax


Topic: checkbox in datatables ajax

maskinarbeten pro premium asked a year 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 a year ago

Hi,

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

Best,

Adam


maskinarbeten pro premium answered a year ago

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

Hi

In my table header i have this

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

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 a year 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.

https://mdbootstrap.com/snippets/jquery/mikolaj-smolenski/887952

Best regards


Please insert min. 20 characters.
Status

Answered

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