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-orm操作数据库

    ORM 模型 ORM概念 对象关系映射 全称(Object Relational Mapping) 简称ORM 模式是一种为了解决面向对象与关系型数据库存在的互不匹配的现象的技术. 简单来说, ORM ...

  2. 设置cookie,获取cookie

    封装cookie获取方法一 function getCookie(key) { var key = encodeURIComponent(key); var result; var pairs = d ...

  3. Charles 抓 HTTPS 包

    最新 Charles 破解版下载地址:http://charles.iiilab.com/ 关掉翻墙软件!!!!! 重启 Charles !!!!! 重启浏览器!!!!! 如果是抓手机的HTTPS包, ...

  4. c# HttpListener 使用

    与 IIS 上发布网站相比,使用 HttpListener 编程的程序更加轻量化,易于发布和更新.配合 Thread 或 Task 类也可满足一定的并发. https://docs.microsoft ...

  5. Java中synchronized 修饰在static方法和非static方法的区别

    [问题描述]关于Java中synchronized 用在实例方法和对象方法上面的区别 [问题分析]大家都知道,在Java中,synchronized 是用来表示同步的,我们可以synchronized ...

  6. border-radius使用的一些问题(不起作用?)

    出现这种问题,border-radius没有达到自己想要的效果(小程序中) 原因:border-radius定义了border的圆角,未定义span元素的圆角范围 解决:不设置border,则bord ...

  7. (PASS)JAVA数组去重 三种方法 (不用集合)

    第一种方法(只学到数组的看): 定义一个新的数组长度和旧数组的长度一样,存储除去重复数据的旧数组的数据和0, package demo01; import java.sql.Array; import ...

  8. java延迟队列

    大多数用到定时执行的功能都是用任务调度来做的,单身当碰到类似订餐业务/购物等这种业务就不好处理了,比如购物的订单功能,在你的订单管理中有N个订单,当订单超过十分钟未支付的时候自动释放购物车中的商品,订 ...

  9. 大数据基础环境--jdk1.8环境安装部署

    1.环境说明 1.1.机器配置说明 本次集群环境为三台linux系统机器,具体信息如下: 主机名称 IP地址 操作系统 hadoop1 10.0.0.20 CentOS Linux release 7 ...

  10. centos 升级python

    1.下载python3.6.1的包 wget https://www.python.org/ftp/python/3.6.1/Python-3.6.1.tgz 2.解压 tar -zxvf Pytho ...