手动实现表格分页功能

在浏览器端实现分页，一次性获取全部数据，根据当前页数和每页记录数选择性显示/隐藏

<td colspan="9"><span class="pull-left">共 <label id="rowNum"></label>条记录，第 <label id="currentPage"></label>页/共<label id="pageSize"></label>页   每页显示：<select id="pageSel"><option value="10">10</option><option value="20">20</option><option value="30">30</option><option value="40">40</option><option value="50">50</option></select></span><span class="pull-right" id="paging"></span>
</td>
/*** 分页函数* pno--页数* psize--每页显示记录数* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能**/
function goPage(pno,psize){var itable = document.getElementById("serviceList");var num = itable.rows.length; //表格所有行数(所有记录数)console.log(num);var totalPage = 0;//总页数var pageSize = psize;//每页显示行数//总共分几页if(num/pageSize > parseInt(num/pageSize)){totalPage=parseInt(num/pageSize)+1;}else{totalPage=parseInt(num/pageSize);}var currentPage = pno;//当前页数var startRow = (currentPage - 1) * pageSize+1;//开始显示的行var endRow = currentPage * pageSize;//结束显示的行endRow = (endRow > num)? num : endRow;    40console.log(endRow);//遍历显示数据实现分页for(var i=1;i<(num+1);i++){var irow = itable.rows[i-1];if(i>=startRow && i<=endRow){irow.style.display = "";}else{irow.style.display = "none";}}document.getElementById("rowNum").innerHTML=num;document.getElementById("currentPage").innerHTML=currentPage;document.getElementById("pageSize").innerHTML=totalPage;var tempStr = "";if(currentPage>1){tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a> | ";tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a> | "}else{tempStr += "首页 | ";tempStr += "上一页 | ";}if(currentPage<totalPage){tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a> | ";tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>  ";}else{tempStr += "下一页 | ";tempStr += "尾页  ";}document.getElementById("paging").innerHTML = tempStr;}$("#pageSel").change(function(){   //选择每页显示页数后触发，重新分页var pageSize=this.value;goPage(1,pageSize);
});

手动实现表格分页功能相关推荐

element表格分页功能
element表格分页效果图 1.添加表格和分页组件 <el-table stripe :data="tableData.slice((currentPage-1)*pagesize ...
antd 表格分页功能
表格分页 // An highlighted blocktableOption: {columns: [{title: '目标类型', key: 'categoryDisplay', dataInde ...
如何在vue中使用表格分页功能
直接上代码: 这里是这里是template部分,主要由一个需要分页的表格和一个分页器组成.重点在于表格的data属性用到了一个slice截取方法. <el-tablev-loading=&quo ...
vue 实现简单表格分页功能
使用框架实现表格展示和跳转功能,一直不懂原理.所以自己写一个简单的,加深理解. 布局分为2块,上面是表格展示数据,下面是点击按钮跳转. 效果图: 代码: <!DOCTYPE html> & ...
基于Flask实现Layui表格分页功能
分组查询语法 Mysql分页查询和联合查询_Stillboring的博客-CSDN博客 Flask view代码 #获取学生信息 def getStuInfoList():#获取页数pageNum = ...
使用element-ui实现表格分页
vue+element-ui实现表格分页前言表格分页一.前端分页 1. 创建表格 2.分页表格 3. 添加事件 4. 完整前端分页代码二.后端分页 1.编写请求数据的函数 2.引用请求函数 3 ...
Vue+element-ui 实现表格的分页功能示例
Vue+element-ui 实现表格的分页功能示例 template部分: <el-table:data="tempList":header-cell-style=&quo ...
element-ui实现表格分页和搜索功能
一.首先展示下做出的页面效果 1.以下页面是物资列表界面,将所有的物资分页展示出来. 2.将搜索内容分页展示出来,以下页面是含关键字"子"时展示的数据 3.当搜索框为空时展示全部数 ...
ant中的table和pagination表格分页结合使用手写分页
表格部分 <a-table:row-selection="rowSelection" :columns="columns":data-source=&qu ...

手动实现表格分页功能

手动实现表格分页功能相关推荐

最新文章

热门文章