java分页代码无刷新_ajax实现的无刷新分页代码实例

不念不忘少年蓝@ 2022-11-06 13:56 312阅读 0赞

一.html代码部分:

序号标题地点已报名类别操作

首页

尾页

二.ajax代码部分:

var pageSize = "10";//每页行数

var currentPage = "1";//当前页

var totalPage = "0";//总页数

var rowCount = "0";//总条数

var params="";//参数

var url="activity\_list.action";//action

$(document).ready(function()\{//jquery代码随着document加载完毕而加载

//分页查询

function queryForPages()

$.ajax(\{

url:url,

type:'post',

dataType:'json',

data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params,

success:function callbackFun(data)

//解析json

var info = eval("("+data+")");

//清空数据

clearDate();

fillTable(info);

\});

//填充数据

function fillTable(info)

if(info.length>1)

totalPage=info\[info.length-1\].totalPage;

var tbody\_content="";//不初始化字符串"",会默认"undefined"

for(var i=0;i

tbody\_content +="

\+"

"+(i+1+(currentPage-1)\*pageSize)+""

\+"

"+info\[i\].title.substr(0,20)+""

\+"

"+info\[i\].address.substr(0,6)+""

\+"

"+info\[i\].quota\_sign+"人"

\+"

"+info\[i\].type+""

\+"

编辑"

\+"

$("\#t\_body").html(tbody\_content);

else

$("\#t\_head").html("");

$("\#t\_body").html("

"+info.msg+"

");

//清空数据

function clearDate()

$("\#t\_body").html("");

//搜索活动

$("\#searchActivity").click(function()\{

queryForPages();

\});

//首页

$("\#firstPage").click(function()\{

currentPage="1";

queryForPages();

\});

//上一页

$("\#previous").click(function()\{

if(currentPage>1)

currentPage-- ;

queryForPages();

\});

//下一页

$("\#next").click(function()\{

if(currentPage

currentPage++ ;

queryForPages();

\});

//尾页

$("\#last").click(function()\{

currentPage = totalPage;

queryForPages();

\});

11111111111

posted on

2015-12-31 10:53

土dou

阅读(120)

编辑

java分页代码无刷新_ajax实现的无刷新分页代码实例

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关帝国 php ajax分页,怎么在php中利用ajax实现一个无刷新分页功能

相关 jq分页不刷新页面_jQuery+Ajax实现无刷新分页

相关 java分页代码无刷新_ajax实现的无刷新分页代码实例

相关 mvc4 ajax 分页,asp.net Mvc4 使用ajax结合分页插件实现无刷新分页

相关 jquery pagination 实现无刷新的分页

相关简单的ASP.NET无刷新分页

相关实现无刷新分页:后台数据查询

相关 Ajax实现无刷新分页效果

相关 tp5+ajax+jq实现无刷新分页

相关在Thinkphp中使用AJAX实现无刷新分页