JQuery实现分页查询

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>分页查询</title>
<script type="text/javascript" src="js/jquery-1.10.1.js"></script><script type="text/javascript">$(function(){$.ajax({type:"post",url:"getJsonLen.do",success:function(data){$("#maxPages").val(data);},error:function(){alert("网络错误，请稍后再试");}});queryData(1);});/*** 根据选择执行对应的代码* @param select*/function queryDataSelect(select){var currentPage=parseInt($("#currentPage").val());switch (select){case 1:queryData(1);break;case 2:var queryPageVal=currentPage-1;if (queryPageVal<1){alert("已经是第一页了");}else{queryData(queryPageVal);}break;case 3:var queryPageVal=currentPage+1;if (queryPageVal>$("#maxPages").val()){alert("这已经是最后一页了")}else {queryData(queryPageVal);}break;case 4:var queryPageVal=$("#maxPages").val();queryData(queryPageVal);break;}}/*** 查询一页用户的信息* @param pageNum*/function queryData(pageNum){$.ajax({type:"post",url:"queryData.do",data:{"pageNum":pageNum},success:function(data){var tableContent="<tr></te><td>名字</td><td>姓名</td></tr>";$.each(data,function(index,item){tableContent+= "<tr><td>"+item.name+"</td><td>"+item.age+"</td></tr>";});$("#userTable").html(tableContent);$("#currentPage").val(pageNum);},error:function(){alert("网络错误，请稍后再试");}});}</script>
</head>
<body>
<div align="center"><table id="userTable"></table><div><a href="#" onclick="queryDataSelect(1);">首页</a><a href="#" onclick="queryDataSelect(2);">上一页</a><a href="#" onclick="queryDataSelect(3);">下一页</a><a href="#" onclick="queryDataSelect(4);">尾页</a></div><div><input type="hidden" id="currentPage" value="1"/><input type="hidden" id="maxPages"/></div>
</div>
</body>
</html>

JQuery实现分页查询相关推荐

php ajax mysql 分页查询_PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
1.首先做主页面Ajax_pag.php 代码如下: Ajax做分页 .header{ margin-top: 20px; } 关键字: 地区代号地区名称父级代号 2.然后做分页查询JS页面Ajax_ ...
JavaWeb-综合案例(用户信息)-学习笔记05【分页查询功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
Bootstrap4+MySQL前后端综合实训-Day06-PM【MD5加码-生成32位md5码、ResultData.java、分页查询用户数据、添加用户按钮的实现】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 MD5加码生成32位md5码 ResultData.java 分页查询 ...
Bootstrap4+MySQL前后端综合实训-Day06-AM【eclipse详细配置Tomcat、开发web项目、servlet、连接MySQL8.0数据库、用户登录界面的编写与验证、分页查询】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录 eclipse重置视图 MySQL数据库--建数据库.建数据库 s ...
easyui datatable ajax 加载数据,ASP.NET easyUI--datagrid 通过ajax请求ASP.NET后台数据的分页查询...
js前台对datagrid的定义代码,如下 mygrid = $('#mytable').datagrid({ fit: true, //自动大小 height: 'auto', rownumbers ...
帆软按钮控件变查询_帆软报表（多sheet）自定义分页查询
三.添加自定义按钮以及JS事件 1.打开'模板Web属性' 2.选中'填报页面设置',修改2)为'为模板单独设置',3)中是前面七个是添加的自定义按钮:通过4)按钮进行设置:5)操作是添加'加载结束' ...
Maven分布式工程-分页查询（一）
第一步: 在foreknow-manager-web 包下 WEB-INF/web.xml 配置web.xml 中央控制器 <?xml version="1.0" encod ...
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询）
Spring+SpringMVC+MyBatis明日方舟版人员信息管理系统前端页面代码(前后端交互+SSM框架管理员登录游客登录普通用户登录人员的增删改查信息更新图片上传分页查询修改密 ...
关于JavaWeb的分页查询的实现
思路: 1.首先先对显示信息的页面的对象进行封装,以便后面的调用 2. 控制层(controller)获取查询条件以及当前页码,将参数传递业务逻辑层(service) 3. 业务逻辑层(service ...

JQuery实现分页查询

JQuery实现分页查询相关推荐

最新文章

热门文章