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