jQuery Datatables adding custom form elements

Question

I have datatables setup with a basic init. I want to be able to have checkboxes and a submit button below the table. Is there any way to customize the information "row" below the table?

This is what it looks like if I just add the submit button after the table

This is what I want it to look like

I need a solution that accounts for Javascript being on or off.

Answer 1

Your requirement for a solution that accounts for Javascript being turned off is not possible because the information row is generated only when you initialize the DataTable.

The information row is wrapped in a div tag that gets its ID based off of the ID of the initialized table.

For example, if your table was declared like this:

<table id='myTable'> </table>

The information row would appear in your DOM as this

<div id='myTable_info' class='dataTables_info'> Showing 1 to 2 of 2 entries </div>

To prepend the 'delete' button to your information row, you need to use fnDrawCallback to include the button each time the table is rendered.

$("#myTable").dataTable(
     {
           "fnDrawCallback": function()
            {
                 $("#myTable_info").prepend("<input type='button' value='Remove'>");
            }
     }
);