1. 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>
2. 那個jQuery插件實現分頁，代碼中是如何實現的
<%
page=clng(request("page"))
Set rs=Server.CreateObject("ADODB.RecordSet")
if BigClass<>"" and SmallClass <>"" then
sql="select * from news where BigClassName='"&BigClass&"' and SmallClassName='"&SmallClass&"' order by id desc"
rs.Open sql,conn,1,1
elseif BigClass<>"" then
sql="select * from news where BigClassName='"&BigClass&"' order by id desc"
rs.Open sql,conn,1,1
end if
if rs.eof and rs.bof then
response.Write("暫時沒有記錄")
else
%>
<div class="newslist">
<%
rs.PageSize=20
if page=0 then page=1
pages=rs.pagecount
if page > pages then page=pages
rs.AbsolutePage=page
for j=1 to rs.PageSize
%>
<ul><li><span class="time"><%= RS("AddDate") %></span><a href="news_info.asp?id=<%= RS("id") %>" target="_blank"><%= RS("TITLE") %></a></li></ul>
<%
rs.movenext
if rs.eof then exit for
next
%>
</div>
<div class="clear"></div>
<div class="pagePanel pagePane2">
<ul><li class="cr"><form method=Post action="news.asp?BigClass=<%=BigClass%>&SmallClass=<%=SmallClass%>">
<%if Page<2 then
response.write "首頁 上一頁 "
else
response.write "<a href=NewsClass.asp?BigClass="&BigClass&"&SmallClass="&SmallClass&"&page=1>首頁</a> "
response.write "<a href=NewsClass.asp?BigClass="&BigClass&"&SmallClass="&SmallClass&"&page=" & Page-1 & ">上一頁</a> "
end if
if rs.pagecount-page<1 then
response.write "下一頁 尾頁"
else
response.write "<a href=NewsClass.asp?BigClass="&BigClass&"&SmallClass="&SmallClass&"&page=" & (page+1) & ">"
response.write "下一頁</a> <a href=NewsClass.asp?BigClass="&BigClass&"&SmallClass="&SmallClass&"&SmallClass="&SmallClass&"&page="&rs.pagecount&">尾頁</a>"
end if
response.write " 頁次：<strong><font color=red>"&Page&"</font>/"&rs.pagecount&"</strong>頁 "
response.write " 共<b><font color='#FF0000'>"&rs.recordcount&"</font></b>條記錄 <b>"&rs.pagesize&"</b>條記錄/頁"
response.write " 轉到：<input type='text' name='page' size=4 maxlength=10 class=input value="&page&">"
response.write " <input class=input type='submit' value=' Goto ' name='cndok'></span></p>"
%>
</form></li></ul>
<div class="clear"></div>
</div><%
end if
rs.close
set rs=nothing
%>
3. jquery基於客戶端分頁
你的表格可以這樣設計：
<table cellpadding="0" cellspacing="0" border="0">
<thead>
<tr>
<th> </th>
<th class="sort-title">Title</th>
<th class="sort-author">Author(s)</th>
<th class="sort-date">Publish Date</th>
<th class="sort-price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="./img/1.gif" width="97" height="25" alt="Buliding Website"/>
</td>
<td>E見周五為歐式的方式浪費時間都</td>
<td>Nagen Graf</td>
<td>May 2004</td>
<td>$50.09</td>
</tr>
<tr>***</tr>
</tobdy>
</body>
然後js代碼可以這樣寫：試試看，不行的話歡迎在線交流，
$(document).ready(function()
{
var $table = $('table');
//分頁效果
var currentPage = 0; //當前頁
var pageSize = 10; //每頁行數（不包括表頭）
//綁定分頁事件
$table.bind('repaginate', function()
{
$table.find('tbody tr').hide()
.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});
var numRows = $table.find('tbody tr').length; //記錄宗條數
var numPages = Math.ceil(numRows/pageSize); //總頁數
var $pager = $('<div class="page"></div>'); //分頁div
for( var page = 0; page < numPages; page++ )
{
//為分頁標簽加上鏈接
$('<a href="#" ><span>'+ (page+1) +'</span></a>')
.bind("click", { "newPage": page }, function(event)
{
currentPage = event.data["newPage"];
$table.trigger("repaginate");
})
.appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table); //分頁div插入table
$table.trigger("repaginate"); //初始化
});
4. 請教jQuery EasyUI的DataGrid如何實現滾動追加分頁方式
jQuery EasyUI datagrid實現本地分頁的方法。分享給大家供大家參考。具體如下：
一般分頁都是後台做，前端做無論從哪方面考慮都不合適。但是有的時候還是有這種需求。
這里重點用到了pagination的監聽，以及JS數組的slice方法來完成。
5. Jquery + Json 前台Table動態分頁
就是和JSP，php等的分頁差不多呀，不過用JAVASCRIPT時間罷了。
要知道當前是第幾頁，共有多少條記錄，每頁幾條就差不多了。
不過話說回來，你這個方法不太好吧？如果無理解錯你的意思是先把全部數據都讀出來，再在前台用jquery處理分頁顯示？如果是這樣的話，可能會浪費不少哦，比如資料庫有1W條記錄的話，一次過全部讀出來就很浪費了，也沒幾個人會翻1千頁吧？如果是的話那這個方法還行。
6. jquery 分頁
可用
function fenye(var page){
$.ajax（
url:url,
data:{page:page},
dataType:'json',
success:funtion(data){
//可以在這里出來data的json數據
}
）;
}
7. jqgrid能前台分頁么jqgrid前端分頁和排序的實現
jQuery("#list27").jqGrid({
url:'localset.php',
datatype: "json",
height: 255,
width: 600,
colNames:['Index','Name', 'Code'],
colModel:[
{name:'item_id',index:'item_id', width:65, sorttype:'int'},
{name:'item',index:'item', width:150},
{name:'item_cd',index:'item_cd', width:100}
],
rowNum:50,
rowTotal: 2000, ----一次載入的最大行數
rowList : [20,30,50],
loadonce:true,
----一次載入
mtype: "GET",
rownumbers: true,
rownumWidth: 40,
gridview: true,
pager: '#pager27',
sortname: 'item_id',
viewrecords: true,
sortorder: "asc",
caption: "Loading data from server at once"
});
8. 求大神解決問題,jquery+json分頁怎麼實現最好附上代碼,簡潔一點的。
用jquery ajax非同步技術（$.post））提交頁面顯示記錄的條數（pageSize）以及要顯示的是第幾頁（pageNo）到伺服器，伺服器根據這條數進資料庫去查詢數據（MySQL資料庫用limit，Oracle用rownum偽列來實現分頁查詢），前台pageNo每次加一。分頁所需要的頁數等於資料庫中查詢到的記錄總條數除於pageSize。把頁數，查詢的數據response給前台頁面。再用bootstrap分頁條插件。把分頁條的頁碼超鏈接中的頁數動態獲取。總頁數在資料庫中已經拿到了，修改一下可用
9. jquery 前台數據分頁
// JavaScript Document
$(document).ready(function(){
$('#page_break .num li:first').addClass('on');
$('#page_break .num li').click(function(){
//隱藏所有頁內容
$("#page_break div[id^='page_']").hide();
//顯示當前頁內容。
if ($(this).hasClass('on')) {
$('#page_break #page_' + $(this).text()).show();
} else {
$('#page_break .num li').removeClass('on');
$(this).addClass('on');
$('#page_break #page_' + $(this).text()).fadeIn('normal');
}
});
});
10. 怎麼樣實現分頁jquery，ajax
這個有插件的
建議你在 網路搜索，傲隆盛 一般的 做法有前端對數據處理
或者是後端對數據分頁，然後使用ajax去根據分頁數據分別獲取
如果數據量很大 aols
建議你在後台的程序分頁後，用ajax去獲取再前端再展示
希望對你有幫助！