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 $() method can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() 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.

If you are interested in a complete CRUD editing suit for DataTables have a look at the Editor extension which provides simple setup and complete integration with DataTables.

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

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

Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function() {
    var table = $('#example').DataTable({
        columnDefs: [{
            orderable: false,
            targets: [1,2,3]
        }]
    });
 
    $('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:

Other examples

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

Please refer to the DataTables documentation for full information about its API properties and methods.
Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

DataTables designed and created by SpryMedia Ltd © 2007-2020
DataTables is licensed under the MIT license.