后台数据,Json实现分页显示附效果图
分类:计算机网络

1.后台action产生json数据。

本文实例讲述了PHP+ajax分页实现方法。分享给大家供大家参考,具体如下:

ajax分页效果图:

需求分析

List blackList = blackService.getBlackInfoList(mobileNum, gatewayid, startDate, endDate); 
int totalRows = blackList.size(); 
StringBuffer sb = new StringBuffer(); 
sb.append("{"totalCount":""+totalRows+"","); 
sb.append(""jsonRoot":["); 
for (int i=0;i<blackList.size();i++) { 
LBlack blackInfo = (LBlack)blackList.get(i); 
sb.append("{"id":""+ blackInfo.getId()); 
sb.append("","); 
sb.append(""mobile":""+ blackInfo.getMobile()); 
sb.append("","); 
sb.append(""province":""+ blackInfo.getProvince()); 
sb.append("","); 
sb.append(""gateway":""+ blackInfo.getGateway()); 
sb.append("","); 
sb.append(""insertTime":""+ blackInfo.getInsertTime()); 
sb.append("","); 
sb.append(""remark":""+ blackInfo.getRemark()); 
sb.append("""); 
sb.append("},"); 
} 
sb.deleteCharAt(sb.lastIndexOf(",")); // 删去最后一个逗号 
sb.append("]}"); 

HttpServletResponse response = ServletActionContext.getResponse(); 
response.setContentType("text/plain"); 
response.getWriter().print(sb);

HTML代码如下:

图片 1

  1)需要首页,末页功能

2.struts.xml相关配置

<html>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta name="GENERATOR" content="PHPEclipse 1.0" />
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<title>title</title>
<mce:script type='text/javascript'><!--
 var http_request=false;
 function send_request(url){//初始化,指定处理函数,发送请求的函数
  http_request=false;
  //开始初始化XMLHttpRequest对象
  if(window.XMLHttpRequest){//Mozilla浏览器
   http_request=new XMLHttpRequest();
   if(http_request.overrideMimeType){//设置MIME类别
    http_request.overrideMimeType("text/xml");
   }
  }
  else if(window.ActiveXObject){//IE浏览器
   try{
   http_request=new ActiveXObject("Msxml2.XMLHttp");
   }catch(e){
   try{
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
   }
  }
  if(!http_request){//异常,创建对象实例失败
   window.alert("创建XMLHttp对象失败!");
   return false;
  }
  http_request.open("GET",url,true);
  http_request.onreadystatechange=processrequest;
  //确定发送请求方式,URL,及是否同步执行下段代码
  http_request.send(null);
 }
 //处理返回信息的函数
 function processrequest(){
  if(http_request.readyState==4){//判断对象状态
   if(http_request.status==200){//信息已成功返回,开始处理信息
   document.getElementById('result').innerHTML=http_request.responseText;
   }
   else{
   //页面不正常
   alert("您所请求的页面不正常!");
   }
  }
 }
 function dopage(url)
 {
  document.getElementById('result').innerHTML="正在读取数据...";
  send_request(url);
 }
// --></mce:script>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<div id='result'>
</div>
</body>
</html>

上干货:

  2)有点击查看上一页,下一页功能

<action name="blackList" class="blackAction" method="blackList"> 
<!--plaintext用于显示页面原始代码的结果类型--> 
<result type="plainText"> 
<param name="charSet">UTF-8</param> 
<param name="location">/WEB-INF/jsp/manage/black.jsp</param> 
</result> 
</action>

php代码如下:

/** 
 * ajax分页 
 */ 
$(function(){ 

 $(".modal-body").find(".pagination").on("click","li",function(){ 
 var totalPage=$(".modal-body").find(".pagination").find(".lilength").length; 
 var pageNo=$(this).find("a").text(); 
 var beforePage=""; 
 //获取之前选中的值 
 $(".modal-body").find(".pagination").find("li").each(function(){ 
  if($(this).hasClass("active")){ 
  beforePage=$(this).find("a").text(); 
  } 
 }); 
 //alert(beforePage); 
 if($(this).find("a").text()=="首页"){ 
  removeClass(); 
  $(".modal-body").find(".pagination").find("li").each(function(){ 
  if($(this).find("a").text()=="1"){ 
   $(this).addClass("active"); 
  } 
  getPlanFy("1"); 
  }); 
 }else if($(this).find("a").text()=="上页"){ 
  if(beforePage==1){ 
  showMessage("已经是第一页了!") 
  }else{ 
  var dqy=parseInt(beforePage)-1; 
  $(".modal-body").find(".pagination").find("li").each(function(){ 
   if($(this).find("a").text()==dqy.toString()){ 
   $(this).addClass("active"); 
   }else{ 
   $(this).removeClass("active"); 
   } 
  }); 
  getPlanFy(dqy); 
  } 
 }else if($(this).find("a").text()=="下页"){ 
  if(beforePage==totalPage){ 
  showMessage("已经是最后一页了!") 
  }else{ 
  var dqy=parseInt(beforePage)+1; 
  $(".modal-body").find(".pagination").find("li").each(function(){ 
   if($(this).find("a").text()==dqy.toString()){ 
   $(this).addClass("active"); 
   }else{ 
   $(this).removeClass("active"); 
   } 
  }); 
  getPlanFy(dqy); 
  } 
 }else if($(this).find("a").text()=="末页"){ 
  removeClass(); 
  $(".modal-body").find(".pagination").find("li").each(function(){ 
  if($(this).find("a").text()==totalPage){ 
   $(this).addClass("active"); 
  } 
  }); 
  getPlanFy(totalPage); 
 }else{ 
  removeClass(); 
  $(this).addClass("active"); 
  getPlanFy(pageNo); 
 } 
 }); 

// $(".table").find("tbody").on("click",".showMsgDetail",function(){ 
// var msg=$(this).find("a").attr("name"); 
// showMagDetail(msg); 
// }); 

 $(".addbutton").click(function(){ 
 $("#savePlanmodal").removeAttr("name"); 
 $("#planIdsUpdate").val(""); 
 }); 
}); 

/** 
 * 弹窗 
 */ 
function showMessage(content){ 
 $.alert({ 
  title: '提示', 
  content: content,//支持html 
  icon: 'fa fa-rocket', 
  animation: 'zoom', 
  closeAnimation: 'zoom', 
  buttons: { 
  okay: { 
   text: '确定', 
   btnClass: 'btn-primary' 
  } 
  } 
 }); 
} 

/** 
 * 移除css 
 */ 
function removeClass(){ 
 $(".modal-body").find(".pagination").find("li").each(function(){ 
 $(this).removeClass("active"); 
 }); 
} 


function getPlanFy(pageNo){ 
 var pageSize=10; 
 $.post(""+otherPath+"/fault-studio/getInpectPlanList.action", 
  {"pageNo":pageNo,"pageSize":pageSize},function(data){ 
   $("#inspectionPlan").find(".modal-body").find("table").find("tbody").html(""); 
   $("#inspectionPlan").find(".modal-body").find(".pagination").html(""); 
  var appendHtml=""; 
  if(data.items!=null && data.items.length>0){ 
  $.each(data.items,function(i,item){ 
   var number=parseInt(i)+1; 
   appendHtml+="<tr>" + 
    "<td align='center'>"+number+"</td>" + 
    "<td><a>"+item[1]+"</a></td>" + 
    "<td>"+item[2]+"</td>"+ 
    "<td>"+item[3]+"</td>"+ 
    "<td><a name='"+item[0]+"' onclick='updatePlan(this)'>修改</a> <a lang='"+item[0]+"' onclick='delPlan(this)'>删除</a></td>" 
    "</tr>" 
  }); 
  $("#inspectionPlan").find(".modal-body").find("table").find("tbody").append(appendHtml); 
  var paginHtml=""; 
  if(isNotTirmpagin(data.totalPage) && data.totalPage>0){ 
   paginHtml+="<li><a>首页</a></li>" + 
    "<li><a>上页</a></li>"; 
   for(var j=0;j<data.totalPage;j++){ 
   var page=parseInt(j)+1; 
   if(page==pageNo){ 
    paginHtml+="<li class='lilength active'><a>"+page+"</a></li>"; 
   }else{ 
    paginHtml+="<li class='lilength'><a>"+page+"</a></li>"; 
   } 

   } 
   paginHtml+="<li><a>下页</a></li>" + 
    "<li><a>末页</a></li>"; 
   $("#inspectionPlan").find(".modal-body").find(".pagination").append(paginHtml); 
  } 
  } 
 }); 
} 

function updatePlan(obj){ 
 var planId=obj.name; 
 $.post(""+otherPath+"/fault-studio/getPlanById.action",{"id":planId},function(data){ 
 if(data.result=="success"){ 
  $(".addbutton").click(); 
  var item=data.items; 
  $("#planName").val(item.name); 
  $("#planTitle").val(item.inspectTitle); 
  $("#showTime").val(item.inspectTime); 
  var module_name=item.module_name; 
  var nameArray=module_name.split("&"); 
  var moudleIdArray=item.inspectContent.split("&"); 
  var nameHtml=""; 
  if(nameArray!=null && nameArray.length>0){ 
  for(var i=0;i<nameArray.length;i++){ 
   if(isNotTirmpagin(nameArray[i])){ 
   nameHtml+="<li id='"+moudleIdArray[i]+"'>"+nameArray[i]+"</li>"; 
   } 

  } 
  } 
  $(".inspectContent").append(nameHtml); 


  var inspectTimeArray=item.inspectTime.split("&"); 
  var timeHtml=""; 
  if(inspectTimeArray!=null && inspectTimeArray.length>0){ 
  for(var j=0;j<inspectTimeArray.length;j++){ 
   if(isNotTirmpagin(inspectTimeArray[j])){ 
   timeHtml+="<li>"+inspectTimeArray[j]+"</li>"; 
   } 

  } 
  } 
  $(".inspectionChooseTime").append(timeHtml); 
  $("#savePlanmodal").attr("name","update"); 
  $("#planIdsUpdate").val(planId); 
 } 
 }); 

} 

function delPlan(obj){ 
 var planId=obj.lang; 
 sureConfirm("提示","确定删除吗?",planId); 
} 

function showMagDetail(msg){ 
 $.alert({ 
  title: '提示', 
  content: msg,//支持html 
  icon: 'fa fa-rocket', 
  animation: 'zoom', 
  closeAnimation: 'zoom', 
  buttons: { 
  okay: { 
   text: '确定', 
   btnClass: 'btn-primary' 
  } 
  } 
 }); 
} 

function sureConfirm(tip,msg,planId){ 

 $.confirm({ 
 title: tip, 
 content: msg, 
 icon: 'fa fa-rocket', 
 animation: 'zoom', 
 closeAnimation: 'zoom', 
 buttons: { 
  confirm: { 
  text: '确定', 
  btnClass: 'btn-primary', 
  action:function(){ 
   $.post(""+otherPath+"/fault-studio/delInspectPlan.action",{"id":planId},function(data){ 
   if(data.items=="success"){ 
    showMagDetail("删除成功"); 
    getPlanFy("1"); 
   }else{ 
    showMagDetail(data.msg); 
   } 
   }); 
  } 
  }, 
  cancle: { 
  text: '取消', 
  action:function(){ 
   return false; 
  } 
  } 
 }, 
 }); 


} 

function isNotTirmpagin(obj){ 
 if(obj!=null && obj!='' && obj!=undefined){ 
 return true; 
 }else{ 
 return false; 
 } 

} 

  3)页码到当前可视页码最后一页刷新页面

3.js获取json数据分页显示

header("Content-type: text/html;charset=GBK");//
$link=mysql_connect('localhost','root','root');
mysql_select_db('test');
mysql_query("SET NAMES 'GBK'");
$num=5;//每页显示5条
$sql="select * from article ";
//总共有多少记录
$resultt=mysql_query($sql);
//获取数据库总记录数
$total=mysql_num_rows($result);
echo $total;
//总共有多少页
$pagecount=$total/$num;
//获取当前页
$currentPage=isset($_GET['page'])?intval($_GET['page']):1;
//查询条数
$offset=($currentPage-1)*$num;
//下一页
$nexpage=($currentPage==$pagecount?0:$currentPage+1);
//上一页
$prepg=$currentPage-1;
$url='ajax.php';
//根据条数查询信息
$strSQL="select * from article limit $offset,$num";
$pagecontrol="当前第".$currentPage."页" ;
$pagecontrol.="共".$pagecount."页";
$pagecontrol.="<a href="javascript:dopage(" mce_href="javascript:dopage("'$url?page=1')>首 页</a> ";
if($prepg) $pagecontrol.=" <a href="javascript:dopage(" mce_href="javascript:dopage("'$url?page=$prepg');>上一页</a> "; else $pagecontrol.=" 上一页 ";
if($nexpage) $pagecontrol.="<a href="javascript:dopage(" mce_href="javascript:dopage("'$url?page=$nexpage');>下一页</a>"; else $pagecontrol.="下一页";
$pagecontrol.="<a href="javascript:dopage(" mce_href="javascript:dopage("'$url?page=$pagecount')>尾 页</a>";
$result1=mysql_query($strSQL);
echo "<table border=1 width=100%>";
echo "<tr>";
echo "<td>编 号</td><td>标 题</td><td>新闻类型</td>";
echo "</tr>";
while($row=mysql_fetch_array($result1))
{
  echo "<tr>";
  echo "<td>$row[id]</td><td>$row[title]</td><td>$row[classname]</td>";
  echo "</tr>";
}
echo "</table>";
echo "<br/>";
echo $pagecontrol;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

实现思路

function getJSONData(pn) { 
// alert(pn); 
$.getJSON("blackList.ce", function(data) { 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
var startPage = pageSize * (pn - 1); 
var endPage = startPage + pageSize - 1; 
var $ul = $("#json-list"); 
$ul.empty(); 
for (var i = 0; i < pageSize; i++) { 
$ul.append('<li class="li-tag"></li>'); 
} 
var dataRoot = data.jsonRoot; 
if (pageTotal == 1) { // 当只有一页时 
for (var j = 0; j < totalCount; j++) { 
$(".li-tag").eq(j).append("<input type='checkbox' value='"+parseInt(j + 1)+"'/>") 
.append("" + parseInt(j + 1) 
+ "").append("" + dataRoot[j].mobile 
+ "").append("" + dataRoot[j].province 
+ "").append("" + dataRoot[j].gateway 
+ "").append("" + dataRoot[j].insertTime 
+ "").append("" + dataRoot[j].remark 
+ "") 
} 
} else { 
for (var j = startPage, k = 0; j < endPage, k < pageSize; j++, k++) { 
if( j == totalCount){ 
break; // 当遍历到最后一条记录时,跳出循环 
} 
$(".li-tag").eq(k).append("<input type='checkbox' value='"+parseInt(j + 1)+"'/>") 
.append("" + parseInt(j + 1) 
+ "").append("" + dataRoot[j].mobile 
+ "").append("" + dataRoot[j].province 
+ "").append("" + dataRoot[j].gateway 
+ "").append("" + dataRoot[j].insertTime 
+ "").append("" + dataRoot[j].remark 
+ "") 
} 
} 
$(".page-count").text(pageTotal); 
}) 
} 
function getPage() { 
$.getJSON("blackList.ce", function(data) { 
pn = 1; 
var totalCount = data.totalCount; // 总记录数 
var pageSize = 10; // 每页显示几条记录 
var pageTotal = Math.ceil(totalCount / pageSize); // 总页数 
$("#next").click(function() { 
if (pn == pageTotal) { 
alert("后面没有了"); 
pn = pageTotal; 
} else { 
pn++; 
gotoPage(pn); 
} 
}); 
$("#prev").click(function() { 
if (pn == 1) { 
alert("前面没有了"); 
pn = 1; 
} else { 
pn--; 
gotoPage(pn); 
} 
}) 
$("#firstPage").click(function() { 
pn = 1; 
gotoPage(pn); 
}); 
$("#lastPage").click(function() { 
pn = pageTotal; 
gotoPage(pn); 
}); 
$("#page-jump").click(function(){ 
if($(".page-num").val() <= pageTotal && $(".page-num").val() != ''){ 
pn = $(".page-num").val(); 
gotoPage(pn); 
}else{ 
alert("您输入的页码有误!"); 
$(".page-num").val('').focus(); 
} 
}) 
$("#firstPage").trigger("click"); 

}) 
} 
function gotoPage(pn) { 
// alert(pn); 
$(".current-page").text(pn); 
getJSONData(pn) 
} 

$(function() { 
getPage(); 
})

希望本文所述对大家PHP程序设计有所帮助。

您可能感兴趣的文章:

  • 用jQuery中的ajax分页实现代码
  • JQuery+Ajax无刷新分页的实例代码
  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
  • Ajax读取数据之分页显示篇实现代码
  • php,ajax实现分页
  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
  • 使用PHP+JQuery+Ajax分页的实现
  • 基于Jquery+Ajax+Json的高效分页实现代码
  • jQuery DataTables插件自定义Ajax分页实例解析
  • php+ajax实现无刷新分页的方法

也是分为三部分处理

图片 2

您可能感兴趣的文章:

  • Ajax+smarty技术实现无刷新分页
  • 利用jQuery中的ajax分页实现代码
  • jQuery ajax分页插件实例代码
  • 详解PHP+AJAX无刷新分页实现方法
  • jQuery+Ajax实现无刷新分页
  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
  • jquery插件pagination实现无刷新ajax分页
  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
  • js实现ajax分页完整实例

  1)点击首页,末页直接显示第一页或者最后一页内容,当前页面为第1页或者最后一页。隐藏首页或者末页按钮。demo 显示截图

您可能感兴趣的文章:

  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
  • 用jQuery中的ajax分页实现代码
  • 基于Jquery+Ajax+Json的高效分页实现代码
  • jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
  • 使用PHP+JQuery+Ajax分页的实现
  • JQuery+Ajax无刷新分页的实例代码
  • asp.net中利用Jquery+Ajax+Json实现无刷新分页的实例代码
  • jquery+css3打造一款ajax分页插件(自写)
  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
  • MVC+jQuery.Ajax异步实现增删改查和分页

  首页状态 和 末页状态代码执行结果截图

图片 3图片 4  

  2)点击可视页码截图

图片 5  

  3)点击上一页或者下一页,,需要刷新页码状态时截图,昨天表示当前页码为7,右图是点击上一页,刷新页码时的状态

图片 6图片 7  

代码参数说明

<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="data/data.js" type="text/javascript"></script>
<script src="js/sendAjax.js" type="text/javascript"></script>
<script src="js/page.js" type="text/javascript"></script>
<script>
 /* 初始化页面 */
 var initTotalPageNum = 11;
 $("#ui-page").paging({pageSize:5,totalPage:initTotalPageNum});
 </script>

为了区分清楚,所以把每一个文件都分开写了。

data.js               //是用json模拟的后台数据.

sendAjax.js             //是模拟的ajax请求后台数据的文件

page.js               //是封装的生成页码的功能

initTotalPageNum        //模拟的后台传入的数据总页码

pageSize            //自定义参数,可以定义可视区域代码,当前demo。pageSize = 5,initTotalPageNum=3 小于pageSize 的时候,显示状态如下图所示

图片 8

代码优缺点

  1)使用ajax可以实现局部刷新,但是不利于seo

  2) 生成页码没有改变dom结构,只变化页码

最近项目中的需求,自己写的一个。有时间的话会用js实现一遍。

有需要的话,完整demo ,点此下载.rar) 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。

您可能感兴趣的文章:

  • 用jQuery中的ajax分页实现代码
  • JQuery+Ajax无刷新分页的实例代码
  • JS+Ajax+Jquery实现页面无刷新分页以及分组 超强的实现
  • 使用PHP+JQuery+Ajax分页的实现
  • 基于Jquery+Ajax+Json的高效分页实现代码
  • 使用Jquery+Ajax+Json如何实现分页显示附JAVA+JQuery实现异步分页
  • JQuery+Ajax实现数据查询、排序和分页功能
  • jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
  • 利用jQuery中的ajax分页实现代码

本文由美高梅网址发布于计算机网络,转载请注明出处:后台数据,Json实现分页显示附效果图

上一篇:JavaScript控制按钮可用或不可用的方法,js和jque 下一篇:JavaScript操作URL的相关内容集锦【美高梅网址】,
猜你喜欢
热门排行
精彩图文