js分页算法_js的分页原理以及实现步骤是什么

⑴ js的分页原理以及实现步骤是什么

主要是借鉴了网上一个例子，修改了一些小地方，前端分页的技巧，表格的数据是已经写好了，可以前端渲染表格然后再分页，都是可以的。

其实分页最关键是这两句：

var startRow = (currentPage - 1) * pageSize+1; //currentPage 为当前页，pageSize为每页显示的数据量
var endRow = currentPage * pageSize;

找到我们需要显示的行的范围（starRow~endRow）

ps:这里在跳转的时候遇到了一个小BUG，就是获取到的select的value值是string类型的，比如获取到了1，然后你想再加1的时候就会变成"11" 而不是我们想要的"2"，所以这里需要用parseInt( )来转换一下，小细节需要注意呀！！！

效果图：

[javascript] view plain print?

<!doctypehtml>
<html>
<head>
<metacharset='utf-8'>
<styletype="text/css">
a{
text-decoration:none;
}
.table2{
border:#C8C8C8solid;
border-width:1px0px0px1px;
background:#F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8solid;
border-width:001px0;
}
.td2{
border:#C8C8C8solid;
border-width:01px1px0;
}
.barcon{
width:1000px;
margin:0auto;
text-align:center;
}
.barcon1{
font-size:17px;
float:left;
margin-top:20px;
}
.barcon2{
float:right;
}
.barcon2ul{
margin:20px0;
padding-left:0;
list-style:none;
text-align:center;
}
.barcon2li{
display:inline;
}
.barcon2a{
font-size:16px;
font-weight:normal;
display:inline-block;
padding:5px;
padding-top:0;
color:black;
border:1pxsolid#ddd;
background-color:#fff;
}
.barcon2a:hover{
background-color:#eee;
}
.ban{
opacity:.4;
}
</style>
</head>
<body>
<tablewidth="950"cellpadding="0"cellspacing="0"class="table2"align="center">
<thead>
<tr>
<tdcolspan="3"height="33"class="td0"></td>
<tdalign="center"class="td2"><ahref="###">添加用户</a></td>
</tr>
<tralign="center">
<thwidth="150"height="33"class="td2">序号</th>
<thwidth="300"class="td2">用户名</th>
<thwidth="250"class="td2">权限</th>
<thwidth="250"class="td2">操作</th>
</tr>
</thead>
<tbodyid="adminTbody">
<tralign="center">
<tdclass="td2"height="33"width="150">1</td>
<tdclass="td2">admin</td>
<tdclass="td2">管理员</td>
<tdclass="td2"><ahref="###">修改</a></td>
</tr>
</tbody>
</table>
<divid="barcon"class="barcon">
<divid="barcon1"class="barcon1"></div>
<divid="barcon2"class="barcon2">
<ul>
<li><ahref="###"id="firstPage">首页</a></li>
<li><ahref="###"id="prePage">上一页</a></li>
<li><ahref="###"id="nextPage">下一页</a></li>
<li><ahref="###"id="lastPage">尾页</a></li>
<li><selectid="jumpWhere">
</select></li>
<li><ahref="###"id="jumpPage"onclick="jumpPage()">跳转</a></li>
</ul>
</div>
</div>
<scriptsrc="jquery.js"></script>
<script>
/*动态生成用户函数
num为生成的用户数量
*/
functiondynamicAddUser(num){
for(vari=1;i<=num;i++)
{
vartrNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
vartdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width="150px";
tdNodeNum.style.height="33px";
tdNodeNum.className="td2";
//用户名
vartdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width="300px";
tdNodeName.className="td2";
//权限
vartdNodePri=document.createElement("td");
tdNodePri.style.width="250px";
tdNodePri.className="td2";
varpriText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
vartdNodeOper=document.createElement("td");
tdNodeOper.style.width="170px";
tdNodeOper.className="td2";
vareditA=document.createElement("a");
$(editA).attr("href","###").text("编辑");
$(editA).css({display:"inline-block"});
tdNodeOper.appendChild(editA);
trNode.appendChild(tdNodeNum);
trNode.appendChild(tdNodeName);
trNode.appendChild(tdNodePri);
trNode.appendChild(tdNodeOper);
$("#adminTbody")[0].appendChild(trNode);
}
}
$(function(){
dynamicAddUser(80);
goPage(1,10);
vartempOption="";
for(vari=1;i<=totalPage;i++)
{
tempOption+='<optionvalue='+i+'>'+i+'</option>'
}
$("#jumpWhere").html(tempOption);
})
/**
*分页函数
*pno--页数
*psize--每页显示记录数
*分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
*纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
varpageSize=0;//每页显示行数
varcurrentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
vartotalPage;//总页数
functiongoPage(pno,psize){
varitable=document.getElementById("adminTbody");
varnum=itable.rows.length;//表格所有行数(所有记录数)
pageSize=psize;//每页显示行数
//总共分几页
if(num/pageSize>parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
varcurrentPage=pno;//当前页数
currentPage_=currentPage;
varstartRow=(currentPage-1)*pageSize+1;
varendRow=currentPage*pageSize;
endRow=(endRow>num)?num:endRow;
//遍历显示数据实现分页
/*for(vari=1;i<(num+1);i++){
varirow=itable.rows[i-1];
if(i>=startRow&&i<=endRow){
irow.style.display="";
}else{
irow.style.display="none";
}
}*/
$("#adminTbodytr").hide();
for(vari=startRow-1;i<endRow;i++)
{
$("#adminTbodytr").eq(i).show();
}
vartempStr="共"+num+"条记录分"+totalPage+"页当前第"+currentPage+"页";
document.getElementById("barcon1").innerHTML=tempStr;
if(currentPage>1){
$("#firstPage").on("click",function(){
goPage(1,psize);
}).removeClass("ban");
$("#prePage").on("click",function(){
goPage(currentPage-1,psize);
}).removeClass("ban");
}else{
$("#firstPage").off("click").addClass("ban");
$("#prePage").off("click").addClass("ban");
}
if(currentPage<totalPage){
$("#nextPage").on("click",function(){
goPage(currentPage+1,psize);
}).removeClass("ban")
$("#lastPage").on("click",function(){
goPage(totalPage,psize);
}).removeClass("ban")
}else{
$("#nextPage").off("click").addClass("ban");
$("#lastPage").off("click").addClass("ban");
}
$("#jumpWhere").val(currentPage);
}
functionjumpPage()
{
varnum=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
</script>
</body>
</html>

⑵ 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');

⑶ JS分页代码

纯粹的JS可以分页,但是起不到分页真正的效果.分页是为了根据需要分段查询数据表记录,减轻数据库压力,提高查询速度.用纯JS做分业,还是要一次把所有数据查出,然后在页面上通过DOM对象属性做虚假的分页.是没有什么意义的.

⑷ js 分页问题。根据页面高度进行分页

⑸ 怎样用JS实现网站分页，得到JS代码后如何使用

你是要ajax？建议用ajax的框架，假如你是用java的 ajaxanywhere是个比较好的框架。net直接拖就行了。。纯粹的js的分页那有什么意义？数据不分页的话，数据都读到页面上了，你服务器内存不会溢出吗

⑹ 如何用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 ;
}

运行效果：

⑺ JS分页处理的问题

你的代码是前6页，后6页
要修改成为10页是什么意思？
是前十页后十页？那么把6改为10
如果总页数为十页，那就是前五页后五页，把6改成5就好
if
(pageNum
<
15)
{//这个是小于15页时
for
(var
i
=
0;
i
<
6;
i++)
{//前6页
for
(var
i
=
pageNum
-
6;
i
<
pageNum
-
1;
i++)
{//后6页
修改6为你想要的对应的页数就可以了

⑻ 在mvc4.0中怎么用js实现分页技术

MVC项目中有的时候List的条数比较多，需要分页显示，可以用如下的办法：
1、写一个简单PaginatedList 辅助类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

public class PaginatedList<T> : List<T> {
public int PageIndex { get; private set; }
public int PageSize { get; private set; }
public int TotalCount { get; private set; }
public int TotalPages { get; private set; }
public PaginatedList(IQueryable<T> source, int pageIndex, int pageSize) {
PageIndex = pageIndex;
PageSize = pageSize;
TotalCount = source.Count();
TotalPages = (int) Math.Ceiling(TotalCount / (double)PageSize);
this.AddRange(source.Skip(PageIndex * PageSize).Take(PageSize));
}
public bool HasPreviousPage {
get {
return (PageIndex > 0);
}
}
public bool HasNextPage {
get {
return (PageIndex+1 < TotalPages);
}
}
}

2、Controller中使用这个PaginatedList 类来返回View：

1
2
3
4
5
6

public ActionResult Index(int? page) {
const int pageSize = 10;
var upcomingDinners = dinnerRepository.FindUpcomingDinners();
var paginatedDinners = new PaginatedList<Dinner>(upcomingDinners, page ?? 0,pageSize);
return View(paginatedDinners);
}

3、View中实现导航链接的Code如下：

1
2
3
4
5
6
7
8

<% if (Model.HasPreviousPage) { %>
<%= Html.RouteLink("<<<", "UpcomingDinners", new { page =
(Model.PageIndex-1) }) %>
<% } %>
<% if (Model.HasNextPage) { %>
<%= Html.RouteLink(">>>", "UpcomingDinners", new { page = (Model.PageIndex +
1) }) %>
<% } %>

导航:首页 > 源码编译 > js分页算法

js分页算法

与js分页算法相关的资料