js实现数据分页算法
2024-05-27 14:56:24
数据分页算法
- 一、分页算法
- 二、百度分页算法
- 三、带数据的分页算法
一、分页算法
<script><!-- 分页的逻辑算法-->//当前页和总页码var nowPage=10;var totlePage=20;var navEle=null;var up=null;var down=null;var totle=null;var go=null;var num=null;var lilist=null;window.onload=function(){//用class属性获取的是一个集合 不能进行一堆操作 即使只有一个子集 也要使用[];navEle=document.getElementsByClassName("nav")[0];up=document.getElementsByClassName("goup")[0];down=document.getElementsByClassName("godown")[0];totle=document.getElementsByClassName("totle")[0];go=document.getElementsByClassName("go")[0];num=document.getElementsByClassName("num")[0];lilist=document.getElementsByClassName("nav-tab");//创建页数的标签renderPage();totle.innerText=totlePage;//绑定事件up.onclick=function(){if(nowPage<=1){return;}nowPage--;renderPage();}down.onclick=function(){if(nowPage>=totlePage){return;}nowPage++;renderPage();}//点击跳转go.onclick=function(){//检测num为空var value=num.value;if(!value.length){alert("请输入值！");}else{nowPage=parseInt(value);renderPage();}}num.value="";}//创建页数的标签function createPage(currentPage,totle){var str="";for(var i=1;i<=totle;i++){if(i==2&¤tPage-i>2){//前缩i=currentPage-3;str+="<li>...</li>"}else if(i-currentPage>2&&i+3<totlePage){//后缩i=totlePage-2;str+="<li>...</li>";}else{if(i===currentPage){str+="<li class='nav-tab ck'>"+i+"</li>"}else{str+="<li class='nav-tab'>"+i+"</li>";}}}return str;}function renderPage(){navEle.innerHTML=createPage(nowPage,totlePage);addHandle();}function addHandle(){//遍历所有的li，添加事件for(var i=0;i<lilist.length;i++){lilist[i].onclick=function(){nowPage=parseInt(this.innerText);renderPage();}}} </script>
二、百度分页算法
<script>//百度分页算法var nowPage=1;var totlePage=30;var save=null;var item=document.getElementsByClassName("item-li");var up=document.getElementsByClassName("up")[0];var down=document.getElementsByClassName("down")[0];window.onload=function(){//修改所有的lichangeStatus();//绑定事件up.onclick=function(){if(nowPage<=1){return;}nowPage--;changeStatus(-1);}down.onclick=function(){if(nowPage>=totlePage){return;}nowPage++;changeStatus(1);}}//修改所有li的状态function changeStatus(params){if(params>0&&nowPage>item.length/2+1&&nowPage+(item.length/2-1)<=totlePage){//所有li文本+1updateText(params);}if(params<0&&nowPage>=item.length/2+1&&nowPage+(item.length/2-1)<totlePage){//所有li文本-1updateText(params);}for(var i=0;i<item.length;i++){var page=parseInt(item[i].innerText);if(page===nowPage){if(save){save.classList.remove('check-item');}item[i].classList.add('check-item');//记录save=item[i];}}}//所有li元素+1 -1 方法function updateText(args){for(var i=0;i<item.length;i++){item[i].innerText=parseInt(item[i].innerText)+args;}} </script>
三、带数据的分页算法
<script>//获取元素var clist = document.getElementsByClassName("c-list")[0];var up = document.getElementsByClassName("up")[0];var down = document.getElementsByClassName("down")[0];var item = document.getElementsByClassName("item-li");var lastpage = document.getElementsByClassName("lastpage")[0];var firstpage = document.getElementsByClassName("firstpage")[0];var gobtn = document.getElementsByClassName("gobtn")[0];//获取下拉菜单var menulist = document.getElementById("checkinfo");var gonum = document.getElementById("gonum");//记录默认状态值var save=null;//接收当前页的数据var pageData = null;//浏览器加载完成之后默认显示5条一页var nowpage=1;var pageNum=5;//默认一页显示5条var totlepage=setTotle();window.onload=function(){//获取当前页的数据pageData=getPageData();renderPage();//初始化分页changeStatus();up.onclick=function(){if(nowpage<=1){return;}nowpage--;changeStatus(-1);//获取当前页的数据pageData=getPageData();renderPage();}down.onclick=function(){if(nowpage>=totlepage){return;}nowpage++;changeStatus(1);//获取当前页的数据pageData=getPageData();renderPage();}lastpage.onclick=function(){nowpage=totlepage;gopage(nowpage-parseInt(item[item.length-1].innerText));}firstpage.onclick=function(){nowpage=1;gopage(-(parseInt(item[0].innerText-1)));}//文本发生变化事件menulist.onchange = function () {//获取的value是当前一页显示多少条pageNum = this.value;console.log(pageNum);//重新计算总页数totlepage = setTotle();//重新加载数据pageData = getPageData();renderPage();}//给所有的li添加事件for(var i=0;i<item.length;i++){item[i].onclick=function(){nowpage=parseInt(this.innerText);//获取中间元素的文本值var centerNum=item[5].innerText;var num=nowpage-centerNum;updateText(num);changeStatus();//重新加载数据pageData = getPageData();renderPage();}}//跳转gobtn.onclick=function(){nowpage=parseInt(gonum.value);//获取中间元素的文本值var centerNum=item[5].innerText;var num=nowpage-centerNum;updateText(num);changeStatus();//重新加载数据pageData = getPageData();renderPage();gonum.value="";}}//计算总页码function setTotle(){//向上取整return Math.ceil(stulist.length/pageNum);}//获取当前页的数据方法function getPageData(){return stulist.slice((nowpage-1)*pageNum,nowpage*pageNum);}//渲染当前页的数据到页面function renderPage(){var str="";for(var index in pageData){var one=pageData[index];str+="<div><span>"+one.name+"</span>"+"<span>"+one.sex+"</span>"+"<span>"+one.age+"</span>"+"<span>"+one.tel+"</span>"+"<span>"+one.address+"</span>"+"<span>"+one.des+"</span></div>";}clist.innerHTML=str;}//分页逻辑算法function changeStatus(params){if(params>0){//所有li文本+1updateText(params);}if(params<0){//所有li文本-1updateText(params);}for(var i=0;i<item.length;i++){var page=parseInt(item[i].innerText);if(page===nowpage){if(save){save.classList.remove('check-item');}item[i].classList.add('check-item');//记录save=item[i];}}}//所有li元素+1 -1 方法function updateText(args){for(var i=0;i<item.length;i++){//当前页小于6 直接显示1-10//当前页 大于19 全部显示item[i].innerText=(nowpage<=item.length/2+1?(i+1):nowpage<totlepage-4?(parseInt(item[i].innerText)+args):(totlepage-item.length+1+i));}}//最后一页和第一页的方法function gopage(args){//修改所有li的文本updateText(args);changeStatus();pageData=getPageData();renderPage();} </script>
js实现数据分页算法相关推荐
- JS对数据分页的封装方法
本文为原创代码,转载请注明出处:http://www.pm-road.com/index.php/2014/07/24/26/ 因为web端经常会展示很多数据,如果一页下来,肯定会看的眼花缭乱,所以肯 ...
- 海量数据库的查询优化及分页算法方案
在以下的文章中,我将以"办公自动化"系统为例,探讨如何在有着1000万条数据的MS SQL SERVER数据库中实现快速的数据提取和数据分页.以下代码说明了我们实例中数据库的&qu ...
- 海量数据库的查询优化及分页算法方案 1
随着"金盾工程"建设的逐步深入和公安信息化的高速发展,公安计算机应用系统被广泛应用在各警种.各部门.与此同时,应用系统体系的核心.系统数据的存放地――数据库也随着实际应用而急剧膨胀 ...
- 海量数据库的查询优话及分页算法
海量数据库的 查询优化及分页算法方案 随着"金盾工程"建设的逐步深入和公安信息化的高速发展,公安计算机应用系统被广泛应用在各警种.各部门.与此同时,应用系统体系的核心.系统数据的存 ...
- SQL server 海量数据库的查询优化及分页算法(收藏)
http://www.w17x.com/AritcleDisplay.aspx?id=661 具体如下: 如何在有着1000万条数据的MS SQL SERVER数据库中实现快速的数据提取和数据分 ...
- SQLServer海量数据库的查询优化及分页算法方案
随着"金盾工程"建设的逐步深入和公安信息化的高速发展,公安计算机应用系统被广泛应用在各警种.各部门.与此同时,应用系统体系的核心.系统数据的存放地――数据库也随着实际应用而急剧膨胀 ...
- Case Study: 利用JS实现数据库网页的数据分页、数据选择、数据详细信息查看功能
一.目标 该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个能够进行实现数据分页显示.数据选择.数据详细信息查看功能的数据库网页.该数据库 ...
- js：nodejs搭建http服务器为页面添加mysql中的数据分页
一,建立两个模板:db.js (获取数据库的数据) message.js(将得到的数据进行分页,显示) db.js /*** 创建数据库连接,并获取数据*/ var mysql = require( ...
- js数据过滤算法搭建
需求描述 公司需要搭建一个paas平台兼容所有的硬件,硬件把自己采集到的数据发送到paas平台,paas平台把数据处理之发送到各个服务.很多时候硬件发送的数据量特别大,很多不是我们需要的,这个时候,我 ...
最新文章
- Matlab与ROS通信设置
- 常用插值算法介绍(二)
- php和python哪个学起来简单一点-作为初学者,php,python和ruby应学哪个?
- Uncaught ReferenceError: webpackJsonp is not defined at app.js vendor.js
- EA强大的画图工具---设计数据库表格
- java 0x3f_Java源码位操作技巧欣赏
- 深度学习attention原理_深度学习Anchor Boxes原理与实战技术
- javascirpt如何模仿块级作用域(js高程笔记)
- 海南计算机考研和培训哪个比较好,海南考研集训营前十排名
- mac显示网速_Mac系统怎么查看测试网速
- mysql Load Data InFile 的用法
- 360修复高危漏洞可以修复吗_大理石刮痕可以修复吗？如何修复？
- jasperReports导出PDF字体加粗等样式失效问题
- 数电和模电的区别和联系
- 【Python怎么批量修改文件名称】
- 小白：测试的逻辑思维
- 阿里系App抓包详细分析
- [bzoj4372]烁烁的游戏
- eclipse怎么恢复默认布局
- android richtext显示html,RichText Android 平台下的富文本显示控件 @codeKK Android开源站...