how can i add select, checkbox, radio buttons, and input filters on datatable columns????
how can I add select, checkbox, radio buttons, and input filters on datatable columns????
hi there,
I want to add select, checkbox, radio buttons, and input filters on datatable columns, please let me know how I can achieve this.
I want to add
- radio filter on the "gender" column.
- checkbox filter on the "user type" column (admin, editor, writer, reviewer, etc)
- select filter on the "status" column (predefined statuses (published, draft, private, etc)
- input filter on the "age" column (please also share how I can add the "number" input filed and "text" input field.
Thanks, waiting for your reply.
Replies (2)
To add custom select, checkbox, radio, and numeric input filters to Datatables, you need to use the initComplete API callback to target the column headers and append your custom HTML controls.
Here is how you handle the specific column input for the age column using custom JS column filtering:
JavaScript $('#kt_datatable').DataTable({ initComplete: function () { // Target the Age Column (e.g., column index 3) this.api().column(3).every(function () { var column = this; var input = $('') .appendTo($(column.header())) .on('keyup change clear', function () { if (column.search() !== this.value) { column.search(this.value).draw(); } }); }); } }); Testing UI Inputs: When implementing custom input fields or validating that dynamic form scripts handle pure numeric values properly without layout shifting, you can see now how a clean, lightweight JS utility processes input data without loading heavy framework dependencies. Testing your Datatable layout against simple input forms ensures your custom CSS wrappers render cleanly across mobile viewports.
Hi,
At the moment we do not have such an example but we will definitely consider adding it in a future update. In the meantime you can refer to the Datatable API examples on how to add inputs in data table columns.
Regards.
