I have a page that uses the JQuery Listnav plugin ( http://www.ihwy.com/labs/jquery-listnav-plugin.aspx ).
The alphabetical list works great. The performance is fast and it works in any browser I use.
Here’s the question – we may have numerous items in our list. Has anyone implemented a pager using this plugin? (For example, showing the first N items for a given letter; if there are more, add previous/next buttons to page through the content)
This is in an ASPX page; we have an ASP pager in the page right now, but the problem is once a user filters the list, the server-side page gets out of sync with the client-side filter. I think I need to eliminate the server-side pager to get this working properly.
Another thing I’d like to do is default to selecting the first active letter in the list. I’d basically pull all the items, then hide everything except the first letter’s items. I think it should be simple as simulating a click on the first active item when the document.ready event fires.
Has anyone implemented either of these approaches?
UPDATE
In trying to figure out a work-around I’ve made some progress.
Since I’m using an XMLDataSource in my page, I can create 26 linkbuttons (one for each letter in the alphabet) and bind those to a single event handler that takes in the letter as a command argument. Then I set the XPath query to find only nodes in the XMLDataSource that begin with the selected letter.
It’s a round-trip to the server for every click, but it actually accomplishes what I need it to. (The ASP pager should still work since the filtering is being done server-side)
After a lot of research I didn’t find any examples of people actually implementing a pager with that ListNav plugin. If anyone finds or writes an example I’d love to hear it.
What I wound up going with were .NET linkbuttons with command arguments for each letter, then using the XPath attribute in my XmlDataSource to look for nodes beginning with the letter (which was passes as a CommandArgument).
This accomplishes the same thing server-side as the client-side code was doing.