Sending form data to DataTables ajax call

Question

I'm using the jQuery plugin "DataTables" to display data from my database. I have successfully configured it to make an ajax call to a PHP script that returns JSON encoded data. That all works fine and the table displays correctly.

The problem I'm running into is that I want the user to be able to fill in a form with additional search criteria. Once the user hits a submit button it would then need reload the DataTables and instead of just making an ajax call to a PHP file it would need to send the form data to the PHP file as well. That way I can use logic to return the correct JSON response.

So there are 2 issues:

How to pass form data in the ajax call
How to reload table on #narrowSearch click event

Wondering if anyone knows how to do this?

jQuery:

$(document).ready(function() {
    $('#table').DataTable( {
        ajax: {
            //////////////////////////////////////////////////////////////////////
            //need a way to pass #zipRefine and #milesFromZip to index-process.php
            //////////////////////////////////////////////////////////////////////
            url: 'index-process.php',
            dataSrc: ''
        },
        columns: [
            { data: 'First Name' },
            { data: 'Last Name' },
            { data: 'City' },
            { data: 'Email' }

        ]
    });
});

HTML:

<input type="text" name="zipRefine" id="zipRefine"/>
<input type="text" name="milesFromZip" id="milesFromZip"/>
<input type="submit" id="narrowSearch" value="Search By Zip Code"/>

<table id="table" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Email</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>City</th>
            <th>Email</th>
        </tr>
    </tfoot>
</table>

PHP index-process.php:

if(isset($_POST['zipRefine']) && isset($_POST['milesFromZip'])){
     $refinedData = array("First Name"=>"","Last Name"=>"","City"=>"","Email"=>"");
     ///query refined set of data
     echo json_encode($refinedData);
}else{
     $defaultData = array("First Name"=>"","Last Name"=>"","City"=>"","Email"=>"");
     ////query default set of data
     echo json_encode($defaultData);
}

Does this answer your question? How to send form data along with jQuery DataTables data in server-side processing mode — tripleee
– tripleee, Commented Mar 23, 2023 at 5:15

Community · Accepted Answer · 2017-05-23 12:18:19Z

2

this worked for me https://stackoverflow.com/a/38908085/1231402

also to reload table this: oTable.ajax.reload(); is the working script

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Oct 21, 2016 at 18:43

Austin

1,6277 gold badges26 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tyler2P · Accepted Answer · 2022-11-21 16:10:00Z

0

I know it's an old post, but I was able to pass a formdata to my controller with a jQuery ajax call using datatables. You need to configure your own ajax call :

$('#table').DataTable({
  ajax: function (data, callback, settings) {
    $.ajax({
      url: 'your-url',
      method: 'POST',
      data: new FormData($('form[name="my-form"]')[0]),
      processData: false,   // !important
      contentType: false,   // !important
    })
    .done(function(data) {
      callback(data);
    })
    .fail(function() {

    })
    .always(function() {

    });
  },
  ...
});

The callback(data) will handle your data but this data needs to be an object named data because you can not use the dataSrc.

Example :

{
  "data": [{
    "id": "1",
    "name": "Tiger Nixon",
  }]
}

Hope it can help :)

edited Nov 21, 2022 at 16:10

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Nov 18, 2022 at 21:44

Hugh

11 bronze badge

Comments

markpsmith · Accepted Answer · 2016-10-21 14:45:08Z

Use the ajax.data option to pass additional parameters in the datatables request:

var oTable = $('#table').DataTable( {
   'serverSide': true,
    'ajax': {
        url: 'index-process.php',
        "data": function (d) {
            return $.extend({}, d, {
                "zipRefine": $('#zipRefine').val(),
                "milesFromZip": $('#milesFromZip').val()
            });
        }
    },
   'columns': [
        { data: 'First Name' },
        { data: 'Last Name' },
        { data: 'City' },
        { data: 'Email' }

    ]
});

The custom parameters can be accessed in the server-side code in the same way as the standard datatable parameter. Note I have added 'serverSide': true to the initialisation code to ensure that these paramaters do get sent.

To reload the table, you simply call draw in the click event, assuming that oTable is in scope:

$('#narrowSearch').click(function () {
    oTable.draw();
}

Collectives™ on Stack Overflow

Sending form data to DataTables ajax call

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related