checkbox in datatables ajax

Topic: checkbox in datatables ajax

maskinarbeten premium asked 4 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

Add comment

maskinarbeten premium answered 4 years ago

0 0 Best answer

Please insert min. 20 characters.

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

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 4 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.

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

Best regards

Add comment

Adam Jakubowski staff answered 4 years ago