Custom modal form via server side ajax call

delay

I really like DataTables! I am now trying to incorporate the editor. I have a summary of the data for each row in datatables. I then want to use my own modal which retrieves a detailed record from the server for that record. Is there an example that shows how to incorporate your own modal instead of using the data from datatables to fill the default modal? Basically I need to only pass the record id which I have in a hidden column to call my modal. Then once the update is complete and the modal closes is there a way to update datatables manually or do you need to just reload all the data from the server?

Thanks for any help or tips...

allan

There isn't an example as such, partly because there are a lot of different ways of doing what you are looking for I think. How do you want to trigger the modal to show? Click on the row? If so, then you could use fnGetData to get the data for the row and pull the ID from there, assuming it is in there. Or if a TableTOols button then assign fnClick to get the selected row's data and again plug that into your modal.

> is there a way to update datatables manually or do you need to just reload all the data from the server?

With server-side processing, just call fnDraw, if you are using client-side processing then use fnUpdate to update a row.

Allan

delay

Thanks for the tips Allan! That was exactly what I was looking for!

Below is the code I am using in case anyone else needs something similar.

[code]
$(document).ready(function() {
oTable = $('#example').dataTable();
} );
[/code]

add some code for when a row is clicked:

[code] $('#example').on('click', 'tr', function (e) {

e.preventDefault();
var data = oTable.fnGetData(this); //data for selected record
var rowPosition = oTable.fnGetPosition( this ); //position of record in table
//alert(data[0]); //id of record in my case
//my custom modal code

//after submitting form I then just call this to update the row...
oTable.fnUpdate( ['id', 'name', 'email', 'phone_styled', 'phone_raw'], rowPosition); // insert new data in row.

} );
[/code]