jsp页面通过ajax从后台获取数据,在页面展示,并实现分页效果代码:

【JavaScript部分代码】
1 <script>
function getComposition(pageno){ //alert(pageno);
$.ajax(
{
url:'<%=basePath%>composition/compositionlist',
type:'post',
data:"pageno="+pageno,
success:function(data)
{
document.getElementById("composition").innerHTML='';
var divcontent="";
var obj = eval('(' + data + ')'); //alert(obj.data.pageno); console.log(obj); divcontent+="<table border='1' borderColor='#ccc' style='width:100%;margin:0px;padding:0px;border-collapse:collapse'>";
divcontent+="<tr><th width='12%' style='text-align:center;background: #79c6fa'>图片</th><th width='12%' style='text-align:center;background: #79c6fa'>绑定</th></tr>"; $.each(obj.data.content, function(i,item)
{
console.log(item);
divcontent+="<tr><td style='text-align:center'><img style='width: 100px;height:50px;margin-top:8px;' src='"+item.img+"' /></td><td style='text-align:center'><input type='radio' class='button6' id='id' name='compositionid' value="+item.id+" /></td></tr>"; });
divcontent+="</table>"; divcontent+='<div class="pageinfo">';
divcontent+='共<span>'+obj.data.totalpages+'</span>页,每页<span>'+obj.data.pagesize+'</span>条,当前是第<span>'+obj.data.pageno+'</span>页';
divcontent+='</div>'; divcontent+='<div class="pagebar">'; divcontent+='<button onclick="getComposition(1);"';
if(obj.data.pageno==1){
divcontent+='class="button3" disabled';
}else if(obj.data.pageno>1){
divcontent+=' class="button2";'
}
divcontent+='>首页</button>'; divcontent+='<button onclick="getComposition('+(obj.data.pageno-1) +');"';
if(obj.data.pageno==1){
divcontent+='class="button3" disabled';
}else if(obj.data.pageno>1){
divcontent+=' class="button2";'
}
divcontent+='>上页</button>'; divcontent+='<button onclick="getComposition('+(obj.data.pageno+1) +');"';
if(obj.data.pageno==obj.data.totalpages){
divcontent+='class="button3" disabled';
}else if(obj.data.pageno<obj.data.totalpages){
divcontent+=' class="button2";'
}
divcontent+='>下页</button>'; divcontent+='<button onclick="getComposition('+obj.data.totalpages +');"';
if(obj.data.pageno==obj.data.totalpages){
divcontent+='class="button3" disabled';
}else if(obj.data.pageno<obj.data.totalpages){
divcontent+=' class="button2";'
}
divcontent+='>末页</button>'; divcontent+='</div>'; document.getElementById("composition").innerHTML=divcontent;
}
});
}
</script>
【HTML部分代码】
<div id="composition" ></div>

jsp页面通过ajax取值/展示数据及分页显示的更多相关文章

  1. 页面通过Jquery取值然后传值到后台显示underfined是怎么回事?

    页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...

  2. Spring MVC控制层传递对象后在JSP页面中的取值方法

    List<Order> orders = new ArrayList<Order>(); for (int i = 0; i < 3; i++) { Order t = ...

  3. JSP中EL表达式取值问题记录(已解决)

    ***************************2015-10-28 22:21************************* 问题描述如下: 在当前的jsp页面已经有了如下代码: < ...

  4. 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题

    原文:关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 <!DOCTYPE html> jsp默认的声明头部为 <%@ page con ...

  5. 关于modelmap.addAttribute("",)转到jsp页面获取不到值的问题

    问题一,可能是你设置的web.xml的头有问题 掉坑里好一会,发现我默认生成的web.xml中头部的配置是 <!DOCTYPE web-app PUBLIC "-//Sun Micro ...

  6. 关于前台jsp页面的js取值问题

    在后程序中传一个字符串到前台页面上,后台代码model.addAttribute("ccc", "cccc"); 在页面js上用下面两种方法取值 1. var ...

  7. jsp页面往mysql里插入中文后数据库里显示乱码

    1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...

  8. Jsp页面用ajax传输json数组的方法

    详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...

  9. Jquery跨域Ajax取值

    HTML: $.ajax({ type: "get", async: false, url: "http://www.xxxxxx.com/otherLogin/chec ...

随机推荐

  1. python第一个问题

    temp=input("请输入1到100之间内的数字:")if num > 50:    print("你妹好漂亮")else:    print(&qu ...

  2. Compile Linux Kernel on Ubuntu 12.04 LTS (Detailed)

    This tutorial will outline the process to compile your own kernel for Ubuntu. It will demonstrate bo ...

  3. putchar(".:-=+*#%@"[(int)(d * 5.0f)])

    前两天在玩知乎时候见到有个用C语言画心的小代码感觉还是蛮好玩的,不过,里面有行代码看了好久才懂: putchar(".:-=+*#%@"[(int)(d * 5.0f)]); ,先 ...

  4. 华为要卖5G技术,虽然我和华为没有一点关系,但是我也很呵呵

    http://www.sohu.com/a/340555529_166680 老任头,竟然说出了这样的话,要卖5G技术给西方,然后塑造对手. 按照老任头的脾气,老任头应该不至于胡说八道这样的话,但是呢 ...

  5. Codeforces 1183H DP 计算子序列数目

    题意及思路:https://blog.csdn.net/mmk27_word/article/details/93999633 第一次见这种DP,有点像退背包的思想,如果发现有可能因为字母相同和前面算 ...

  6. Django Rest框架 APIView源码调用

    上一篇说了请求访问的流程,这一篇说一下请求对应的源码调用 as_view 定义view dispatch dispatch initialize_request get_parsers         ...

  7. 利用Python语言Appium启动ios app

    首先配置好电脑环境,主要是appium太难配了,不多说 然后,分两步 第一步:启动appium服务器 有三种方法,1.下载appium-desk-top(桌面客户端),启动 2.终端启动:appium ...

  8. StackOverflowError

    "Caused by: java.lang.StackOverflowError: null",当后台出现这个报错信息的时候,证明在代码模块里面出现了死循环,但是不一定是代码的问题 ...

  9. TableStore最佳实践:轻松实现轨迹管理与地理围栏

    摘要: 基于TableStore轻松实现亿量级轨迹管理与地理围栏 一.方案背景 轨迹管理系统日常生活中使用非常普遍,如外卖派送轨迹.快递物流流转.车辆定位轨迹等.该场景与地理位置管理类似,核心点与瓶颈 ...

  10. 20150127 学军集训 day1

    day1 就直接考试... 和说好的不一样啊 第一题看都没怎么看就pass了,构造的题我一向没什么把握.然后瞟到第三题有30分可做,虽然要写的代码很大...反正我是写习惯了..期间纠结了一会还写了一个 ...