How to get the current page from mRender function ?

ikharus

First of all, "bravo" for this incredible jQuery plug-in! The result is beautiful.

Now, I feel like it is a dumb question but I'm not able to find the way to do this.

I need the current size and page in the mRender function of a column. I want to be able to have variables like these:

[code]
var size = oSettings._iDisplayLength;
var page = Math.ceil(oSettings._iDisplayStart / size) + 1;
[/code]

into:

[code]
"mRender": function (data, type, full) {
var size = ... the current size ...
var page = ... the current page ...
...
}
[/code]

Thanks for your time...!

allan

Frustratingly, I don't this is is actually possible to do this at the moment with DataTables. Normally what you should be able to do is use this API method: http://datatables.net/plug-ins/api#fnPagingInfo and that should be callable inside the mRender function, but DataTables isn't executing the function inside the scope of the DataTables instance.

I've just taken a look at what would be needed to make the change to fix that and its actually not particularly trivial as it might lead to backwards compatibility issues :-(.

One thing I would say however, is that mRender is only called once, it actually probably isn't much use to you if you want to base a calculation on paging info since, if the paging commands change, mRender won't be called again. It might be that you want to use fnRowCallback, which is called every time a row is displayed and the fnPagingInfo plug-in would be available ( this.fnPagingInfo() ).

Allan

ikharus

Thanks for the answer!!

I'm not sure I understand why you said that the mRender function is only called once. I'm using the 'Server-side processing' feature, maybe it is why for me, the mRender function seems to be called on every page ??

I'm currently working on a Spring MVC project that I started using Spring Roo. I replaced the grid generated by Spring Roo (which is non-sortable) by the DataTables grid, which is compatible with Twitter Bootstrap (following a tutorial). Long story short, the grid generated by Spring Roo has as its last column a tool box for each row, which provide the ability to show the row in another window, to update the row and to delete it (through 3 little buttons). Using the mRender function, I was able to implement that almost completely (this is why I think the mRender function is called for each page because I have a reference on the data being displayed in the row. Here's how I implemented this (I'll try to isolate the useful information from my code):

[code]
...
"aoColumns":[
{"mData":"id",
"sClass": "utilbox",
"mRender": function (data, type, full) {
var str = '<!-- Required Comment -->';
str = str + '<!-- Required Comment -->';
str = str + '';
return str;
}
]
...
[/code]

This works well. However, when I delete an item, the controller returns to the grid after the deletion and the current page (and page size) is lost (it returns to the first page). I would like to be able to place hidden input fields into the delete form with the paging information so that I could initialize the current page and size using the iDisplayLength and iDisplayStart options when the page is reloaded.

Sorry for the long message! Do you see a way of doing this ?? Using the fnRowCallback seems fine for the paging info, but this time it is the data that I have trouble to retrieve.

As an apology, I'll post here my modified version of the fnFilterOnReturn plug-in that I called fnFilterOnReturnOrSubmit. It:

- takes the label of the "search" input field and remove the colon, so internationalization is managed (I speak french).
- structures the "search" area in a way that the twitter bootstrap style can be applied. (See Search forms: http://twitter.github.com/bootstrap/base-css.html#forms)
- removes the "on typing, do search" in favor of "on enter pressed, do search" (required in my case to avoid excessive server calls).
- add a button with the previously retrieve input label that will also execute the search.

The result is very pretty with twitter bootstrap. See the result here:
http://postimage.org/image/61heen5p1/

Maybe someone could modify (validate) my code (since mine is linked with twitter bootstrap) to offer to others the search button ?

Here it is
[code]
jQuery.fn.dataTableExt.oApi.fnFilterOnReturnOrSubmit = function (oSettings) {
var _that = this;

this.each(function (i) {
$.fn.dataTableExt.iApiIndex = i;
var $this = this;

var sSearchLabel = $('label', _that.fnSettings().aanFeatures.f).contents()
.filter(function() {
return this.nodeType === 3; //Node.TEXT_NODE
}).text().replace(':', '');

var anControl = $('input', _that.fnSettings().aanFeatures.f);
anControl
.wrap('')
.addClass('input-medium search-query')
.after('' + sSearchLabel + '')
.unbind('keyup').bind('keypress', function (e) {
if (e.which == 13) {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
}
});

$('.dataTables_filter')
.addClass('form-search')
.find('label')
.replaceWith($('div.input-append'));

$('.dataTables_filter button')
.bind('click', function (e) {
$.fn.dataTableExt.iApiIndex = i;
_that.fnFilter(anControl.val());
});

return this;
});
return this;
};
[/code]

allan

> 'Server-side processing' feature, maybe it is why for me, the mRender function seems to be called on every page ??

Ah - in that case yes, mRender is called on every page, since server-side processing requires new data to be added to the table for every draw :-)

> However, when I delete an item, the controller returns to the grid after the deletion and the current page (and page size) is lost (it returns to the first page)

As in this action causes a refresh? Perhaps state saving ( bStateSave ) might be a suitable option?

> fnFilterOnReturnOrSubmit

Thanks very much for sharing this with us. I'm sure plenty of others will find it very useful!

Allan

ikharus

Wow. haha!! It was that simple (the bStateSave).

Considering that my little 4 years old kid just bought 2 new car models without knowing it in a game while playing with my tablet, your help definitely deserves a donation!!!!!

Making a donation to you probably saved me from a loaded credit card bill!!! I realized what my son was doing by consulting my paypal account in order to make a donation.

Thanks!

Simon

allan

Haha! Thanks very much for the donation - its a real boon to the DataTables project to have such support!

Time to go hide that tablet ;-)

Regards,
Allan