JS实现php的伪分页

2024-12-06 15:42:46

JS代码如下:

代码如下:

<scrīpt language="javascrīpt">
//最大数据量
var total="100";
//每页的显示量
var pagesize=10;
//一共有多少页
var pagenum=Math.ceil(total/pagesize);
//生成导航
function initpage(nowpage){
var pagenav='<a href="#" ōnclick=up('+ nowpage+');>上一页</a>';
for(i=1;i<=pagenum;i++){
pagenav += (i==nowpage)?'<span class="now">' + i + '</span>':'<a class="number" href="#" ōnclick=goToPage(' + i + ');>' + i + '</a> ';
}
pagenav += '<a href="#" ōnclick=down('+ nowpage+');>下一页</a>';
document.getElementById('pages').innerHTML=pagenav;
}

//翻页
function goToPage(page){
var start=(page-1)*pagesize;
var max=page*pagesize;
for(vs=0;vs<total;vs++){
  var ōbj=document.getElementById('item_' + vs);
  obj.style.display="none";
}
if(max>total)max=total;
for(v=start;v<max;v++){
  var ōbj=document.getElementById('item_' + v);
  obj.style.display="block";
}
initpage(page);
}

//上一页

function up(nowpage){
if(nowpage==1)return false;
if(nowpage>1)goToPage((nowpage-1));
}

//下一页

function down(nowpage){
if(nowpage==pagenum)return false;
if(nowpage<pagenum)goToPage((nowpage+1));
}
</scrīpt>

如果数据是

...........

那么就可以显示出一个类似于这样的导航:

然后点击页数或者上下页就可以切换显示了.

时间比较仓促,就说这么多了，大家自己分析代码,有不明白的请留言

JS实现php的伪分页

JS代码如下: 复制代码代码如下: <scrīpt language="javascrīpt"> //最大数据量 var total="100"; //每页的显示量 var pagesize=10; //一共有多少页 var pagenum=Math.ceil(total/pagesize); //生成导航 function initpage(nowpage){ var pagenav='<a href="#&quo
jQuery实现伪分页的方法分享

本文实例讲述了jQuery实现伪分页的方法.分享给大家供大家参考,具体如下: 可以对表格数据进行伪分页,而且只需要执行简单的代码就可以实现. 实现的很简单.样式也不太好看,大家可以自行调整,纠正. 下面是一个table,tbody里加载tr数据,无论你怎么加载, 在数据加载完成后便可以对table数据进行伪分页.注意div引用的class,我填充的数据是四列的,所以td里加了colspan,div是分页显示区域 <table> <tbody id="dialog-items&q
jquery实现的伪分页效果代码

本文实例讲述了jquery实现的伪分页效果代码.分享给大家供大家参考,具体如下: 这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期待大家关注. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-pic-mn-page-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W
JS代码实现table数据分页效果

第一个:实现的很常见很简单的显示页数翻页效果图: •这是HTML代码,很简单滴(我好像看到了被嫌弃的小眼神) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-"> <script src="js/jquery-...js"></script> <script src="js/demo.js
JS Array.from()将伪数组转换成数组的方法示例

Array.from 方法用于将两类对象转换为真正的数组: 1.类似数组的对象,可以理解为"伪数组" 2.可遍历对象(比如字符串) 什么是伪数组? 伪数组都有一个基本的特点:必须有 length 属性. let arrayLike = { "0": "a", "1": "b", "2": "c", "length": 3 } 像上面的 arrayL
JS+CSS实现的拖动分页效果实例

本文实例讲述了JS+CSS实现拖动分页效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>拖动分页</title> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <style> body{ border:0px; margin:0px; overflow:hidden; backgrou
js中将HTMLCollection/NodeList/伪数组转换成数组的代码

这里把符合以下条件的对象称为伪数组 1,具有length属性 2,按索引方式存储数据 3,不具有数组的push,pop等方法如 1,function内的arguments . 2,通过document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName() ,childNodes/children 等方式获取的集合(HTMLCollection,NodeLi
vue.js 2.0实现简单分页效果

本文实例为大家分享了vue.js 2.0实现分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>vue.js 2.0 实现的简单分页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box } html { fo
Vue.js结合bootstrap前端实现分页和排序效果

写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排
js实现简单的前端分页效果

有些项目业务比较简单,但用到前端分页的地方又比较多,插件的体积比较难控制用起来也麻烦,所以自己写一个简易的. 实现思路通过 jQuery.slice()选择子集的区间元素, 然后控制显示隐藏来实现: 假设每页显示数量为x,当前页码为y,元素索引从0开始,那么显示的区间即为 x(y-1) 到 xy. 效果演示 demo代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

JS实现php的伪分页

相关推荐

随机推荐