Javascript jQuery 分页 + Twitter Bootstrap

jQuery pagination + Twitter Bootstrap

提问by guruguldmand

I'm trying to modify a Jquery pagination (based on this Jquery pagination tutorial- demo) to work with the awesome twitter bootstrap.

我正在尝试修改 Jquery 分页（基于此 Jquery 分页教程-演示）以使用很棒的 twitter 引导程序。

Twitter Bootstrap's standard pagination setup looks like this, so this is the goal for the pagination output structure.

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>

So far I can get it to work by changing the html output structure but the active highlighting is not working proper since I changed the output from <a>to the <li>tag.

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

This is where I am stuck now ATM!

这就是我现在卡在 ATM 的地方！

I still need to do the following:

我仍然需要执行以下操作：

• Disable prevbutton, when on first page
• Change Active <li>when page is changed
• Disable nextbutton when on last page
• Fix the prevbutton so it works again
• fix the next button so it works again

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

Heres the link to the JsFiddle- somehow it's not working, but the code should be correct (same code as this)

这是JsFiddle的链接-不知何故它不起作用，但代码应该是正确的（与此代码相同）

采纳答案by guruguldmand

I totally forgot this post
However i managed to make it work with the following code:

我完全忘记了这篇文章
但是我设法使用以下代码使其工作：

// Based on http://stackoverflow.com/questions/1262919/jquery-active-class-assignment and http://stackoverflow.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');
            });
    });
});

回答by aram

Here is the standard jQuery.pagination library, which I have modified to use twitter bootstrap.

这是标准的 jQuery.pagination 库，我已将其修改为使用 twitter bootstrap。

create div -

创建 div -

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

then

然后

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

and here is the code for library.

这是库的代码。

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

回答by Shashi Saurav

Assign IDs dynamically to all <li>under #page_navigation, and add or remove the class activebased on the IDs.

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

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

回答by Manindra Singh

To Disable prev button, when on first page just use this:

要禁用上一个按钮，请在第一页时使用：

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

To Change Active li when page is changed just put the active class to that li in which your page is shown.

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

To Disable next button when on last page just use as for previous one like:

要在最后一页禁用下一个按钮，只需使用前一个按钮，例如：

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

回答by jpredham

The active highlighting is done by twitter's scrollspyjavascript plugin. The plugin finds the references to div id's in that page and highlights the menu items automatically when you scroll past them. You can also jump to the desired section because the hrefattribute of the <a>tag points to a reference on the same page.

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

A couple things:

一些事情：

• You're 2, 3, 4, 5, and Next menu items all point to the same place "#"which is just the top of the page. Change them to the html id attributes on this page that you want.
• If you want to link to outside html pages or things on this page, you don't need the "#"sign, just point the hrefto the absolute or relative URI.
• The <li>tag around the <a>is for css formatting for the topbar menu that twitter bootstrap packages.

• You're 2, 3, 4, 5, 和 Next 菜单项都指向同一个地方"#"，也就是页面的顶部。将它们更改为您想要的此页面上的 html id 属性。
• 如果要链接到外部 html 页面或此页面上的内容，则不需要"#"符号，只需将 指向href绝对或相对 URI。
• 在<li>周围的标签<a>是CSS格式的顶栏菜单，Twitter的引导包。

If you have further questions about the highlighting, take a look at the scrollspy source as it's fairly easy to read.

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