I actually found fnReloadAjax() function, but seems it just tries to reload data without taking current sort/page/filter options, so there are no "get" parameters added ajax url.
Perhaps you could be a little bit more specific about what you want to do. If you want to reload the entire table every now and then, then fnReloadAjax() is the way to go. It will go to the server, and just grab everything again.
If you want to load only the data that should be displayed, then you need to use the bServerSide parameter, and have the server reply to your request, taking into account, filtering etc.
Sorry my poor comment, Allan.
Yes, i want to give user ability to reload entire table data, while keeping table state - current sort/filter/page parameters. I tried fnReloadAjax() but seems, it uses only "sAjaxSource" property (without adding state variables, like paging etc..), so request look like "server/data_source_url" without "get" parameters.
I found that functions fnDraw, fnDeleteRow cause data reloading with "get" parameters in server side mode, so request look like "server/data_source_url?iColumns=10&..." - is what i need. Is this correct way to reload data ?
I think fnReloadAjax actually takes care of this already. When it calls 'fnDraw()' that will sort and filter your new data as required. I've just tried this and it works for me (although I have spotted a bug in the filtering information in 1.5 beta 4...).
Hey, i got a similar problem aswell. Just started working with this awesome plugin today, wow allan, good work btw :D, and i got some existing jquery script for my table which deletes rows.
My question is, can i refresh the table, not reload it from the server. My script removes some rows but datatables doesnt realize and still says (7 of 7 entries) even if there are now less. Sure I could use fnRemoveRow but that would mean some coderewriting in my existing scripts and i would prefer just to call a function to let datatables reevaluate the given table.
Is there a possibility or what is the way to go?
EDIT
Just tried it with fnDraw() but it doesnt work ... well maybe i did it wrong. I declared var oTable; at the very beginning of my script, filled it with the datatable object in document.ready and called it in my delete row function after removing the row with .remove();
$(this).parent().parent().fadeOut("slow", function () { <--- selects the TR
$(this).remove(); <--- should remove it? but doesnt?
oTable.fnDraw(); <--- should redraw
});
still same problem with the count ... but i think the remove() isnt working properly, it doesnt remove the TR, maybe i should select it differently, any ideas ? ... but the fading works, thats strange
Okay, having tried around for about 2hrs now, i found out what went wrong.
- You can't remove a TR row with .remove() when you use dataTables!
So you HAVE to use fnDeleteRow()
For that, you have to find out the ID of the row, you can do this by fnGetPosition(this);
PROBLEM: Say you clicked a link in your table which should now delete the whole row, you first have to select the TR to pass it into fnGetPosition, but you cant pass a JQuery object (e.g. $(this).parents("TR") ), you have to pass a nNode which causes a problem i cant solve, but luckily i wanted to use a fadeOut before removing, so i can pass the nNode with:
$(this).parents("TR").fadeOut("slow", function () {
var pos = oTable.fnGetPosition(this);
oTable.fnDeleteRow(pos);
});
Questions:
- why is .remove() blocked ?
- how to get a nNode when i just have a JQuery object to pass it into fnGetPosition();?
New to the forums and as others have said, congrats on an excellent plug-in!
I'm trying to do a similar thing. I have a table of data loaded. I want the user to go through and enter values in whatever rows they want and on a button click I want to remove all unchanged rows and just show those they have changed before confirming and submitting the data. I can use fnDeleteRow ok and redraw the table to only show what is left, however I would like the option of cancelling at that point and redisplaying the original table with the amended records still with their amended data showing. Is this possible?
@rootman - Deleting rows from DataTables is done through the fnDeleteRow() API function as you have noted. The reason for this is that DataTables caches information about individual rows in order to provide it's various features. This information must be deleted for DataTables to no longer use that row. It might be possible to put a watch on the DOM to catch delete events, but this is really not cross platform, and doesn't allow rows hidden by pagination to be deleted (should someone want to do that...).
What you could do is to create a custom API function which will take a node and then locate it from the internal structure (aoData[].nTr) and delete that row entry. With regard to your jQuery object, remember that this object is just an array of nodes (with a whole load of extra parameters), so you could do something like: if $('#example tr:eq(0)')[0] == aoData[i].nTr ) (obviously not generic, but hopefully you get the idea!).
[code]
if ( confirm( 'Are you sure you wish to delete these rows?' ) )
{
/* do the delete */
}
[/code]
If you don't want a standard confirm(), you could try my Alert library: http://www.sprymedia.co.uk/article/Alert+-+Javascript+dialogue+controls . I believe jQuery UI now has something similar as well.
I have potentially 10-20 pages of records that the user will work through, maybe selecting only 1 from each page. I want to click a review button and then have only the records they have changed listed so they can either review them and submit them or hit a reset button and revert back to the full table without losing the values they have already entered. Does that make sense? :-)
What you need to do then is maintain the original state, so you can check against it to see if anything has changed. This isn't something that DataTables will do for you, and how you approach it is dependant on the application. What you could do is clone DataTables aoData ( var old = oTable.fnSettings.aoData.slice() ) and then when the review button is pressed you can check through the old aoData and compare it to the new aoData and see what has changed (this method is probbaly best for using something like jEditable).
If you are using checkboxes, or any other kind of permanently visible input (textboxes etc) for your user input data, you might have to approach it slightly differently. Before they start editing, you will need to save the state of the current check boxes (I presume you could just create an array of the table's length with '0' as the values), and then when the review button is pressed, get all of the checkbox values again ( fnGetNodes() ) and compare it to the original information.
I am using V1.6.2 and had been experiencing the same problem, I found a dirty little hack the will fix your problem although this is over a year later I expect you have moved on. For anyone else that comes across this issue here is my case and fix:
Problem:
A timer is set to refresh the table data using the fnReloadAjax call every 10 seconds. The idea is to have the table state be reloaded using the normal bStateSave option. There is a small bug/feature ^_^ that will reload the filter when the table is redrawn. The _fnFilterComplete function is smart enough to shrink the list down to a single page if multiple pages are not required, in this way you won't be stuck on a blank page.
The problem is that the filter is applied to when fnReloadAjax is called and oSettings._iDisplayStart is set to 0, this intern will move your page back to the first page when some other functions execute. To prevent this you can comment out the following line:
Line 3031:
[code]
/* Redraw the table */
//oSettings._iDisplayStart = 0;
_fnCalculateEnd( oSettings );
_fnDraw( oSettings );
[/code]
This way your page state will be held when fnReloadAjax is ran and wallah.
The down fall is that if you have a filter applied, you may end up being stuck on a blank page and be forced to click back on page one.
Allan, I am not sure if there is a better way to do this but it was the only fix I could find.
For those of you looking to do the auto refresh, very easy:
Be sure to build sure to add the event, see Plugins, API, and fnReloadAjax.
Allan, I would very much like to hear your input on this as I do not really want to hack your code up and break stuff :P Please let me know if you have a better way.
alexan's reply should be the only one in this thread because its exactly what people want when refreshing a serverSide datasoure while maintaining all filter/search/pagination defs. Looking into fnAjaxReload() makes things more complicated than it should be...
I am not sure if this will be useful to anyone, but the following page has an alternative version of fnAjaxUpdate which will only update the individual cells that change. http://www.fluidlabs.com.au/datatables-api-fnreloadajax/
I found this useful as it would not mess with embedded ui controls such as combo box, if the user happened to have it selected when there was a refresh.
Replies
Is this a bug or i'm doing something wrong.
Perhaps you could be a little bit more specific about what you want to do. If you want to reload the entire table every now and then, then fnReloadAjax() is the way to go. It will go to the server, and just grab everything again.
If you want to load only the data that should be displayed, then you need to use the bServerSide parameter, and have the server reply to your request, taking into account, filtering etc.
Allan
Yes, i want to give user ability to reload entire table data, while keeping table state - current sort/filter/page parameters. I tried fnReloadAjax() but seems, it uses only "sAjaxSource" property (without adding state variables, like paging etc..), so request look like "server/data_source_url" without "get" parameters.
I found that functions fnDraw, fnDeleteRow cause data reloading with "get" parameters in server side mode, so request look like "server/data_source_url?iColumns=10&..." - is what i need. Is this correct way to reload data ?
Allan
My question is, can i refresh the table, not reload it from the server. My script removes some rows but datatables doesnt realize and still says (7 of 7 entries) even if there are now less. Sure I could use fnRemoveRow but that would mean some coderewriting in my existing scripts and i would prefer just to call a function to let datatables reevaluate the given table.
Is there a possibility or what is the way to go?
EDIT
Just tried it with fnDraw() but it doesnt work ... well maybe i did it wrong. I declared var oTable; at the very beginning of my script, filled it with the datatable object in document.ready and called it in my delete row function after removing the row with .remove();
$(this).parent().parent().fadeOut("slow", function () { <--- selects the TR
$(this).remove(); <--- should remove it? but doesnt?
oTable.fnDraw(); <--- should redraw
});
still same problem with the count ... but i think the remove() isnt working properly, it doesnt remove the TR, maybe i should select it differently, any ideas ? ... but the fading works, thats strange
greetings
Tim
- You can't remove a TR row with .remove() when you use dataTables!
So you HAVE to use fnDeleteRow()
For that, you have to find out the ID of the row, you can do this by fnGetPosition(this);
PROBLEM: Say you clicked a link in your table which should now delete the whole row, you first have to select the TR to pass it into fnGetPosition, but you cant pass a JQuery object (e.g. $(this).parents("TR") ), you have to pass a nNode which causes a problem i cant solve, but luckily i wanted to use a fadeOut before removing, so i can pass the nNode with:
$(this).parents("TR").fadeOut("slow", function () {
var pos = oTable.fnGetPosition(this);
oTable.fnDeleteRow(pos);
});
Questions:
- why is .remove() blocked ?
- how to get a nNode when i just have a JQuery object to pass it into fnGetPosition();?
greetings
Tim
New to the forums and as others have said, congrats on an excellent plug-in!
I'm trying to do a similar thing. I have a table of data loaded. I want the user to go through and enter values in whatever rows they want and on a button click I want to remove all unchanged rows and just show those they have changed before confirming and submitting the data. I can use fnDeleteRow ok and redraw the table to only show what is left, however I would like the option of cancelling at that point and redisplaying the original table with the amended records still with their amended data showing. Is this possible?
Cheers
Andy
What you could do is to create a custom API function which will take a node and then locate it from the internal structure (aoData[].nTr) and delete that row entry. With regard to your jQuery object, remember that this object is just an array of nodes (with a whole load of extra parameters), so you could do something like: if $('#example tr:eq(0)')[0] == aoData[i].nTr ) (obviously not generic, but hopefully you get the idea!).
Hope this helps,
Allan
[code]
if ( confirm( 'Are you sure you wish to delete these rows?' ) )
{
/* do the delete */
}
[/code]
If you don't want a standard confirm(), you could try my Alert library: http://www.sprymedia.co.uk/article/Alert+-+Javascript+dialogue+controls . I believe jQuery UI now has something similar as well.
Allan
Andy
If you are using checkboxes, or any other kind of permanently visible input (textboxes etc) for your user input data, you might have to approach it slightly differently. Before they start editing, you will need to save the state of the current check boxes (I presume you could just create an array of the table's length with '0' as the values), and then when the review button is pressed, get all of the checkbox values again ( fnGetNodes() ) and compare it to the original information.
How does that sound?
Allan
$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings)
{
//oSettings.sAjaxSource = sNewSource;
this.fnClearTable(this);
this.oApi._fnProcessingDisplay(oSettings, true );
var that = this;
$.getJSON(oSettings.sAjaxSource, null, function(json){
/* Got the data - add it to the table */
for (var i=0; i
I am using V1.6.2 and had been experiencing the same problem, I found a dirty little hack the will fix your problem although this is over a year later I expect you have moved on. For anyone else that comes across this issue here is my case and fix:
Problem:
A timer is set to refresh the table data using the fnReloadAjax call every 10 seconds. The idea is to have the table state be reloaded using the normal bStateSave option. There is a small bug/feature ^_^ that will reload the filter when the table is redrawn. The _fnFilterComplete function is smart enough to shrink the list down to a single page if multiple pages are not required, in this way you won't be stuck on a blank page.
The problem is that the filter is applied to when fnReloadAjax is called and oSettings._iDisplayStart is set to 0, this intern will move your page back to the first page when some other functions execute. To prevent this you can comment out the following line:
Line 3031:
[code]
/* Redraw the table */
//oSettings._iDisplayStart = 0;
_fnCalculateEnd( oSettings );
_fnDraw( oSettings );
[/code]
This way your page state will be held when fnReloadAjax is ran and wallah.
The down fall is that if you have a filter applied, you may end up being stuck on a blank page and be forced to click back on page one.
Allan, I am not sure if there is a better way to do this but it was the only fix I could find.
For those of you looking to do the auto refresh, very easy:
[code]
$('#something').everyTime(10000, function() {
oTable.fnReloadAjax(oTable.fnSettings());
});
[/code]
Be sure to build sure to add the event, see Plugins, API, and fnReloadAjax.
Allan, I would very much like to hear your input on this as I do not really want to hack your code up and break stuff :P Please let me know if you have a better way.
[code]oTable.fnDraw(false)[/code]
[code]
(function($, window, document) {
if ( typeof $.fn.dataTable == "function" &&
typeof $.fn.dataTableExt.fnVersionCheck == "function" &&
$.fn.dataTableExt.fnVersionCheck('1.7.0') )
{
$.fn.dataTableExt.oApi.fnReloadAjax = function(oSettings, oUrl, oData)
{
if (oUrl)
oSettings.sAjaxSource=oUrl;
//oSettings.sAjaxSource = sNewSource;
this.fnClearTable(this);
this.oApi._fnProcessingDisplay(oSettings, true );
var that = this;
$.getJSON(oSettings.sAjaxSource, oData, function(json){
/* Got the data - add it to the table */
for (var i=0; i
Marc
I found this useful as it would not mess with embedded ui controls such as combo box, if the user happened to have it selected when there was a refresh.
Nick.
oTable.fnDraw(false);
- i made a new js file (copy-paste the solution)
- Then i used fnReloadAjax() with both button click and .$ajax success function
$("#Button1").click(function(){
oTable.fnReloadAjax();
});
-Quite nice!
Thanks to Isopropil
We'd better to think to close this topic:)