正文
js方法实现分页功能，js分页逻辑
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
怎么用js来实现页面的分页，有案列代码吗？请给个代码看看，谢谢
分屏加载吧 滑到哪加载哪
从网页头引入两个js文件，注意必须先放jquery的
[javascript] view plaincopy
script src="css/infinite-scroll/jquery-1.6.4.js"/script
script src="css/infinite-scroll/jquery.infinitescroll.js"/script
2.之后在网页头自己写一个js脚本
[javascript] view plaincopy
script
$(document).ready(function (){
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--本页的导航，意思就是一个可以触发ajax函数的模块
nextSelector: "#navigation a", //下一页的导航
itemSelector: ".scroll " , //此处我用了类选择器，选择的是你要加载的那一个块（每次载入的数据放的地方）
animate: true, //加载时候时候需要动画，默认是false
maxPage: 3, //最大的页数，也就是滚动多少次停。这个页码必须得要你从数据库里面拿
});
});
/script
3.或许你看到这里还是不太清楚网页怎么定义，这里给出我的demo，希望可以有帮助
[html] view plaincopy
%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%
!DOCTYPE html
html
head
meta charset="utf-8"
title无限翻页效果/title
script src="css/infinite-scroll/jquery-1.6.4.js"/script
script src="css/infinite-scroll/jquery.infinitescroll.js"/script
script src="css/infinite-scroll/test/debug.js"/script
script
$(document).ready(function (){ //别忘了加这句，除非你没学Jquery
$("#container").infinitescroll({
navSelector: "#navigation", //页面分页元素--成功后自动隐藏
nextSelector: "#navigation a",
itemSelector: ".scroll " ,
animate: true,
maxPage: 3,
});
});
/script
/head
body
div id="container" !-- 容器 --
div class="scroll" !-- 每次要加载数据的数据块--
第一页内容第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容br
第一页内容br第一页内容br第一页内容
/div
/div
div id="navigation" align="center" !-- 页面导航--
a href="user/list?page=1"/a !-- 此处可以是url，可以是action，要注意不是每种html都可以加，是跟当前网页有相同布局的才可以。另外一个重要的地方是page参数，这个一定要加在这里，它的作用是指出当前页面页码，没加载一次数据，page自动+1,我们可以从服务器用request拿到他然后进行后面的分页处理。--
/div
/body
/html
相关问答
Q1: vue.js中怎么实现分页显示
vuetable listdata="{{datalist}}" clickcallback="{{callback}}"/vuetable
pages pages="{{@ pages}}" clickhandle="{{search}}"/pages
其中vuetable组件负责数据展示功能，里面内容暂且不表，pages组件实现分页功能，如下：
div
ul
li v-on="click:leftclick" v-show="leftbtn"a《/a/li
li class="pageindex" v-repeat="showlength" v-on="click:clickhandle(currentIndex+$index,$event)"a{{currentIndex+$index}}/a/li
li v-on="click:rightclick" v-show="rightbtn"a/a/li
/ul
/div
class为pageindex的 li 的点击事件里面将 要显示的index 传给 props传递过来的 clickhandle,
clickhandle会根据index，返回后更新 datalist，完成分页功能。
Q2: JS如何控制分页
//js获取url上的参数
function getParam(name) {
var reg = new RegExp("(^|)" + name + "=([^]*)(|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null)
return unescape(r[2]);
return null;
}
var page = getParam('page');
Q3: 如何用JS将数据在页面上分页显示出来
在servlet的service()方法中只需进行如下操作：
PageControl pageCtl = yourBusinessObject.listData(req.getParameter("jumpPage"));
req.setAttribute("pageCtl",pageCtl);
说明：yourBusinessObject封装了商业逻辑，是位于Business Logic Layer中的一个对象，运用OOAD的方法，封装商业对象，在Persistent Layer之上组建坚实的Business Logic Layer同样是构建大型电子商务架构的关键所在。本文的关注点只是分页处理，暂不详细论述.
在每个想要实现翻页显示数据的jsp页面中，我们的工作也很简单,其代码是公式化的：
jsp:useBean id="pageCtl" class="yourpackage.PageControl" scope="request"/jsp:useBean
%if(pageCtl.maxPage!=1)){%
form name="PageForm" action="/servlet/yourpackage.yourservlet" method="post"
%@ include file="/yourpath/pageman.jsp"%
/form
%}%
说明：
if(pageCtl.maxPage!=1)实现了这样一个逻辑：如果所取得数据不足一页,那么就不用进行翻页显示。
我们注意到%@ include file="/yourpath/pageman.jsp"%这使得真正的翻页部分完全得到了重用.
那么pageman.jsp到底做了些什么呢？它实现了经常做翻页处理的人耳熟能详的逻辑
（A）第一页时不能再向前翻；
（B）最后一页时不能再向后翻；
同时能够进行页面任意跳转，具体代码如下：
每页%=pageCtl.rowsPerPage%行
共%=pageCtl.maxRowCount%行
第%=pageCtl.curPage%页
共%=pageCtl.maxPage%页
BR
%if(pageCtl.curPage==1){ out.print(" 首页 上一页"); }else{ %
A HREF="javascript:gotoPage(1)"首页/A
A HREF="javascript:gotoPage(%=pageCtl.curPage-1%)"上一页/A
%}%
%if(pageCtl.curPage==pageCtl.maxPage){ out.print("下一页 尾页"); }else{ %
A HREF="javascript:gotoPage(%=pageCtl.curPage+1%)"下一页/A
A HREF="javascript:gotoPage(%=pageCtl.maxPage%)"尾页/A
%}%
转到第SELECT name="jumpPage" onchange="Jumping()"
% for(int i=1;i=pageCtl.maxPage;i++) {
if (i== pageCtl.curPage){
%
OPTION selected value=%=i%%=i%/OPTION
%}else{%
OPTION value=%=i%%=i%/OPTION
%}}%
/SELECT页
最后附上用于页面跳转的javascript公共函数:
function Jumping(){
document.PageForm.submit();
return ;
}
function gotoPage(pagenum){
document.PageForm.jumpPage.value = pagenum;
document.PageForm.submit();
return ;
}
运行效果：
Q4: angularjs怎么实现分页功能
1、插件源码主要基于angular directive来实现。
2、调用时关键地方是后台请求处理函数，也就是从后台取数据。
3、插件有两个关键参数currentPage、itemsPerPage，当前页码和每页的记录数。
4、实现方法调用后我们需要根据每次点击分页插件页码时重新提交后台来获取相应页码数据。 在调用的页码中我使用了$watch来监控。 我初次使用时是把调用函数放在了插件的onchange中，结果发现每次都会触发两次后台。这个地方需要注意。
5、我把请求后台封装成了Service层，然后在Controller里调用，也符合MVC思想。
Q5: js实现分页
然后计算出一共分为几页
计算开始显示的行数，和最后显示的行数
遍历显示数据实现分页
实现最下方的显示，第几页，上一页，下一页
当前页为第一页时，上一页没有点击事件
当前页为最后一页时，下一页没有点击事件
否则，上一页和下一页均可使用，点击某一页会跳转到那一页
到此，分页效果已经实现了。
js方法实现分页功能的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于js分页逻辑、js方法实现分页功能的信息别忘了在本站进行查找喔。
