Post datatable data to server in JSON format with column names?

proecil

Hi there,

I'm trying to post datatable data to server through ajax call like this:

//Ajax call function

function formAjaxCall(form, dataTable){

    var form = $(form);
    var data = form.serializeArray();
    if(dataTable) data.push({'name': 'dataTable', 'value': dataTable.fnGetData()});

    $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: { data: data },
        dataType: 'json',
        success: function(response){
            alert(response.message);
        }
    });

}

//Form and datatable sent to server:

data[0][name]:some_textField
data[0][value]:some_value
data[1][name]:dataTable
data[1][value][0][]:18
data[1][value][0][]:Jordan boots
data[1][value][0][]:4716659293521
data[1][value][0][]:Nike
data[2][value][0][]:15
data[2][value][0][]:Computer speakers
data[2][value][0][]:4736669294820
data[2][value][0][]:Logitech

It's OK, but I need to send this data in a JSON format including column names to catch them in a php function:

['datatable': {'id': 18, 'name': 'Jordan boots', 'ean': '4716659293521', 'brand': 'Nike'},

{'id': 15, 'name': ..........}];

Any help will be appreciated.
Thank you in advanced :)

allan

Have a look at the ajax.data documentation. It has an example showing how to send data in a JSON format. To send column names, define the names using columns.name.

Allan

proecil

Thank you so much Allan.

how can I trigger datatable ajax call to save data?

This is actually my code:

HTML

<form ....>
   <table id="stockTable">
           -----------------------
               Some rows
           -----------------------
   </table>
   <input type="submit" name="saveData" id="saveData" value="Save">
</form>

JS

var oTable = $('#stockTable').dataTable({
    "columns": [
        { "name": "id", "width": "5%" },
        { "name": "name", "width": "25%" },
        { "name": "ean", "width": "15%" },
        { "name": "supplier", "width": "5%" },
    ],
    "ajax": {
        "contentType": "application/json",
            "url": "/controller/stock/save", // PHP function will save data
        "data": function ( d ) {
                  return JSON.stringify( d );
            }
    }
});

Is it possible to send data to server on custom javascript ajax call?

Sorry for my rookie questions :/

allan

You have input elements in the table? DataTables won't submit those values - you would need to do that yourself if that is what you wanted since DataTables doesn't know anything about them. Have a look at this example.

Allan

proecil

Hello again Allan,

Exactly, my table hasn't input elements. This is my table format:

<table id="stockTable">
   <thead>
    <tr>
        <th class="no-sort">ID</th>
        <th class="no-sort">Name</th>
        <th class="no-sort">EAN/th>
        <th class="no-sort">Supplier</th>
       </tr>
   </thead>
   <tbody>
       <tr>
         <td>18</td>
         <td>Jordan boots</td>
         <td>12345678901234</td>
         <td>Nike</td>
      </tr>
   </tbody>
</table>

Just want send data to server in json format with column names as index:

['stockTable': {'ID': 18, 'Name': 'Jordan boots', 'EAN': '4716659293521', 'Supplier': 'Nike'}]

Thank you so much Allan.

allan

Exactly, my table hasn't input elements

Has or hasn't? Your HTML doesn't have input elements.

If you want to get the data form the table use data() and you can then send that to the server.

columns.data can be used to create JSON objects from an HTML table data source.

Allan