jquery分頁插件

引用

<link href="css/jBootstrapPage.css" rel="stylesheet"/>
<script src="js/jBootstrapPage.js"></script>

配置

<div>
  <ul class="pagination"></ul>
</div>
<script type="text/javascript">
            var totalCount = 1;
            $(function(){
                renderPage(1,1,totalCount);
            });

            function renderPage(pageSize,selectedPageNo,total) {
                $(".pagination").jBootstrapPage({
                    pageSize : pageSize,
                    total : total,
                    maxPageButton:total/pageSize+1,
                    lastSelectedIndex : selectedPageNo,
                    onPageClicked: function(obj, pageIndex) {
                          //ajax get page data
                          getData(page,size);
                    }
                });
            }
</script>

使用

function getData(page,size) {
                var data = {"keyword": var2,"page":page,"size":size};
                $.ajax({
                    url: 'url',
                    type: 'GET',
                    jsonp: 'callback',
                    data: data,
                    success: function (data, status) {
                        if (status == 'success') {
                            //update data
                            totalCount = data.totalElements;
                            renderPage(size,page+1,totalCount);
                        }
                    },
                    error: function (data, status) {
                        if (status == "error") {
                            console.log(data);
                        }
                    }
                });
            }

修改源碼的init函數

主要是解決從新render以後選中頁面的問題

function init() {
                $this.find('li').remove();
                c.maxPages = Math.ceil(c.total/c.pageSize);

                if(c.maxPages < 1) return;

                $this.append('<li class="disabled"><a class="first" href="#">&laquo;</a></li>');
                $this.append('<li class="disabled"><a class="pre" href="#">上一頁</a></li>');

                var pageCount = c.maxPages < c.maxPageButton ? c.maxPages : c.maxPageButton;
                var pNum = 0;
                for(var index = 1; index <= pageCount; index++) {
                    pNum++;
                    $this.append('<li class="page" pNum="'+pNum+'"><a href="#" page="'+index+'">'+index+'</a></li>');
                }

                $this.append('<li class="disabled"><a class="next" href="#">下一頁</a></li>');
                $this.append('<li><a class="last" href="#">&raquo;</a></li>');

                if(c.maxPageButton > c.maxPages) {
                    $this.find('li a.next').parent().addClass("disabled");
                    $this.find('li a.last').parent().addClass("disabled");
                }else {
                    $this.find('li a.next').parent().removeClass("disabled");
                    $this.find('li a.last').parent().removeClass("disabled");
                }

               //主要是這部分
                if(c.lastSelectedIndex){
                    $this.find('li.active').removeClass('active');
                    var selectedBtn = $this.find('li.page').find('a[page="'+(c.lastSelectedIndex)+'"]');
                    selectedBtn.parent().addClass('active');
                }

                //$this.find('li:nth-child(3)').addClass('active');

                firstBtn = $this.find('li a.first').parent();
                preBtn = $this.find('li a.pre').parent();
                lastBtn = $this.find('li a.last').parent();
                nextBtn = $this.find('li a.next').parent();
            }

參考

• jBootstrapPage