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. Java必备主流技术流程图,写得非常好!

    作者:Jay_huaxiao https://juejin.im/post/5d214639e51d4550bf1ae8df 1.spring的生命周期 Spring作为当前Java最流行.最强大的轻 ...

  2. unique(去重函数)

    去重排序(unique函数的使用) 2013年05月30日 11:05:45 阅读数:9689更多 个人分类: 字符串处理  出处:http://www.cnblogs.com/QQbai/archi ...

  3. MATLAB之画确定区域内互不接触的球

    MATLAB之画确定区域内互不接触的球 程序要求:在确定区域内,画互不接触的球 输入:球的个数N,半径D,两球之间的最小距离K倍(D的倍数) 输出:各圆心的三维坐标,并作图显示 程序: functio ...

  4. js 基础 for in 和 for of的区别详解

    for in 和 for of 相对于大家肯定都不陌生,都是用来遍历属性的没错.那么先看下面的一个例子: 例1 const obj = { a: 1, b: 2, c: 3 } for (let i ...

  5. go语言从例子开始之Example29.关闭通道

    关闭 一个通道意味着不能再向这个通道发送值了.这个特性可以用来给这个通道的接收方传达工作已经完成的信息. Example: package main import "fmt" // ...

  6. Scratch 少儿编程

    作者:小码王在线少儿编程链接:https://www.zhihu.com/question/23418685/answer/762725469来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非 ...

  7. idea spring boot搭建笔记

    如何建立spring boot项目 首先建一个empty Probject,Modules导入新创建的Project new modules选择Spring lnitializr ->next( ...

  8. python3 实现堡垒机功能(并发执行命令及上传下载文件)

    转载请注明出处,欢迎提出宝贵意见,谢谢! 功能介绍: 1.主机分组 登录后显示分组主机及主机数量 选择主机组后显示该主机组下所有主机信息,主机名及IP显示输入选择:1.执行命令利用线程并发组内所有主机 ...

  9. 【leetcode】934. Shortest Bridge

    题目如下: In a given 2D binary array A, there are two islands.  (An island is a 4-directionally connecte ...

  10. linux安装apue.3e

    (1)下载源代码,可以去官网下载:http://apuebook.com/code3e.html (2)解压缩源代码文件:tar -zxvf src.3e.tar.gz (3) 安装静态链接库:sud ...