jquery实现前端分页,前后端分页
jquery怎么配置分页
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""
作为一家“创意+整合+营销”的成都网站建设机构，我们在业内良好的客户口碑。成都创新互联公司提供从前期的网站品牌分析策划、网站设计、网站设计制作、成都网站设计、创意表现、网页制作、系统开发以及后续网站营销运营等一系列服务，帮助企业打造创新的互联网品牌经营模式与有效的网络营销方法,创造更大的价值。
html xmlns=""
head
titlejquery分页控件/title
script src="jquery-1.3.min.js" type="text/javascript"/script
/head
body
div class="pager"/div
!--div
select class="SEID"
option10/option
option selected="selected" 20/option
option30/option
/select
div class="first"首页/div
div class="pre"上一页/div
div class="centerclass"/div
div class="next"下一页/div
div class="last"最后一页/div
input type="text" value="1" / ofspan class="totelspan"0/span
/div--
/body
/html
script type="text/javascript"
var pageindex=1;
var totelsize=60;
var centersize=5;
var pagesize=0;
var totelSec=0;
var outStr="";
var se="select class=\"SEID\""
+"option5/option"
+"option selected=\"selected\" 10/option"
+"option15/option"
+"/select";
var firstdiv="div class=\"first\"首页/div";
var prediv="div class=\"pre\"上一页/div";
var centerdiv="div class=\"centerclass\"/div";
var nextdiv="div class=\"next\"下一页/div";
var lastdiv="div class=\"last\"最后一页/div";
$('.pager').empty();
$('.pager').append(se)
$('.pager').append(firstdiv)
$('.pager').append(prediv)
$('.pager').append(centerdiv)
$('.pager').append(nextdiv)
$('.pager').append(lastdiv)
function PageInit()
{
var size=0;
var barObj=this;
var PageReinit=function()
{
pagesize=$(".SEID option:selected")[0].innerText;
size=parseInt(totelsize/pagesize)
var lastSize=totelsize%pagesize;//最后一页显示记录
if(lastSize0)
{
size=size+1;
}
totelSec=parseInt(size/centersize);
var leftSize=size%centersize;//最后一个区段的显示记录
if(leftSize0)
{
totelSec =totelSec+1;
}
PageBarinit();
}
var reSetPage=function()
{
pageindex=1;
pagesize=0;
totelSec=0;
outStr="";
}
// alert('总页数:'+size)
// alert('总区段:'+totelSec)
// alert('每页记录数：'+pagesize);
var SeClick=function(e)
{
var Selectindex=e.target[e.target.selectedIndex].innerText;
pagesize=parseInt(Selectindex);
alert('每页显示：'+Selectindex);
reSetPage();
PageReinit();
}
var firstClick=function(e)
{
alert('点击到首页');
if(pageindex!=1)
{
pageindex=1;
alert('到了第1页');
}
}
var preClick=function(e)
{
alert('点击到上一页');
if(pageindex!=1)
{
pageindex =pageindex-1;
alert('到了第'+pageindex+'页');
}
ChangeCenterBar(pageindex+1);
}
var pageClick=function(e)
{
var targePage=parseInt(e.target.innerText);
pageindex=targePage;
alert('点击了第'+targePage+"页");
ChangeCenterBar(targePage);
}
var nextClick=function(e)
{
alert('点击了下一页');
if(pageindexsize)
{
pageindex =pageindex+1;
if(pageindex==size)
{
alert('到了最后一页');
}
else{
alert('到了第'+pageindex+'页');
}
}
ChangeCenterBar(pageindex-1);
}
var lastClick=function(e)
{
alert('点击了最后一页');
if(pageindexsize)
{
pageindex=size;
alert('到了第'+size+'页');
}
}
var ChangeCenterBar=function(CurrentIndex)
{
var currentSec=parseInt(CurrentIndex/centersize);
if( CurrentIndex%centersize==1)
{
if(currentSectotelSec)
{ PageBarinit();}
}
if(CurrentIndex%centersize==0)
{
var currentSec=parseInt(CurrentIndex/centersize);
if(currentSectotelSec)
{ PageBarinit();}
}
}
var PageBarinit=function()
{
$('.SEID').unbind('change',SeClick);
$('.first').unbind('click',firstClick);
$('.pre').unbind('click',preClick);
$('.next').unbind('click',nextClick);
$('.last').unbind('click',lastClick);
$('.SEID').bind('change',SeClick);
$('.first').bind('click',firstClick);
$('.pre').bind('click',preClick);
$('.next').bind('click',nextClick);
$('.last').bind('click',lastClick);
if(size=centersize)
{
$('.centerclass').empty();
for(var i=1;i=size;i++)
{
var cdiv="span id='Page_"+String(i)+"'"+i+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+i).bind('click',pageClick);
}
}else if(sizecentersize)
{
$('.centerclass').empty();
if( pageindex%centersize==0)
{
var currentSec=parseInt(pageindex/centersize);//当前区段
if(currentSectotelSec)
{
// alert(9)
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=currentSec*centersize;startIndex++)
{
//alert(startIndex)
//alert('最大'+currentSec*centersize);
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=currentSec*centersize;startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else{
alert('分页出错');
}
}else if(pageindex%centersize0)
{
var currentSec=parseInt(pageindex/centersize)+1;//当前区段
if(currentSectotelSec)
{
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=((currentSec-1)*centersize+centersize);startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}
else if(currentSec==totelSec){
var startIndex=(currentSec-1)*centersize+1;
for(startIndex;startIndex=((currentSec-1)*centersize +size%centersize);startIndex++)
{
var cdiv="span id='Page_"+String(startIndex)+"'"+startIndex+"/span";
$('.centerclass').append(cdiv);
$("#Page_"+startIndex).bind('click',pageClick);
}
}else
{
alert('分页出错');
}
}
}
}
PageReinit();
}
PageInit();
/script
怎么用jquery分页呢？
jQuery Pagination分页插件
使用方法
跟一般的jQuery插件一样，此插件使用也很简单便捷。方法是pagination，例如$("#page").pagination(100);
$("#Pagination").pagination(56, {
num_edge_entries: 2,
num_display_entries: 4,
callback: pageselectCallback,
items_per_page: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 copy print?
!doctype html
html
head
meta charset='utf-8'
style type="text/css"
a{
text-decoration: none;
}
.table2{
border:#C8C8C8 solid;
border-width:1px 0px 0px 1px;
background: #F3F0F0;
margin-top:25px;
}
.td0{
border:#C8C8C8 solid;
border-width:0 0 1px 0;
}
.td2{
border:#C8C8C8 solid;
border-width:0 1px 1px 0 ;
}
.barcon {
width: 1000px;
margin: 0 auto;
text-align: center;
}
.barcon1 {
font-size: 17px;
float: left;
margin-top: 20px;
}
.barcon2 {
float: right;
}
.barcon2 ul {
margin: 20px 0;
padding-left: 0;
list-style: none;
text-align: center;
}
.barcon2 li {
display: inline;
}
.barcon2 a {
font-size: 16px;
font-weight: normal;
display: inline-block;
padding: 5px;
padding-top: 0;
color: black;
border: 1px solid #ddd;
background-color: #fff;
}
.barcon2 a:hover{
background-color: #eee;
}
.ban {
opacity: .4;
}
/style
/head
body
table width="950" cellpadding="0" cellspacing="0" class="table2" align="center"
thead
tr
td colspan="3" height="33" class="td0" /td
td align="center" class="td2"a href="###"添加用户/a/td
/tr
tr align="center"
th width="150" height="33" class="td2"序号/th
th width="300" class="td2"用户名/th
th width="250" class="td2"权限/th
th width="250" class="td2"操作/th
/tr
/thead
tbody id="adminTbody"
tr align="center"
td class="td2" height="33" width="150"1/td
td class="td2" admin/td
td class="td2" 管理员/td
td class="td2" a href="###"修改/a/td
/tr
/tbody
/table
div id="barcon" class="barcon"
div id="barcon1" class="barcon1"/div
div id="barcon2" class="barcon2"
ul
lia href="###" id="firstPage"首页/a/li
lia href="###" id="prePage"上一页/a/li
lia href="###" id="nextPage"下一页/a/li
lia href="###" id="lastPage"尾页/a/li
liselect id="jumpWhere"
/select/li
lia href="###" id="jumpPage" onclick="jumpPage()"跳转/a/li
/ul
/div
/div
script src="jquery.js"/script
script
/*动态生成用户函数
num为生成的用户数量
*/
function dynamicAddUser(num){
for(var i=1;i=num;i++)
{
var trNode=document.createElement("tr");
$(trNode).attr("align","center");
//序号
var tdNodeNum=document.createElement("td");
$(tdNodeNum).html(i+1);
tdNodeNum.style.width = "150px";
tdNodeNum.style.height = "33px";
tdNodeNum.className = "td2";
//用户名
var tdNodeName=document.createElement("td");
$(tdNodeName).html("lzj"+i);
tdNodeName.style.width = "300px";
tdNodeName.className = "td2";
//权限
var tdNodePri=document.createElement("td");
tdNodePri.style.width = "250px";
tdNodePri.className = "td2";
var priText=document.createElement("span");
$(priText).css({"display":"inline-block","text-align":"center"});
$(priText).text("普通用户");
tdNodePri.appendChild(priText);
//操作
var tdNodeOper = document.createElement("td");
tdNodeOper.style.width = "170px";
tdNodeOper.className = "td2";
var editA = 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);
var tempOption="";
for(var i=1;i=totalPage;i++)
{
tempOption+='option value='+i+''+i+'/option'
}
$("#jumpWhere").html(tempOption);
})
/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/
var pageSize=0;//每页显示行数
var currentPage_=1;//当前页全局变量，用于跳转时判断是否在相同页，在就不跳，否则跳转。
var totalPage;//总页数
function goPage(pno,psize){
var itable = document.getElementById("adminTbody");
var num = itable.rows.length;//表格所有行数(所有记录数)
pageSize = psize;//每页显示行数
//总共分几页
if(num/pageSize parseInt(num/pageSize)){
totalPage=parseInt(num/pageSize)+1;
}else{
totalPage=parseInt(num/pageSize);
}
var currentPage = pno;//当前页数
currentPage_=currentPage;
var startRow = (currentPage - 1) * pageSize+1;
var endRow = currentPage * pageSize;
endRow = (endRow num)? num : endRow;
//遍历显示数据实现分页
/*for(var i=1;i(num+1);i++){
var irow = itable.rows[i-1];
if(i=startRow i=endRow){
irow.style.display = "";
}else{
irow.style.display = "none";
}
}*/
$("#adminTbody tr").hide();
for(var i=startRow-1;iendRow;i++)
{
$("#adminTbody tr").eq(i).show();
}
var tempStr = "共"+num+"条记录 分"+totalPage+"页 当前第"+currentPage+"页";
document.getElementById("barcon1").innerHTML = tempStr;
if(currentPage1){
$("#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(currentPagetotalPage){
$("#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);
}
function jumpPage()
{
var num=parseInt($("#jumpWhere").val());
if(num!=currentPage_)
{
goPage(num,pageSize);
}
}
/script
/body
/html
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');
}
});
});
jquery前端分页代码怎么写
jPaginate 是一款非常精致的分页插件，提供了五种不同风格的分页效果，支持鼠标悬停翻页，快速分页功能。
这款插件还提供了丰富的配置选项，你可以根据需要进行设置。
怎么样实现分页jquery，ajax
这个有插件的
建议你在 百度搜索，傲隆盛 一般的 做法有前端对数据处理
或者是后端对数据分页，然后使用ajax去根据分页数据分别获取
如果数据量很大 aols
建议你在后台的程序分页后，用ajax去获取再前端再展示
希望对你有帮助！
网站栏目：jquery实现前端分页,前后端分页
本文URL：http://azwzsj.com/article/dscjgsi.html
