jQuery分页+ Twitter Bootstrap

我正在尝试修改Jquery分页（ 基于此Jquery分页教程 – 演示 ）以使用令人敬畏的twitter引导程序。

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

到目前为止，我可以通过更改html输出结构来使其工作，但由于我将输出从更改为

  • 标记，因此活动突出显示无法正常工作。

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

    我仍然需要做以下事情：

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

    下面是JsFiddle的链接 – 不知怎的，它不起作用，但代码应该是正确的（ 与此代码相同 ）

    这是标准的jQuery.pagination库，我已修改它以使用twitter bootstrap。

    创建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("
      "); 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      "+(appendopts.text)+"
      • ") } else { var a = jQuery(""+(appendopts.text)+"") .attr('href', opts.link_to.replace(/__id__/,page_id));; var lstItem = jQuery("
    • ") .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"+opts.ellipse_text+"").appendTo(list); } } // Generate interval links for(var i=interval[0]; i 0) { if(np-opts.num_edge_entries > interval[1]&& opts.ellipse_text) { jQuery("
    • "+opts.ellipse_text+"
      • ").appendTo(list); } var begin = Math.max(np-opts.num_edge_entries, interval[1]); for(var i=begin; i 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); }); }

      将ID动态分配给#page_navigation下的所有

    • ，并根据ID添加或删除active类。

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

      几件事：

      • 你是2,3,4,5和下一个菜单项都指向同一个地方"#" ，它只是页面的顶部。 将它们更改为您想要的此页面上的html id属性。
      • 如果要链接到此页面上的外部html页面或内容，则不需要"#"符号，只需将href指向绝对或相对URI即可。
      • 的

      • 标签用于twitter引导程序包的顶部菜单的css格式。

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

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

       
    • Previous
      •

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

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

        
    • Next
      •

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

       // 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'); }); }); });
      Interesting Posts

      如何将滚动文本放在标题标签中？

      javascript如何在以后触发本机点击操作（重播事件）？

      如何在多个表内深入获取每个元素的innerText？（chrome扩展名）

      带有ES6箭头函数的jQuery .each（）函数

      如何检测Windows本地存储是否可用？

      Highcharts饼图可以有url链接

      使用javascript锁定标签键？

      按下输入时如何将焦点移动到下一个字段？

      使用不引人注目的JavaScript，参数不为null，但其值为

      当脚本插入DOM时jQuery .on（）没有绑定