关于AJAX做分页的问题

obf13 2018-03-08 01:51:49
参考了网上几个代码,写的,但是click事件始终无法执行。

var curPage = 1; //当前页码
var total,pageSize,totalPage;
//获取数据
function getData(page){
$.ajax({
type: 'POST',
url: 'page.php',
data: {'pageNum':page-1},
dataType:'json',
success:function(json){
$("#tablebody").empty();
total = json.total; //总记录数
pageSize = json.pageSize; //每页显示条数
curPage = page; //当前页
totalPage = json.totalPage; //总页数
var table_html = "";
var list = json.list;
$.each(list,function(index,array){ //遍历json数据列
table_html += "<tr><td><input type='checkbox' value='check'></td><td contentEditable='true'>"+array['id']+"</td><td>"+array['phonenumber']+"</td><td>"+array['username']+"</td><td><select id='permission' name='type'><option value ='present'>"+array['permission']+"</option><option value ='none'>无权限</option><option value ='all'>管理员</option><option value ='order'>订单管理</option><option value ='customer'>客户管理</option><option value ='supplier'>供应商管理</option><option value ='company'>车辆管理</option><option value ='warehouse'>仓库管理</option></select></td></tr>";
});
$("#tablebody").append(table_html);
},
complete:function(){ //生成分页条
getPageBar();
},
error:function(){
alert("数据加载失败");
}
});
}

//获取分页条
function getPageBar(){
//页码大于最大页数
if(curPage>totalPage) curPage=totalPage;
//页码小于1
if(curPage<1) curPage=1;
pageStr = "";

//如果是第一页
if(curPage==1){
//
//<li class='active'><a href='javascript:void(0)'>1</a></li>
pageStr += "<li><a href='javascript:void(0)' rel='1'>1</a></li><li><a href='javascript:void(0)' rel='2'>2</a></li><li><a href='javascript:void(0)'>3</a></li><li><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></li><li><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></li>";
} else if(curPage>=totalPage){
pageStr += "<li><a href='javascript:void(0)' rel='1'>首页</a></li><li><a href='javascript:void(0)' rel='"+(parseInt(curPage)-1)+"'>上一页</a></li><li><a href='javascript:void(0)' rel='1'>1</a></li><li><a href='javascript:void(0)' rel='1'>1</a></li><li><a href='javascript:void(0)' rel='2'>2</a></li><li><a href='javascript:void(0)'>3</a></li><li><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></li><li><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></li>";
} else {
pageStr += "<li><a href='javascript:void(0)' rel='1'>1</a></li><li><a href='javascript:void(0)' rel='2'>2</a></li><li><a href='javascript:void(0)'>3</a></li><li><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>下一页</a></li><li><a href='javascript:void(0)' rel='"+totalPage+"'>尾页</a></li>";
}

$("#one").html(pageStr);
}


$(document).ready(function(){
getData(1);
$("#one li a").on('click',function(){
alert('a被点击了');
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
});


<?php

session_start();
include "conn/conn.php";

$page = intval($_POST['pageNum']);

$result = mysql_query("select id from tb_user");
$total = mysql_num_rows($result);//总记录数

$pageSize = 10; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数

$startPage = $page*$pageSize;
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,phonenumber,username,permission from tb_user order by id desc limit $startPage,$pageSize");
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'phonenumber' => $row['phonenumber'],
'username' => $row['username'],
'permission' => $row['permission']
);
}
//print_r($arr);
echo json_encode($arr);
?>


<div class="manageNumber">
<nav aria-label="Page navigation" style="padding-left:50px">
<ul class="pagination pagination-sm" id="one">
</ul>
</nav>
</div>
...全文
360 1 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
obf13 2018-03-08
  • 打赏
  • 举报
回复
已解决
$(document).on('click','#pagecount li a',function(){
        var rel = $(this).attr("rel");
        if(rel){
            getData(rel);
        }
    });
这是一个实际使用中的项目,可访问 http://cdbke.cuit.edu.cn 可查看效果及功能,后台需要登录后才能使用(出于安全性考虑这里就不给大家介绍了,另外还有一个struts1版本的,如有需要可以与我联系)。 此项目整合了目前主流和最前源的web开发技术:采用ehcache实现二级缓存(包含查询缓存);用sf4j及logback(log4j的升级版)记录日志;proxool(据说是dbcp和c3p0三者中最优秀的)连接池;使用jquery的ajax实现仿google人名自动补全;头像上传剪切压缩处理。 包含有完整的jar包和源代码,可以直接下载编译部署和运行,这是专门为我们实验室定制开发的。虽然后台逻辑并不复杂,但已经包含了架构基于s2sh技术型系统的全部基础部分:如分页,缓存,文件上传,连接池等。很适合学习使用,希望对初学JavaEE WEB开的人有所帮助。 这个资源在去年发布了第一版,已经有很多朋友下了觉得对他们有帮助,所以我才再发了一个第二版,希望对有需要的朋友有所帮助。本版本全面更新了jar包,全部使用了当前最新版本的jar包,struct2.1.8 spring3 hibernate3.5,全面使用注解取代xm的l配置。 另外增加了一个ant构建脚本,支持使用hudson完成每日构建,持续集成,自动测试,代码规范检查,代码审查等功能(与此相关的jar包由于上传文件大小限制未导入) 本系统一直在使用中,所以还会不段更新,之后我打算再一个基于javaee6的实现,给需要想学习ejb3.1等技术的朋友一个参考实现 集成测试相关jar包和更新构建脚本下载:http://download.csdn.net/source/2427972

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧