Passing Array to DataTables via aoData Parameter

October 6th, 2012 - Posted by Steve Marks to Javascript / jQuery, PHP, Web Development.

With jQuery plug-in DataTables, you can quickly and easily draw fully functional datagrids. One of the features avalable is being able to generate the data server-side by passing parameters to a script via AJAX.

A simple example of this can be found below:

var oTable = $('#example').dataTable({
	"bServerSide": true,
	"bProcessing": true,
	"sAjaxSource": "/ajax/get_data.php",
	"fnServerParams": function ( aoData ) 
	{
		aoData.push( { "name": "first_variable", "value": "xxx" } );
		aoData.push( { "name": "second_variable", "value": "yyy" } );
	}
});

What if we want to pass an array of values however to the server-side script? Allow me to demonstrate by modifying the script above:

var oTable = $('#example').dataTable({
	"bServerSide": true,
	"bProcessing": true,
	"sAjaxSource": "/ajax/get_data.php",
	"fnServerParams": function ( aoData ) 
	{
		aoData.push( { "name": "first_variable", "value": "xxx" } );
		aoData.push( { "name": "second_variable", "value": "yyy" } );
		aoData.push( { "name": "my_array[]", "value": "element_one" } );
		aoData.push( { "name": "my_array[]", "value": "element_two" } );
	}
});

Now we can simply reference this variable as we normally would when sent via a POST or GET request.

This entry was posted on Saturday, October 6th, 2012 at 2:22 pm by +Steve Marks and is filed under Javascript / jQuery, PHP, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (2)
  1. Walter says:

    Tks,

    this post helped me !!!

  2. adalberto says:

    Many Thanks for it.