I've been quite pleased with how remote pagination on Tabulator works with automatic ajax loading, but I can't seem to find a way to set the page that is displayed when the table is first loaded. table.setPage(pageNum) only works for me after the first page has been fetched and rendered; if I do something like
new Tabulator("#my-tabular-table", { lots of stuff }).setPage(5)
then I get a Pagination Error - Requested page is out of range of 1 - 1: because the page count hasn't been received from the server yet.
Is there some way of doing this? Am I missing something? I realize that I could hook into some callback and switch to the desired page immediately after the first page has been loaded, but I'd rather not wait for an extra server call.
You can use the paginationInitialPage option in the table definition to set the page number for the initial load:
var table = new Tabulator("#example-table", {
pagination:"remote", //enable remote pagination.
paginationInitialPage:2, // this option can take any positive integer value
});
Related
I'm writing a Primefaces 5.1 portlet.
It consists in a unique page containing a panelMenu, and I need that it starts with any panel collapsed everytime a user change page (on page loading).
But, if I open a panel, then change page, it will start showing that panel still opened.
I wasn't able to find any option to achieve this goal (e.g. collapsed=true, ignoreCookie=true or something similar).
The only solution I found was the following Javascript code:
PrimeFaces.widgets.myPanelMenu.collapseRootSubmenu(PrimeFaces.widgets.myPanelMenu.headers);
The problem is that this code will collapse any opened panel (so on page loading user is able to see panel menu collapsing animation) but it seems it doesn't store this state in its cookie/localstorage... the result is that on any page loading user can see this animation.
I'm sure it doesn't save its state, because the only way to "solve" the problem is to manually re-open and re-collapse the panels... then, on following page change, these menus start closed (and there is no animation).
I also tried to use PrimeFaces.widgets.sideMenuPanel.saveState() after collapsing, but with no success.
Do you have any idea about?
Thank you...
I found a solution to the problem.
If you read my discussion with Kukeltje (comments on my question), you will find that latest Primefaces' versions will solve the problem.
Otherwise, if you want to avoid upgrade or modify sources, and you need a quick fix based on Javascript only please read the following part of the answer.
It directly works on the component's state using JavaScript.
First of all you need to have a variable reference to your component:
<p:panelMenu model="#{menuBackingBean.menuModel}" widgetVar="sidePanelMenu" />
Then you should add the following JS code on document ready:
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
// following line is commented because it never should be necessary is not necessary (unless unexpected situation I never verified)
//clearSidePanelMenuPreferences();
// 2. Call the "clear preferences" actions on click on two tpe of links: first level are the panel link (used to open/close the menu) and second level are the destination links
// We need to fork also on the first level links to be sure it works after user clicks there then exit from the page in another way
panelMenu.headers.children("a").click(function(){setTimeout(clearSidePanelMenuPreferences, 500)}); // setTimeout is necessary because this event should be fired after preferences are written
panelMenu.headers.siblings().find("a").click(function(){clearSidePanelMenuPreferences();});
The function called to clear preferences are the following:
function clearSidePanelMenuPreferences() {
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState(); // store this information
}
Hope it helps
Please check this block of code
PF('myPanelMenu').headers.each(
function(){
var header = jQuery(this);
PF('myPanelMenu').collapseRootSubmenu(header);
header.removeClass('ui-state-hover');
}
);
I prefer to do this in order to execute this method only once and keep the menu option selected.
$(document).ready(function() {
if(location.pathname == "/cotizador/" || location.pathname == "/cotizador/faces/login.xhtml"){
var panelMenu = PrimeFaces.widgets.sidePanelMenu;
// 1. On page loading collapses possible opened panels
panelMenu.collapseRootSubmenu(panelMenu.headers);
panelMenu.expandedNodes = []; // clear the opened panels lists
panelMenu.saveState();
}
});
I have a tabbed panel containing different sections of a form. In one section, users are given the ability to add a child document to the currently open document. In a second section, they are given a listbox, where the options are dynamically generated (via #DbLookup) by looking at a view of all the child documents, filtered by the current document's ID. This functionality all works correctly, however, there is a problem with the dynamic listbox options.
When a user adds a new child document, then switches to the next tab, the listbox is not updated with this new document. If they save/re-edit the main document or refresh the page, it makes no different, the user must load another XPage before going back to the original in order for the listbox to update. I have tried to resolve this by doing full updates of the page, using session.evaluate and "NoCache" in the #DBLookup call, or calling database.getView("My view").refresh(), but without luck.
There is also a similar problem where I have a repeat control which uses a view of child documents (again filtered by main document ID) as a datasource. When a user adds a child document using a button, it partially refreshes the repeat - but doesn't show the new child document until the page is refreshed again (or you leave the page and return).
Is there something crucial I am missing with regards to the JSF lifecycle/the way that view data is cached?
As first measure I would add another formula item to the listbox which simply returns the current time (#Now() should work). That way you can check if the listbox options are refreshed on the update in the first place.
If the options are refreshed fine it's indeed clear that the #DbLookup does some caching, although I'm not aware of any default caching logic.
At least for a test I would change the code to use a NotesView object instead of the #DbLookup, something like this:
var nview = database.getView("someview");
var nc = nview.getAllEntriesByKey(currentDocument.getDocument().getUniversalID(), true);
var a = [];
var ve = nc.getFirstEntry();
while (ve) {
a.push(ve.getColumnValues().elementAt(0)); // value of first column
ve = nc.getNextEntry(ve);
}
return a;
(I wrote the code from memory, there may be syntax errors).
Since the code only works with view entries it should be equally fast than the #DbLookup. And you could even do a nview.refresh() if needed.
I am using YUI Pagination to show data. How can I populate the default 5th page of my table after updating record of 5th page. And I also need to populate the RowsPerPageDropdown value, used to decide how many records to show per page.
Is there a onChange event for YUI Pagination? Can anyone help me?
Assuming you are using: YAHOO.widget.Paginator
pageChange Event fired when attribute changes have
resulted in the calculated current page changing.
from: http://developer.yahoo.com/yui/docs/YAHOO.widget.Paginator.html#events
Used something like this:
var paginator = new YAHOO.widget.Paginator({
... options ...
});
paginator.subscribe('pageChange',function(){
... handle page change event ...
})
I am using the Telerik MVC grid, with Ajax data binding.
I would like to do 2 things with the Telerik MVC Grid:
When a row is selected, detect (client side) which page the grid is currently on as well as which row was selected.
The next time the grid is loaded (using ajax ... I never leave the page), page back to the same page to show the last select. (I guess I am really just asking if there is a way to immediately go to a page of the grid once the data is loaded, rather than page 1)
Please keep in mind, I am aware of the client side events already. I would like to know how to do #1 from the event, and #2 either from the client side or programatically somehow.
Edit/More Details: I think I know what I need to do here. Since I am using Ajax loading here, the Ajax POST is being called somewhere in the Telerik code. I can see that during that Ajax POST they are sending a "page" parameter to the controller. If I could edit that somehow, I am sure it would work - but I am having trouble changing that parameter.
Thanks in advance!
For the sake of anyone else looking for this, I figured it out:
Getting the current page of the Grid:
To do this, I use jQuery to determine which number has the "selected" style (t-state-active) to determine the current page number. Example (my grid id is 'cases-grid'):
function getCurrentGridPage() {
///<summary>Gets the current page of the #cases-grid</summary>
var page = $('#cases-grid .t-state-active');
if (page.length == 0) {
return 1; //default to page 1 when unknown
}
return page.text();
}
The second part of my question was actually well documented on the Telerik site ... I just missed it for awhile. To load the grid to a specific page (other than 1) I added the following to my grid:
.Pageable(pager => pager.PageTo(#Model.InitialPage))
And added the InitialPage property to my model.
I'm writing an extension to modify search results on my school's website adding more information to each returned result. However, when the search page executes a search and the search results are dynamically added to the page, elements added to the page by my extension are removed.
As a simple debug, I added a button next to the search button to click after the search happens, but the act of searching removes my button.
I didn't write the page I'm adding to, the school has written that in ASP.Net.
How can my extension affect search results after a dynamic post back?
First you would need to find some element on the page that is tied to search results and which presence indicates that search results are ready for processing (lets say it is <div id="search-results">). Then you can listen to DOMSubtreeModified to catch when this element is getting created:
var processed = false;
document.addEventListener("DOMSubtreeModified", function(event){
if(!processed && document.getElementById("search-results")) {
processed = true;
//process
}
});