一个前端js分页计算

<div id=rrapp>
                <table id="rightHolder" class="layui-table" lay-skin="row" >
                    <thead >
                        <th width="3%" style="font-weight: bolder "></th>
                    </thead>
                    <tbody>
                    <tr v-for="(数据:,index) in 自定义数据::">
                        <td>{{pager.start + index}}</td>
                    </tr>
                    </tbody>
                </table>
                </div>
            <div class="layui-col-md12" style="height: 15%">
                <!--分页工具条-->
                <div class="row">
                    <div class="col-sm-4">
                        <div>
                            共{{pager.recordCount}}条数据，{{pager.pageNum}}/{{pager.pageCount}}页,
                            从第{{pager.start}}条到第{{pager.end}}条
                        </div>
                    </div>
                    <div class="col-sm-8">
                        <nav>
                            <ul class="pagination pull-right">
                                <li v-show="pager.pageNum!=1"><a href="javascript:void(0);" @click="query(1);">首页</a></li>
                                <li v-show="pager.pageNum!=1"><a href="javascript:void(0);" @click="query(pager.pageNum-1);">上页</a></li>

                                <li :class="{active:i==pager.pageNum}" v-for="(i,k) in pageBtns"><a href="javascript:void(0);" @click="query(i);">{{i}}</a></li>

                                <li v-show="pager.pageNum!=pager.pageCount"><a href="javascript:void(0);" @click="query(pager.pageNum+1);">下页</a></li>
                                <li v-show="pager.pageNum!=pager.pageCount"><a href="javascript:void(0);" 		@click="query(pager.pageCount);">末页</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>

<script>



var vm = new Vue({
    el:'#rrapp',
    data:{
    自定义数据:[],
    	传来的数据:[],
        pager:{},    //分页信息
        pageBtns:[] , //分页按钮组
       },methods:{
       get:function(){
       			//获取数据  将获得的数据赋给vm.某个数据。
       }
       ,query1:function (pageNum) {
			 vm.自定义数据 = [];

			vm.pager.recordCount = vm.传来的数据.length;
            vm.pager.pageNum = pageNum;
            vm.pager.pageSize = 7;//自己设置
            //计算共几页
            vm.pager.pageCount =  parseInt(vm.pager.recordCount /  vm.pager.pageSize);
            if (vm.pager.recordCount %  vm.pager.pageSize !=0)
                vm.pager.pageCount ++;
            if( vm.pager.pageCount<=0)
                vm.pager.pageCount = 1;
            //计算当前页码
            if (vm.pager.pageNum <1 )
                vm.pager.pageNum = 1;
            if (vm.pager.pageNum > vm.pager.pageCount)
                vm.pager.pageNum = vm.pager.pageCount;
            if (vm.pager.pageNum <= 0 )
                vm.pager.pageNum = 1;

            vm.currentPage = pageNum;
            //计算起始位置和终止位置
            vm.pager.start = (vm.pager.pageNum -1) * vm.pager.pageSize + 1;
            vm.pager.end = vm.pager.pageSize * vm.pager.pageNum;

            if (vm.pager.end > vm.pager.recordCount)
                vm.pager.end = vm.pager.recordCount;
            //生成分页的页码
            var  start = vm.pager.pageNum - 2;
            var  end = vm.pager.pageNum + 2;
            if(start < 3){
                start = 1;
                end = 5;
            }
            if(end > vm.pager.pageCount -3 ){
                end = vm.pager.pageCount;
            }
            vm.pageBtns = [];
            for (var i = start; i <= end;i++){
                vm.pageBtns.push(i);
            }
        }
		$.each(vm.传来的数据,function (index,el) {

               if( vm.pager.start - 1 <= index && vm.pager.end - 1 >= index){
                   vm.自定义数据.push(el);
               }

            })
}
</script>

以上代码只列了分页的关键部分，其中query函数以及vue的数据绑定
页面还用到了点点layui 由于我写的在前端有增删操作，所以query中每次都选择了重新计算分页信息
如果没有增删操作可以将分页计算独立出来。