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去获取再前端再展示

希望对你有帮助！