开发者

jQuery: is there a way for tablesorterPager to show selectable page numbers?

开发者 https://www.devze.com 2023-01-28 04:03 出处:网络
I\'m using jQuery TableSorter and i\'m trying to add page navigation (withing the tablesorter). Now tablesorter has a pager plugin, but the problem is it doesn\'t show the page numbers, so you can\'t

I'm using jQuery TableSorter and i'm trying to add page navigation (withing the tablesorter). Now tablesorter has a pager plugin, but the problem is it doesn't show the page numbers, so you can't select a specific page to view.

I found this Pagination plugin: http://plugins.jquery.com/project/pagination which is exactly what i'm looking for. problem is, all attempts made by me trying to combine the tow gave me lots of errors..

Is there a way to combine them? or maybe 开发者_如何学Pythonalter tablesorterPager so it will be able to select pages?


You will need to alter the TablesorterPager. Two plugins modifying a single DOM element can get messy. The code would be easy to add in the plugin assuming that you have experience with authoring jQuery plugins. If not, I'll give you a brief outline and if you can't figure it out I'd be more than happy to help further.

  • Create a function to set up a <ul> with a <li> for each page number. You can choose to hide the middle few like this website does, or not.
  • Call this function from the constructor
  • Set a click() event in the constructor to load the page. The easiest way I think to do this would be to simply have each <li> have an ID of something along the lines of #page0, #page1, #page2, etc. That way you can just strip the 'page' part, and send them to the page based on the .val() of the item they clicked on.
  • While you're changing the page, you'll probably want to toggle some active classes and possible alter the original <ul> children. This could all be wrapped into a function. Specifics on what elements to alter and what the class names are will be found in the plugin add-on.

Good luck! Post a comment or something if you would like further detail.

0

精彩评论

暂无评论...
验证码 换一张
取 消