分页会加载所有数据

时间:2018-07-11 11:39:12

标签: jquery twitter-bootstrap pagination

我有分页功能,可以在页面加载时首先加载所有数据。 但我不想加载所有页面,因为我有更多数据,因此需要花费太多时间进行加载。所以我想像当我们单击下一步时其他页面也应该加载。 这是我的fiddle

脚本:

$.fn.pageMe = function(opts){
             var $this = this,
                 defaults = {
                     perPage: 10,
                     showPrevNext: false,
                     hidePageNumbers: false
                 },
                 settings = $.extend(defaults, opts);

             var listElement = $this;
             var perPage = settings.perPage; 
             var children = listElement.children();
             var pager = $('.pager');

             if (typeof settings.childSelector!="undefined") {
                 children = listElement.find(settings.childSelector);
             }

             if (typeof settings.pagerSelector!="undefined") {
                 pager = $(settings.pagerSelector);
             }

             var numItems = children.size();
             var numPages = Math.ceil(numItems/perPage);

             pager.data("curr",0);

             if (settings.showPrevNext){
                 $('<li><a href="#" class="prev_link">«</a></li>').appendTo(pager);
             }

             var curr = 0;
             while(numPages > curr && (settings.hidePageNumbers==false)){
                 $('<li><a href="#" class="page_link">'+(curr+1)+'</a></li>').appendTo(pager);
                 curr++;
             }

             if (settings.showPrevNext){
                 $('<li><a href="#" class="next_link">»</a></li>').appendTo(pager);
             }

             pager.find('.page_link:first').addClass('active');
             pager.find('.prev_link').hide();
             if (numPages<=1) {
                 pager.find('.next_link').hide();
             }
               pager.children().eq(1).addClass("active");

             children.hide();
             children.slice(0, perPage).show();

             pager.find('li .page_link').click(function(){
                 var clickedPage = $(this).html().valueOf()-1;
                 goTo(clickedPage,perPage);
                 return false;
             });
             pager.find('li .prev_link').click(function(){
                 previous();
                 return false;
             });
             pager.find('li .next_link').click(function(){
                 next();
                 return false;
             });

             function previous(){
                 var goToPage = parseInt(pager.data("curr")) - 1;
                 goTo(goToPage);
             }

             function next(){
                 goToPage = parseInt(pager.data("curr")) + 1;
                 goTo(goToPage);
             }

             function goTo(page){
                 var startAt = page * perPage,
                     endOn = startAt + perPage;

                 children.css('display','none').slice(startAt, endOn).show();

                 if (page>=1) {
                     pager.find('.prev_link').show();
                 }
                 else {
                     pager.find('.prev_link').hide();
                 }

                 if (page<(numPages-1)) {
                     pager.find('.next_link').show();
                 }
                 else {
                     pager.find('.next_link').hide();
                 }

                 pager.data("curr",page);
                 pager.children().removeClass("active");
                 pager.children().eq(page+1).addClass("active");
                 adjustPager(page+1);
             }

               // this to add
               function adjustPager(page){
                 var length = pager.children().length;
                 for(var i=1;i<length-1;i++)
                 {
                    if(i<6 && page<6)
                      pager.children().eq(i).show();
                    else if(i>=(length-6) && page>(length-6))
                      pager.children().eq(i).show();
                    else if(i<(page-2) || i>(page+2))
                      pager.children().eq(i).hide();
                    else
                      pager.children().eq(i).show();
                 }
               };
               adjustPager(1);// call the first time

               // add end
         };

         $(document).ready(function(){

           $('#myTable').pageMe({pagerSelector:'#myPager',showPrevNext:true,hidePageNumbers:false,perPage:1});

         });

有人可以建议怎么做。

0 个答案:

没有答案