jQuery 分页 + Twitter Bootstrap

Posted 2023-03-10

【中文标题】jQuery 分页 + Twitter Bootstrap

【英文标题】：jQuery pagination + Twitter Bootstrap

【发布时间】：2012-01-14 02:35:08

【问题描述】：

我正在尝试修改 Jquery 分页 (based on this Jquery pagination tutorial - demo) 以使用很棒的 twitter 引导程序。

Twitter Bootstrap 的标准分页设置如下所示，因此这是分页输出结构的目标。

<div class="pagination">
    <ul>
        <li class="prev disabled"><a href="#">&larr; Previous</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">5</a></li>
        <li class="next"><a href="#">Next &rarr;</a></li>
    </ul>
</div>

到目前为止，我可以通过更改 html 输出结构使其正常工作，但由于我将输出从 <a> 更改为 <li> 标记，因此活动突出显示无法正常工作。

This is where I am stuck now ATM!

我还需要做以下事情：

在第一页时禁用 prev 按钮 页面更改时更改活动<li> 在最后一页禁用next 按钮 修复 prev 按钮，使其再次工作 修复下一个按钮，使其再次工作

这是JsFiddle 的链接 - 不知何故它不起作用，但代码应该是正确的 (same code as this)

【参考方案1】：

这是标准的 jQuery.pagination 库，我已对其进行了修改以使用 twitter 引导程序。

创建 div -

<div id="myPager" class="pagination"></div>

然后

$('#myPager').pagination(100,callback:function(page,component)
    console.info(page);
)

这是库的代码。

jQuery.fn.pagination = function(maxentries, opts)
    opts = jQuery.extend(
        items_per_page:10,
        num_display_entries:10,
        current_page:0,
        num_edge_entries:0,
        link_to:"javascript:void(0)",
        first_text:"First",
        last_text:"Last",
        prev_text:"Prev",
        next_text:"Next",
        ellipse_text:"...",
        prev_show_always:true,
        next_show_always:true,
        callback:function()return false;
    ,opts||);

    return this.each(function() 
        /**
         * Calculate the maximum number of pages
         */
        function numPages() 
            return Math.ceil(maxentries/opts.items_per_page);
        

        /**
         * Calculate start and end point of pagination links depending on 
         * current_page and num_display_entries.
         * @return Array
         */
        function getInterval()  
            var ne_half = Math.ceil(opts.num_display_entries/2);
            var np = numPages();
            var upper_limit = np-opts.num_display_entries;
            var start = current_page>ne_half?Math.max(Math.min(current_page-ne_half, upper_limit), 0):0;
            var end = current_page>ne_half?Math.min(current_page+ne_half, np):Math.min(opts.num_display_entries, np);
            return [start,end];
        

        /**
         * This is the event handling function for the pagination links. 
         * @param int page_id The new page number
         */
        function pageSelected(page_id, evt)
            current_page = page_id;
            drawLinks();
            var continuePropagation = opts.callback(page_id, panel);
            if (!continuePropagation) 
                if (evt.stopPropagation) 
                    evt.stopPropagation();
                
                else 
                    evt.cancelBubble = true;
                
            
            return continuePropagation;
        

        /**
         * This function inserts the pagination links into the container element
         */
        function drawLinks() 
            panel.empty();
            var list = jQuery("<ul></ul>");
            panel.append(list);

            var interval = getInterval();
            var np = numPages();
            // This helper function returns a handler function that calls pageSelected with the right page_id
            var getClickHandler = function(page_id) 
                return function(evt) return pageSelected(page_id,evt); 
            
            // Helper function for generating a single link (or a span tag if it's the current page)
            var appendItem = function(page_id, appendopts)
                page_id = page_id<0?0:(page_id<np?page_id:np-1); // Normalize page id to sane value
                appendopts = jQuery.extend(text:page_id+1, classes:"", appendopts||);
                if(page_id == current_page)
                    var clazz = appendopts.side ? 'disabled' : 'active';
                    var lstItem = jQuery("<li class='"+clazz+"'><a>"+(appendopts.text)+"</a></li>")
                
                else
                
                    var a = jQuery("<a>"+(appendopts.text)+"</a>")
                        .attr('href', opts.link_to.replace(/__id__/,page_id));;
                    var lstItem = jQuery("<li></li>")
                        .bind("click", getClickHandler(page_id));
                    lstItem.append(a);
                
                if(appendopts.classes)lstItem.addClass(appendopts.classes);
                list.append(lstItem);
            
            // Generate "Previous"-Link
            if(opts.prev_text && (current_page > 0 || opts.prev_show_always))
                appendItem(0,  text: opts.first_text, side: true );
                appendItem(current_page-1,text:opts.prev_text, side:true);
            
            // Generate starting points
            if (interval[0] > 0 && opts.num_edge_entries > 0)
            
                var end = Math.min(opts.num_edge_entries, interval[0]);
                for(var i=0; i<end; i++) 
                    appendItem(i);
                
                if(opts.num_edge_entries < interval[0] && opts.ellipse_text)
                
                    jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
                
            
            // Generate interval links
            for(var i=interval[0]; i<interval[1]; i++) 
                appendItem(i);
            
            // Generate ending points
            if (interval[1] < np && opts.num_edge_entries > 0)
            
                if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text)
                
                    jQuery("<li class='disabled'>"+opts.ellipse_text+"</li>").appendTo(list);
                
                var begin = Math.max(np-opts.num_edge_entries, interval[1]);
                for(var i=begin; i<np; i++) 
                    appendItem(i);
                

            
            // Generate "Next"-Link
            if(opts.next_text && (current_page < np-1 || opts.next_show_always))
                appendItem(current_page+1,text:opts.next_text, side:true);
                appendItem(np - 1,  text: opts.last_text, side: true );
            
        

        // Extract current_page from options
        var current_page = opts.current_page;
        // Create a sane value for maxentries and items_per_page
        maxentries = (!maxentries || maxentries < 0)?1:maxentries;
        opts.items_per_page = (!opts.items_per_page || opts.items_per_page < 0)?1:opts.items_per_page;
        // Store DOM element for easy access from all inner functions
        var panel = jQuery(this);
        // Attach control functions to the DOM element 
        this.selectPage = function(page_id) pageSelected(page_id);
        this.prevPage = function() 
            if (current_page > 0) 
                pageSelected(current_page - 1);
                return true;
            
            else 
                return false;
            
        
        this.nextPage = function() 
            if(current_page < numPages()-1) 
                pageSelected(current_page+1);
                return true;
            
            else 
                return false;
            
        
        // When all initialisation is done, draw the links
        drawLinks();
        // call callback function
        //opts.callback(current_page, this);
    );

【讨论】：

我需要将 var list = jQuery(""); 更改为 var list = jQuery(""); 以使格式正常工作。

【参考方案2】：

我完全忘记了这篇文章 但是我设法使它与以下代码一起工作：

// Based on http://***.com/questions/1262919/jquery-active-class-assignment and http://***.com/questions/2037501/javascript-add-class-when-link-is-clicked

$(function() 
    $('ul.nav li:first').addClass('active').show(); //Activate first tab
    $('li a').click(function(e) 
        //e.preventDefault();
        var $this = $(this);
        $this.closest('ul').children('li').removeClass('active');
        $this.parent().addClass('active');

        //Remove active from dropdown li
        $('.dropdown').removeClass('active');

        // Activate Home when clicked on the logo
        $('.thelogo').click(function()
            
              $('.nav li').removeClass('active');
              $('.home').addClass('active');
            );
    );
);

【参考方案3】：

要禁用上一个按钮，在第一页时只需使用这个：

<li class="disabled"><a href="#">Previous</a></li>

要在页面更改时更改活动 li，只需将活动类放入显示页面的 li。

要在最后一页禁用下一个按钮，只需像上一个一样使用：

 <li class="disabled"><a href="#">Next</a></li>

【参考方案4】：

为#page_navigation下的所有<li>动态分配ID，并根据ID添加或删除类active。

<script type="text/javascript">
$(document).ready(function()

  //how much items per page to show
  var show_per_page = 5; 
  //getting the amount of elements inside content div
  var number_of_items = $('#content').children().size();
  //calculate the number of pages we are going to have
  var number_of_pages = Math.ceil(number_of_items/show_per_page);

  //set the value of our hidden input fields
  $('#current_page').val(0);
  $('#show_per_page').val(show_per_page);

  var navigation_html = '<ul>';

  navigation_html += '<li class="previous_link">';
  navigation_html += '<a href="javascript:previous();">&larr; Previous</a>';
  navigation_html += '</li>';
  var current_link = 0;
  while(number_of_pages > current_link)
    navigation_html += '<li class="page_link" id="id' + current_link +'">';
    navigation_html += '<a href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
    current_link++;
    navigation_html += '</li>';
  
  navigation_html += '<li>';
  navigation_html += '<a class="next_link" href="javascript:next();">Next &rarr;</a>';
  navigation_html += '</li>';
  navigation_html += '</ul>';

  $('#page_navigation').html(navigation_html);

  //add active class to the first page link
  $('#page_navigation .page_link:first').addClass('active');

  //hide all the elements inside content div
  $('#content').children().css('display', 'none');

  //and show the first n (show_per_page) elements
  $('#content').children().slice(0, show_per_page).css('display', 'block');

);

function previous()

  new_page = parseInt($('#current_page').val()) - 1;
  //if there is an item before the current active link run the function
  if($('.active').prev('.page_link').length==true)
    go_to_page(new_page);
  



function next()
  new_page = parseInt($('#current_page').val()) + 1;
  //if there is an item after the current active link run the function
  if($('.active').next('.page_link').length==true)
    go_to_page(new_page);
  



function go_to_page(page_num)
  //get the number of items shown per page
  var show_per_page = parseInt($('#show_per_page').val());

  //get the element number where to start the slice from
  start_from = page_num * show_per_page;

  //get the element number where to end the slice
  end_on = start_from + show_per_page;

  activate_id = page_num;
  var get_box = document.getElementById("id"+page_num);
  //hide all children elements of content div, get specific items and show them
  $('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');

  /*get the page link that has longdesc attribute of the current page and add active class to it
  and remove that class from previously active page link*/
  $("#page_navigation").find('li.active').removeClass("active");
  $(get_box).addClass("active");


  //update the current page input field
  $('#current_page').val(page_num);


</script>

【参考方案5】：

主动突出显示由 twitter 的 scrollspy javascript 插件完成。该插件会在该页面中找到对 div id 的引用，并在您滚动过去时自动突出显示菜单项。您也可以跳转到所需的部分，因为<a> 标记的href 属性指向同一页面上的引用。

几件事：

您的 2、3、4、5 和 Next 菜单项都指向同一个位置 "#"，它就在页面的顶部。将它们更改为您想要的此页面上的 html id 属性。 如果要链接到外部 html 页面或此页面上的内容，则不需要 "#" 符号，只需将 href 指向绝对或相对 URI。 <a> 周围的 <li> 标记用于 twitter 引导程序包的顶部栏菜单的 css 格式。

如果您对突出显示还有其他问题，请查看 scrollspy 源代码，因为它相当容易阅读。

【讨论】：

我不确定我是否理解您的回答。 “这个插件用于将 scrollspy（自动更新导航）交互添加到引导顶部栏。”这不只是为了滚动吗？我不想滚动，我需要 Jquery 分页才能工作。所以它会自动抓取我的帖子并将它们分成页面，每页有 5 个帖子。我可以像现在一样使用分页，但我希望它从引导程序（.active）中查看。

这些帖子是 atm 虚拟帖子，但最终它们将从数据库中加载。

啊我误解了主动高亮位。让我回复你。