How to save dataTable content to database using ajax and php?

eloginko

I was wondering if someone can help me provide an example on how to save dataTable content to database using ajax and php?

I've been looking for tutorials for it but i only found is how to show data from database to dataTable.

larsonator

Your question is a little vague.

are you trying to nap information from a random data table on the net?

or are you talking about a method to insert new records into the database and display them on your data table?

eloginko

@larsonator yea insert new records into the database and display them on your data table?

larsonator

im not 100% sure if dataTables has an extension or plugin for data input, but it would probably be a lot simpler to keep that task separate from your table all together.

There are many ways for it, my preferred way is to use a menu under the table (Add, Update, Delete... what ever else needs doing). Its not part of the table, its just there to group the actions with that table.

Id use some form of dialog to display the form, like a jQuery ui dialog, or Bootstrap Modal.

On submittion of the form, have your javascript store the values of your form into a data object in the following format:

var mydata = { firstname: 'john', lastname: 'smith', age: '23', gender: 'male' };

you can then use jQueries $.ajax function to send the data to your receiving function.

http://api.jquery.com/jquery.ajax/

$.ajax({
url: "yoursite.com/yourRecievingPhpScript",
datatype: 'JSON',
type: 'POST', //you can also use GET,
data: mydata, //Notice here i have given the mydata object from above.
success: myCallbackFunction, //this function will be called when the php script finishes
});

this will send mydata object as POST parameters or query string parameters depending on your settings.
you can access them from php like so:

$name = _POST['name'] ect.

its good practice to send a response to your call back functions like so:
echo json_encode(array('status'=>"Success", message=""));

then your call back function:
data will container what ever has been sent back from the php file. since we sent back a json string, we can make an object of it like so:

var myCallbackFunction = function(data){
var d = $.parseJSON(data)[0];
if(d.Status=="Success"){
//reload your datatable ajax
}else{
alert(d.message);
}
}

i hope that helped

eloginko

@larsonator i have a dataTable example of what i want in a jsfiddle. Im having trouble passing the table content of dataTable to ajax.

my jsfiddle example:

http://jsfiddle.net/4GP2h/131/

larsonator

you mean when the item is added to the table you also want it added to the database?

chico3001

I had the same problem and just resolve it using the following code:

$('#table').dataTable({
    "ajax": test.php'
});


$("button").click(function(event) {
    event.preventDefault();
    $.post(
            "test.php",
            {name: "John",
                time: "2pm"})
            .done(function(data) {
                $('#table').DataTable().ajax.reload();
            });
});

larsonator

@chico3001 has the right idea there.