html ajax实现分页代码,JQuery实现分页程序代码

做Web开发的程序员，分页时在所难免的，微软GridView、AspPager等设置分页数据可以自动分页，但是这里浏览器会闪动，用户体验不是很友好，在此我整理了JQuery实现分页，并且使用。

JQuery绑定模板，显示数据

首先Default.aspx页面需要引用的JS文件

Default.aspx页面js代码，如下,每页条数可以自定义，也可以放置配置文件中，queryString函数是根据URL参数名称，获取参数的值

varpagesize = 10;

varpage = thispage();

$(document).ready(function() {

ajaxList(page);

});

functionqueryString(pname) {

varquery = location.search.substring(1);

varstr ="";

params = query.split("&");

if(params.length > 0) {

for(varninparams) {

varpairs = params[n].split("=");

if(pairs[0] == pname) {

str = pairs[1];

break;

}

}

}

returnstr;

}

functionthispage() {

varr = /^[1-9][0-9]*$/;

if(queryString('page') =='')return1;

if(r.test(queryString('page')))

returnparseInt(queryString('page'));

else

return1;

}

functionajaxList(currentpage) {

if(currentpage !=null) page = currentpage;

$.ajax({

type:"get",//get类型，获取用QueryString方法，post类型，用Form获取传值

dataType:"json",

data:"pageIndex="+ currentpage +"&pagesize="+ pagesize +"&clienttt="+ Math.random(),

url:"Member_Ajax.aspx",

error:function(XmlHttpRequest, textStatus, errorThrown) { alert(XmlHttpRequest.responseText); },

success:function(d) {

switch(d.result) {

case'-1':

Alert(d.returnval);

break;

case'0':

Alert(d.returnval);

break;

case'1':

$("#ajaxList").setTemplateElement("tplList",null, { filter_data:true});

$("#ajaxList").processTemplate(d);

$("#ajaxPageBar").html(d.pagebar);

break;

}

}

});

}

Default.aspx页面Form代码如下，页面数据使用JQuery jTemplates绑定数据，非常方便，只需设置JSON格式数据，引用JS文件即可

ID

姓名

年龄

{#foreach $T.table as record}

{$T.record.Id}

{$T.record.Name}

{$T.record.Age}

{#/for}