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分頁演算法相關的資料