How do I correctly identify the pages in the DataTable?
I am using DataTables .
I'm trying to do this: using one of the column values, enter the page number where that value is located.
I tried this: jumpToData () BUT it didn't work. The reason is that
var pos = this.column(column, { order: 'current' }).data().indexOf(data);
in jQuery.fn.dataTable.Api.register('page.jumpToData()'
returns a value> = 0 ONLY if I was placed on a page where the value was. For example, I want to define a page where it is needed, but I stay on a different page, so in order to define a value on the page ... I need to navigate to that page, and only then can I detect it, which it doesn't do at all.
What I need to do is, while staying on the pirst page, using the value from other pages, detect these page numbers and then navigate to them:
$('#Grid_grid').DataTable().page(PageNumber).draw(false);
How can i do this?
EDIT:
Got some idea (a few changes to jumpToData ()):
jQuery.fn.dataTable.Api.register('page.jumpToData()', function (data, column) {
for (var i = 0; i < this.page.info().pages; i++) {
var test = this.page(i).column(column, { order: 'current' }).data().indexOf(data);
if (test >= 0) {
this.page(i).draw(false);
return this;
}
}
return this;
});
(EDIT 2: The idea didn't pay off, no difference)
BUT now I have a second problem: None of the data manipulation methods work on the .cshtml page. For example, I need to get the total number of pages. I do this:
$('#Grid_grid').DataTable().page.info().pages;
and that will return me 0; Meanwhile, including it in the console (Chrome F12) works fine (returns 5). What's the matter?
EDIT 3: Came to this:
function LoadPage(value) {
var table = $('#Grid_grid').DataTable();
var pageNumber = table.search(value).page();
table.page(pageNumber).draw(false);
}
Looks promising, but I still can't test it because in the console the DataTable methods work, but in .cshtml no. (search () or page () returns nothing).
EDIT 4:
Moved issue to another question
source to share
CAUSE
Your new API method is page.jumpToData()
trying to request data from all pages because the second argument selector-modifier
to column()
API Method has a page: 'all'
default property . As written, it will always remain on the first page.
Decision
There is an original page.jumpToData()
plugin added by Allan Jardine, creator of DataTables. It works as intended and can be used in place of your modification to avoid unnecessary iterations.
$.fn.dataTable.Api.register('page.jumpToData()', function (data, column) {
var pos = this.column(column, {
order: 'current'
}).data().indexOf(data);
if (pos >= 0) {
var page = Math.floor(pos / this.page.info().length);
this.page(page).draw(false);
}
return this;
});
DEMO
See this jsFiddle for code and demo.
NOTES
In the demo above, I've added it console.log("Number of pages", table.page.info().pages);
just to demonstrate that the API method works. However, they might work because I have data retrieved from HTML.
If you have Ajax-sourced data, you only need to request the number of pages when the data is loaded. Use a parameter initComplete
to define a callback function that will be called when your table is fully initialized, loaded, and drawn.
source to share