博客

HTML方法
  <div v-show="isShow"  >
        </br>
            <div id="div1" name="div1"></div>
            <div id="barcon" name="barcon"></div>
            <div  id="pagination" style="margin-top: 10px;height: 35px;">
                <a class="btn btn-default" id="firPage" @click="firstPage" >&nbsp;首页</a>
                <a class="btn btn-default" id="prePage" @click="prevPage" >&nbsp;上一页</a>
                <a class="btn btn-default" id="nexPage" @click="pnextPage" >&nbsp;下一页</a>
                <a class="btn btn-default" id="lasPage" @click="lastPage"  >&nbsp;尾页</a>
                <input id="numPage"  style="border-width: 0;width: 40px;margin-left: 10px;height: 16px;"/>
                <input id="totalPage" style=" border-width: 0; width: 40px;margin-left: 10px;height: 16px;" />
                <input id="pagesize" style=" border-width: 0px; width: 0px;margin-left: 10px;height: 16px;" />
                显示 <select id ="selectPage" @change="selectd" style="width: 40px">
                    <option value="10" selected>10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
            </select>条
                <select id="jumpWhere" style=" margin-left: 10px;"></select>
                <a class="btn btn-default" style="margin-left: 5px;" href="###" id="jumpPage" @click="jumpPage">跳转</a>
            </div>
        </div>

js方法
   /**
         * 分页方法
         * @param i 当前页
         */
       pagination: function (i) {
            var tempHtml ="";
            var totalRow ;
            var pagesize ;
            if(vm.level.chartType != 5){
                 totalRow = vm.dataLength;//表格的总行数
            }else{
                 totalRow = vm.dataLengthd;
            }
            currentPage = i; /*当前页*/
            if(vm.pagesize == 0){
                pagesize = 10;  /*每页显示条数*/
            }else{
                pagesize= vm.pagesize;  /*每页显示条数*/
            }
            totalPage = Math.ceil(totalRow / pagesize);  /*计算出总页数*/
            document.getElementById("numPage").value = "第" + currentPage + "页";  /*显示页码*/
            document.getElementById("totalPage").value = "共" + totalPage + "页";  /*显示一共多少页*/
            startRow = (currentPage - 1) * pagesize;  /*每页显示第一条数据的行数*/
            lastRow = currentPage * pagesize;    /*每页显示的最后一条数据的行数,因为表头也算一行，所以这里不需要减1，这种情况以自己的实际情况为准*/
            if (lastRow > totalRow) {
                lastRow = totalRow; /*如果最后一页的最后一条数据显示的行数大于总条数，那么就让最后一条的行数等于总条数*/

            }
            for (var i = 1; i < (totalRow +1); i++) {
                var tempHtml = "<table class=\"table table-bordered\" >";
                tempHtml+= "<thead>";
                if (vm.level.chartType == 5) {
                    tempHtml +="<tr>";
                    tempHtml+= "<th>Time</th>";
                    tempHtml+= "<th>Name</th>";
                    tempHtml+= "<th>Value</th>";
                    tempHtml+= "</tr>";
                } else {
                    tempHtml+="<tr >";
                    tempHtml+= "<th>Time</th>";
                    tempHtml+= "<th>Value</th>";
                    tempHtml+= "</tr>";
                    tempHtml+= "</thead>";
                }
                tempHtml+="<tbody>";
                for (var i = 0; i < vm.rowList.length; i++) {
                    if (i >= startRow && i < lastRow) {
                        if (vm.level.chartType == 5) {
                            tempHtml+= "<tr><td>" + vm.rowList[i].times + "</td><td>" + vm.rowList[i].name + "</td><td>" + vm.rowList[i].value + "</td></tr>";
                        } else {
                            tempHtml+= "<tr><td>" + vm.rowList[i].times + "</td><td>" + vm.rowList[i].value + "</td></tr>";
                        }

                    }
                }
                tempHtml+="</tbody>";
                tempHtml += "</table>";
                document.getElementById('div1').innerHTML = tempHtml;
            }
            //跳转
            var tempOption="";
            for(var i=1;i<=totalPage;i++)
            {
                if(i!=currentPage){
                        tempOption+='<option   value='+i+'>'+i+'</option>';
                }else{
                    tempOption+='<option   value='+currentPage+' selected = "selected"  >'+currentPage+'</option>';
                }
            }
            $("#jumpWhere").html(tempOption);
            $("#jumpWhere").val(currentPage);
        },
        firstPage: function () {
            var i = 1;
            vm.pagination(i);
        },
        prevPage: function () {
            var i = currentPage - 1;
            if (i < 1) {
                i = currentPage;
            }
            vm.pagination(i);
        },
        pnextPage: function () {
            var i = currentPage + 1;
            if (i > totalPage) {
                i = currentPage;
            }
            vm.pagination(i);
        },
        lastPage: function () {
            var i = totalPage;
            vm.pagination(i);
        },
        jumpPage: function () {
            var num = parseInt($("#jumpWhere").val());
            if (num != currentPage) {
                vm.pagination(num);
            }
        },
        selectd: function (){
            var pagesized = parseInt($("#selectPage").val());
            vm.pagesize=pagesized;
            vm.pagination(1);
            },

参考来源

https://blog.csdn.net/weixin_41305441/article/details/84838840