按月分页

Question

我正在使用jQuery对动态内容进行分页，这是一年中每月的内容表。所以我每年有一到十二个表，我可以通过jQuery分页快速点击。

但是，我希望实际的分页链接显示为月份的名称，而不是通常的“第1页，第2页，第3页等”。通过从表格上方显示的月份div中的标题中提取月份名称（例如var currentmonth = $('.month h3').html();），可以通过某种方式实现这一点吗？

然后从12月到1月向后排序？！ （所以最先显示当月）。

这是我的jQuery代码：

            $(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);  
            }

这是我的HTML结构的一个例子：

            <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>

Answer 1

下面的代码应该为您提供一些想法，以获取当前月份，然后从HTML中获取它的名称

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

希望你能从那里拿走它！