jsp页面通过ajax取值/展示数据及分页显示
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取值/展示数据及分页显示的更多相关文章
- 页面通过Jquery取值然后传值到后台显示underfined是怎么回事?
页面通过Jquery取值然后传值到后台显示underfined是怎么回事? 一般情况下第一个如果用jQuery取值的,末尾要用val(),如果用$符号取值的,末尾要加上val. eg: busines ...
- Spring MVC控制层传递对象后在JSP页面中的取值方法
List<Order> orders = new ArrayList<Order>(); for (int i = 0; i < 3; i++) { Order t = ...
- JSP中EL表达式取值问题记录(已解决)
***************************2015-10-28 22:21************************* 问题描述如下: 在当前的jsp页面已经有了如下代码: < ...
- 关于html5与jsp页面同样的html代码展示的页面效果不一样的问题
原文:关于html5与jsp页面同样的html代码展示的页面效果不一样的问题 html5默认的声明为 <!DOCTYPE html> jsp默认的声明头部为 <%@ page con ...
- 关于modelmap.addAttribute("",)转到jsp页面获取不到值的问题
问题一,可能是你设置的web.xml的头有问题 掉坑里好一会,发现我默认生成的web.xml中头部的配置是 <!DOCTYPE web-app PUBLIC "-//Sun Micro ...
- 关于前台jsp页面的js取值问题
在后程序中传一个字符串到前台页面上,后台代码model.addAttribute("ccc", "cccc"); 在页面js上用下面两种方法取值 1. var ...
- jsp页面往mysql里插入中文后数据库里显示乱码
1.JSP页面乱码 这种乱码的原因是应为没有在页面里指定使用的字符集编码,解决方法:只要在页面开始地方用下面代码指定字符集编码即可,<%@ page contentType="text ...
- Jsp页面用ajax传输json数组的方法
详细参考jquery的API 这里主要展示实例,即写法 <%@ page language="java" contentType="text/html; chars ...
- Jquery跨域Ajax取值
HTML: $.ajax({ type: "get", async: false, url: "http://www.xxxxxx.com/otherLogin/chec ...
随机推荐
- C++异常处理的深入理解
1,问题: 1,如果在 main 函数中抛出异常会发生什么? 1,不处理,则崩溃: 2,如果异常不处理,最后会传到哪里? 3,下面的代码输出什么? 4,异常的最终处理编程实验: #include &l ...
- Java 枚举(enum)详解
概念: Java1.5发行版本中增加了新的引用类型--枚举类型(enum type).枚举类型是指由一组固定的常量组成合法值的类型.在Java虚拟机中,枚举类在进行编译时会转变成普通的Java类. 创 ...
- 拓展练习:Linux权限管理--基础权限/ 特殊权限
目录 基础权限拓展练习 特殊权限拓展练习 基础权限拓展练习 1.用户基础权限为9位,每三位为一组,每组代表着谁的权限? 前三位代表属主权限位 中间三位代表属组权限位 后三位代表其他用户权限位 2.权限 ...
- 转载:tomcat过程原理
基于Java的Web 应用程序是 servlet.JSP 页面.静态页面.类和其他资源的集合,它们可以用标准方式打包,并运行在来自多个供应商的多个容器.Web 应用程序存在于结构化层次结构的目录中,该 ...
- Java缓冲流的优点和原理
不带缓冲的流的工作原理: 它读取到一个字节/字符,就向用户指定的路径写出去,读一个写一个,所以就慢了. 带缓冲的流的工作原理: 读取到一个字节/字符,先不输出,等凑足了缓冲的最大容量后一次性写出去,从 ...
- cnblogs添加打赏
上图上真相 1.进入后台设置---文件 2.上传你的支付宝和微信收款码(注意图片格式为bmp格式) 2.还是上图的位置,选择设置选项,找到博客侧边栏公告(支持HTML代码)(支持JS代码) 3.将如下 ...
- Git中.gitignore文件不起作用
Git中.gitignore文件不起作用的解决以及Git中的忽略规则介绍 在Studio里使用Git管理代码的过程中,可以修改.gitignore文件中的标示的方法来忽略开发者想忽略掉的文件或目录 ...
- Struts2学习笔记 - namespace命名空间
默认的命名空间“ namespace="" ”. 根命名空间 “ namespace="/" ”. <package name="test&qu ...
- jQuery查阅api手册
原文&出处:jQuery API 3.3.1 速查表 --作者:Shifone http://jquery.cuishifeng.cn/
- Solr安装步骤 + dataimport导入数据配置
一:安装solr服务器 1.导入安装包到 /usr/local/solr/singleSolr目录下 解压tomat命令:tar -zxvf apache-tomcat-7.0.47.tar.gz 解 ...