一个前端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中每次都选择了重新计算分页信息
如果没有增删操作可以将分页计算独立出来。

一个前端js分页计算相关推荐

练手：原生js（部分jquery）写一个前端页面分页功能
准备一个获取数据的接口 –注–:页面可能有点简陋,我们这里主要写如何操作dom来实现分页的功能. 这里我是用node搭建了一个简易的服务器,用来给前端发送数据: const express = req ...
纯JS前端分页方法（JS分页）
1.JS分页函数:开发过程中,分页功能一般是后台提供接口,前端只要传page(当前页码)和pageSize(每页最大显示条数)及对应的其他查询条件,就可以返回所需分页显示的数据. 但是有时也需要前端本 ...
使用amaze ui的分页样式封装一个通用的JS分页控件
作为一名码农,天天百度.偶尔谷歌,所有代码全靠copy,用第三方插件,偶尔也想着造造轮子,毕竟自己的骨肉总归比较亲. 今天有点空闲时间,想起我们公司之前套的页面的分页插件上还有bug,而写那个分页插件 ...
js分页实现，前端实现。
主要是借鉴了网上一个例子,自己重新加了样式,添加了跳转,修改了一些小地方,用于和大家一起分享,前端分页的技巧,表格的数据是我已经写好了,其实大家也可以前端渲染表格然后再分页,都是可以的. 其实分页最关 ...
2020使用html、js、正则表达式做一个前端注册表单信息验证
使用html.js.正则表达式做一个前端注册表单信息验证小小前端练手项目,主要运用正则表达式对用户名.密码.确认密码.电子邮箱.手机号码.生日.身份证号码的验证 1.用户名不正确(需由由英文字母和数 ...
纯前端JS实现一个登记照改换底色背景色功能
说到登记照改换底色功能的实现,我想大部分人都会认为使用opencv或者机器学习方法对图像进行图像分割.边缘检测.基于语义的物体检测.无监督的像素分类算法等等算法是最好的途径. 而我最近实现了一个登记照 ...
前端第三方依赖文件单独抽出注入一个公共js文件 html引入方法
虽然前端现在主流使用框架搭建项目,但还是有少许人用jq来开发项目,众所周知,jq引入第三方依赖时每个html页面都需引入,重复动作,依赖越来越多,引入一整坨.因此,我们可以建一个公共js文件,把各页面 ...
vue-codemirror实现一个前端代码在线编辑器，可处理 HTML,VUE,JS,CSS代码在线编辑
先找个目录创建一个vue项目例如我们想要项目叫 editor 在终端执行 vue create editor 2和3其实都可以但个人建议最近还是2会更稳定一些在终端执行 npm i code ...
前端js调用后端API获取数据的三种方法（2022.7.25）
前端js调用后台API获取数据的三种方法(2022.7.25) 前言需求分析一个Get实例浏览器请求 SoapUI软件请求一个Post实例浏览器请求 SoapUI软件请求 1.Http简介( ...

一个前端js分页计算

一个前端js分页计算相关推荐

最新文章

热门文章