Adding a new row with server-sided data

kstover

Hello, first I'd like to say that this is an amazing plugin. I'm currently working on an implementation that pulls data from a server, using php and mySql. I have it populating the data properly: searching works, sorting, pagination, etc. The issue I have is that I can't get the fnAddData() or fnDeleteRow() functions to work. All I can figure is that it isn't working because the table is being populated by the plugin at runtime. Is there any special code used to add a row to a server-sided table? Do I need to add it to the db first, then refresh the table?

Thank you very much for your time and your amazing plugin. I have quite a bit of experience with PHP, so if anyone needs help with it, you can send me an email kstover[a t]gmail[d ot] com, and I'll try and help.

allan

Hi kstover,

Just to confirm - are you using server-side processing (where the server-side will do the processing for sorting/filtering etc on each reflow of the table), or are you just loading the data initially from the server, but having the client-side do all the 'heavy lifting'?

If you are using server-side processing (which it sounds like you are), then many of the API functions that DataTables presents by default are more or less useless, since all the processing is done on the server-side. For example to add a row, you need to do it on the server, and then redraw the table, otherwise the row that has been added will simply be lost on the next redraw (the server doesn't know about it).

Hope this helps, and thanks very much for your offer of PHP help to the community!

Regards,
Allan

kstover

Hey allan,

I am indeed using the server-sided processing for everything. The database will eventually become quite large and pushing all that sorting and filtering to the browser would slow things down quite a bit I fear. That was what I figured when I couldn't get it to add a row w/ the API, because the table doesn't actually exist when the document.ready is fired and things are defined. So, fnDraw() would do all the redrawing that I need? And would it maintain any filters/sorts/etc. that were currently applied to the table?

Thanks again for your amazing plugin. Keep up the good work.

- Kevin

allan

Hi Kevin,

Yes you are right - fnDraw() will send another request with the expect parameters to redraw the current page (taking into account filtering, sorting etc) and thus will add any new row which is present in the server-side. :-)

Regards,
Allan

kstover

Allan,

Thanks a lot for your help. That makes perfect sense. I just wanted to ask before I flailed around wildly for a solution :)

Thanks,
Kevin

kstover

This is way off topic, but do you know of any jQuery plugins that allow you to select irregular parts of an image for cropping/storing x,y coords? I have found plenty of options for rectangular selection, but nothing like a lasso tool that will let the user select any part of the image in a non-linear fashion.

allan

Hi kstover,

I'm afraid I'm not aware of any - but that's certainly not to say that they don't exist. Perhaps e-mailing the jQuery discussion list might yield better results :-)

Regards,
Allan

kstover

Allan,

Thanks for all your help, I appreciate it. I'm working on a project using DataTables, and so I'm sure I'll have some more questions :) I'm pretty new to Javascript.

Thanks again,
Kevin

kstover

Allan,

I have tried the fnDraw() function after adding my row in the backend but to no avail. I know that the php is adding a row, refreshing the page shows the new data. Here is a copy of my code, do you see where I'm messing up?

[code]
var oTable;
$(document).ready(function() {
oTable = $('#people').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "include/php/table_server.php",
"fnServerData": fnDataTablesPipeline
});
});

function fnClickAddRow() {
$.post("include/php/add_person.php", function(){ oTable.fnDraw();});
//oTable.fnDraw();
}
[/code]

allan

Hi kstover,

I suspect the problem is that your are using the pipelining! What will be happening is that the pipelining is caching the original result, and then you do an fnDraw() which requests the data which has already been cached... Therefore your new data isn't actually pulled from the server. What you need to do is force the pipelining to go and get the new data from the server, probably simply by clearing the current cache.

Regards,
Allan

cloudranger

I've been struggling for days to sort out refreshing my table using server side processing and fnDraw was having no effect.

I figured it out before I found the comments above by allan.
I too had pipelining on, so fnDraw was just going back to the pipeline cache and not triggering a json call (database re-read)

I fixed mine by adding the following function into the standard pipelining code taken from this website:
[code]
function fnInvalidateCache() {
oCache.iCacheLower = -1;
}
[/code]

Then just before I did the fnDraw, I invalidated the cache like this:
[code]
fnInvalidateCache();
$dialog.fnDraw();
[/code]
Works like a dream for me, though obviously you lose your cache and it is therefore not the solution if you have built up an enormous amount of cache data or have to do this frequently, but in my case (with infrequent updates) there was no sense in adding anything more complicated to patch up the cache with changes (which someone else has already documented on this site anyway).