Paginate by month

I'm using jQuery to paginate dynamic content which is a table of stuff per month of the year. So I have one to twelve tables per year, which I can quickly click through with my jQuery pagination.

However, I would like the actual pagination links to appear as the names of the month instead of the usual "page 1, page 2, page 3, etc". Is that somehow possible by extracting the name of the month from the headline in my month div which is displayed above the table (e.g var currentmonth = $('.month h3').html();)?

And sort it backwards, from December to January?! (So the most current month is displayed first).

Here's my jQuery code:

            $(document).ready(function(){  
                var show_per_page = 1;  
                var number_of_items = $('.paginate').children().size();  
                var number_of_pages = Math.ceil(number_of_items/show_per_page); 



                $('#current_page').val(0);  
                $('#show_per_page').val(show_per_page);  

                var navigation_html = '<a class="previous_link" href="javascript:previous();">&laquo;</a>';  
                var current_link = 0;  
                while(number_of_pages > current_link){  
                    navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';  
                    current_link++;  
                }  
                navigation_html += '<a class="next_link" href="javascript:next();">&raquo;</a>';  

                $('#page_navigation').html(navigation_html);  
                $('#page_navigation .page_link:first').addClass('active_page');  
                $('.paginate').children().css('display', 'none');  
                $('.paginate').children().slice(0, show_per_page).css('display', 'block');  
            });  
            function previous(){  
            new_page = parseInt($('#current_page').val()) - 1;  
                if($('.active_page').prev('.page_link').length==true){  
                    go_to_page(new_page);  
                }  
            }  
            function next(){  
            new_page = parseInt($('#current_page').val()) + 1;  
                if($('.active_page').next('.page_link').length==true){  
                    go_to_page(new_page);  
                }  
            }  
            function go_to_page(page_num){  
                var show_per_page = parseInt($('#show_per_page').val());  
                start_from = page_num * show_per_page;  
                end_on = start_from + show_per_page;  
                $('.paginate').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');  
                $('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');  
                $('#current_page').val(page_num);  
            }

And here's an example of my HTML structure:

            <input type="hidden" id="current_page" />  
    开发者_开发技巧        <input type="hidden" id="show_per_page" /> 

            <div id="page_navigation"></div>
            <br />

            <div class="paginate">

                <div class="month">
                    <h3>July</h3>
                    content stuff 
                    <br />
                </div>

                <div class="month">
                    <h3>June</h3>
                    content stuff 
                    <br />
                </div>

            </div>

The code below should give you some ideas to get the current month and then get it's name from the HTML

var currentMonth = 11 - new Date().getMonth();
var monthName = $('.paginate > .month:eq(' + currentMonth + ') > h3').html();

Hope you can take it from there!