利用AjAX+JSP+JSON+MYSQL实现无刷新分页,求实现过程
发布网友
发布时间:2022-04-25 15:22
我来回答
共2个回答
懂视网
时间:2022-04-09 12:30
![](https://img.51dongshi.com/20210302/wz/74826252.jpg)
* 全局变量 */
var index = 1;
var totalPage = 0;
/** 分页窗体事件 */
$(function () {
/**取从Servlect中传到JSP页面的总条数信息 给全局变量totalPage 赋值
* 下为JSP页面中显示当前页和总页数代码
* <span id="index" >1</span><span id="totalPage" >${requestScope.senior.totalPage}</span>
*/
totalPage=$("#totalPage").html();
//首页
$(‘#firstpage‘).click(function () {
if (index != 1) {
index = 1;
paging();/** 点击分页异步刷新函数 */
}
return false;
});
//尾页
$(‘#lastpage‘).click(function () {
if (index != totalPage) {
index = totalPage;
paging();
}
return false;
});
//上一页
$("#beforepage").click(function () {
if (index != 1) {
index = index - 1;
paging();
}
return false;
});
//下一页
$("#nextpage").click(function () {
if (index < totalPage) {
index = index + 1;
paging();
}
return false;
});
})
/** 点击分页 */
function paging(){
ajaxBase("varietyManyServlet?method=paging","index="+index,"inTurn");
/** 给页面显示当前页赋值 */
$("#index").html(index);
}
/** ajax函数工具类
* @param url:地址
* @param data:请求参数
* @param method:方法信号,作用判断进行什么操作
*/
function ajaxBase(url,data,method){
$.ajax({
type:‘post‘,
url:‘‘+url+‘‘,
cache:false,
data:data,
dataType:‘text‘,
success:function(result){
alert("ajax函数工具类:success");
/** 调用登录成功后的操作函数 */
success(result,method);
},
error:function(){
alert("ajax函数工具类:error");
}
});
}
/** 根据method方法信号判断进行什么操作
* @param result:服务端响应的数据
* @param method:方法信号,作用判断进行什么操作
*/
function success(result,method){
if(method=="inTurn"){
/**
* 动态添加EasyUI 中数据
*/
$(‘#MyTable‘).datagrid(‘loadData‘,{total:0,rows:[]});//清空datagrid中所有的数据,!不包括field列名
var data=eval("("+result+")");//转换响应的Json数据
//遍历Json集合 动态追加表格数据。--两种遍历方式。
for(var machine in data){
var row_data={
box:‘<input type="checkbox" />‘,
nickName: data[machine].nickName,
ordinaryPrice: data[machine].ordinaryPrice,
memberPrice: data[machine].memberPrice,
quantity: data[machine].sale.quantity,
grade: data[machine].commentss[0].grade,
path: "<img alt="+data[machine].nickName+" src=‘upload/"+data[machine].path+"‘ width=‘110px‘ height=‘100px‘ >",
add:‘<a name="show" onclick="showDetail(‘+data[machine].id+‘)" >查询详情</a>‘
+‘<a name="check" onclick="checkLgoin(‘+data[machine].id+‘,‘+$("input[name=checkHidden]").val()+‘)" >加入购物车</a>‘
};
$("#MyTable").datagrid(‘appendRow‘,row_data);
}
Ajax异步刷新分页功能-MySQL
标签:
热心网友
时间:2022-04-09 09:38
代码如下:
一.html代码部分:
<table class="table style-5">
<thead id="t_head">
<tr>
<th>序号</th>
<th>标题</th>
<th>地点</th>
<th>已报名</th>
<th>类别</th>
<th>操作</th>
</tr>
</thead>
<tbody id="t_body">
<!-- ajax填充列表 -->
</tbody>
</table>
<button id="firstPage">首页</button>
<button id="previous">上一页</button>
<button id="next">下一页</button>
<button id="last">尾页</button>
二.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<info.length-1;i++)
{
tbody_content +="<tr>"
+"<td data-title='序号' >"+(i+1+(currentPage-1)*pageSize)+"</td>"
+"<td data-title='标题'>"+info[i].title.substr(0,20)+"</td>"
+"<td data-title='地点'>"+info[i].address.substr(0,6)+"</td>"
+"<td data-title='已报名'>"+info[i].quota_sign+"人</td>"
+"<td data-title='类别'>"+info[i].type+"</td>"
+"<td data-title='操作'><a href='<%=request.getContextPath()%>/activity_edit.action?id="+info[i].id+"'>编辑</a></td>"
+"</tr>"
$("#t_body").html(tbody_content);
}
}
else
{
$("#t_head").html("");
$("#t_body").html("<div style='height: 200px;width: 700px;padding-top: 100px;' align='center'>"+info.msg+"</div>");
}
}
//清空数据
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<totalPage)
{
currentPage++ ;
}
queryForPages();
});
//尾页
$("#last").click(function(){
currentPage = totalPage;
queryForPages();
});
});