DataTables example Form inputs

In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little bit of additional work to get the information that is not in the document any longer.

The $()DT method can be used to get nodes from the document regardless of paging, ordering etc. This example shows $()DT being used to get all input elements from the table.

In the example a simple alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

NameAgePositionOffice
NameAgePositionOffice
Airi Satou
Angelica Ramos
Ashton Cox
Bradley Greer
Brenden Wagner
Brielle Williamson
Bruno Nash
Caesar Vance
Cara Stevens
Cedric Kelly
Showing 1 to 10 of 57 entries

The Javascript shown below is used to initialise the table shown in this example:

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
    var table = $('#example').DataTable();
 
    $('button').click( function() {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 0, 120 )+'...'
        );
        return false;
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example: