JQueryPagination分页插件,ajax从struts请求数据
2017-07-16
学完了struts2,做了个关于分页的小例子,用到了JQuery分页插件Pagination,先贴下插件下载地址
http://www.jq22.com/jquery-info13734
插件作者对于参数讲解的不够详细,琢磨了半天才明白怎么用,不多说,直接代码
1.客户端(jsp页面)
/*这些css为了控制生成的数据和分页的li标签的位置*/
a {
text-decoration:none;
color:black;
font-weight: bold;
text-align:center;
}
table {
width:500px;
height:300px;
text-align: center;
}
#table {
position:relative;
top:100px;
}
#page {
height:50px;
text-align:center;
position:relative;
top:100px;
}
#page li {
position:relative;
left:450px;
} </style>
css部分
<!--一定要引入样式表和js文件-->
<link rel="stylesheet" type="text/css" href="pagination/page.css">
<script type="text/javascript" src="pagination/jquery.min.js"></script>
<script type="text/javascript" src="pagination/page.js"></script>
<div id="table" align="center"></div> <!--用于显示数据的div-->
<div id="page" class="page"></div> <!--div的class要设置成引入的css文件中的.page--> <script type="text/javascript">
var url ="${pageContext.request.contextPath}/show_list";
var $table = $("<table border='2px' id='a' width='300px' height='200px'></table>");
var $tr = $("<tr display='none'></tr>");
var $td = $("<td>编号</td><td>姓名</td><td>薪水</td><td>部门</td><td>操作</td>");
$tr.append($td);
$table.append($tr);
var datas = null; //datas,options一定要设置为全局变量,发现不设置成全局,没法使用插件
var options = null;
var pagelistcount = 6; //每页显示数据个数
// var maxentries = 50; //要显示的数据总量,未进行传递
$.ajax({
url:url,
type:"GET",
data:null,
dataType:"json",
success:function(backdata) {
datas = backdata;
var a =eval(backdata);
options={
"id":"page", //----显示页码的元素(数据放在哪里)---->上面的div标签
"data":datas, //-----返回的数据---->json形式
"maxshowpageitem":10,//-----最多显示的页码个数
"pagelistcount":pagelistcount,//-----每页显示数据个数,下面的callback是每个分页插件都有的回调函数
"callBack":function(result){ //----result表示处理好的数据集,比如你设置了pagelistcount为6,那么result就有6条数据
$("#table").append($table);
//遍历生成表格并插入数据
$.each(result,function(index,emp) {
$tr = $("<tr></tr>");
$table.append($tr);
for(var i=0; i<=4; i++) {
$td = $("<td></td>");
$tr.append($td);
}
var $tr = $("table tr");
//解决多生成表格的问题--->总数50,每页6条,最后一页不足6条,这样解决多生成表格的问题
if($tr.size() > result.length) {
$("table tr:gt("+ result.length + ")").remove();
}
var $td = $tr.eq(index+1).find("td");
var info = $(result).get(index);
var $empId = $td.eq(0).text(info.empId);
var $empName = $td.eq(1).text(info.empName)
var $salary = $td.eq(2).text(info.salary);
var $dept = $td.eq(3).text(info.dept.deptName);
var $action = $td.eq(4).html("<a href=${update}?empId=" + info.empId+">修改</a> <a id ='del" + info.empId + "' href='#'>删除</a>");
$("#del" + info.empId).click(function () {
if(window.confirm("确定要删除吗?删除之后无法恢复!!!")) {
$(this).attr("href","${delete}?empId=" + info.empId);
}
})
});
}
};
page.init(datas.length,1,options); //执行分页,1表示加载完成后显示为第一页
}
});
</script> </body>
2.服务器
使用了struts并且返回的数据是json格式所以要引入以下jar文件
struts部分
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar
commons-lang3-3.1.jar
freemarker-2.3.19.jar
javassist-3.11.0.GA.jar
ognl-3.0.5.jar
struts2-core-2.3.4.1.jar
xwork-core-2.3.4.1.jar
json部分
struts2-json-plugin-2.3.4.1.jar
json-lib-2.3-jdk15.jar
commons-beanutils-1.7.0.jar
commons-collections-3.1.jar
ezmorph-1.0.3.jar
commons-logging-1.1.1.jar
如果采用用户库的方式添加的话要注意把jar包部署到tomcat中
项目(右击)--->buildPath--->configure build path---->搜索deployment Assembly--->add--->java build path entries
或者直接在webRoot下的lib放jar包然后添加到项目中即可(变成奶瓶!!才可以)
如何让struts返回json文本?
1.包继承 json-default,
2.result中 type="json",params中写好要转换的对象
3.action中一定要为要转换的对象设置get方法,并且要转换的对象不能为null!!
配置文件
<package name="xxxx" extends="json-default">
<action name="show_*" class="employeeAction" method="{1}">
<result name="list" type="json">
<param name="root">listEmployees</param> <!--name="root"获得根级对象,具体自行百度-->
</result>
</action>
action
private List<Employee> listEmployees;
//使用json时只需设置get方法
public List<Employee> getListEmployees() {
return listEmployees;
}
/**
* 员工列表展示
* @return
*/
public String list() {
listEmployees = employeeService.getAll();//注意赋值
return "list";
}
当然除了利用struts返回json也可以直接写个servlet返回数据,具体不再赘述
还有问题的话后续再进行补充,欢迎批评指正^_^
JQueryPagination分页插件,ajax从struts请求数据的更多相关文章
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- Bootstrap分页插件ajax返回数据,工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
- JqueryPagination 分页插件使用说明
JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了 1 首先引入相关js文件: <lin ...
- Bootstrap Paginator分页插件+ajax 实现动态无刷新分页
之前做分页想过做淘宝的那个,但是因为是后台要求不高,就Bootstrap Paginator插件感觉还蛮容易上手,所以就选了它. Bootstrap Paginator分页插件下载地址: Downlo ...
- Bootstrap Paginator分页插件+ajax
Bootstrap Paginator分页插件下载地址: DownloadVisit Project in GitHub Bootstrap分页插件属性介绍: http://www.cnblogs. ...
- 关于试用jquery的jsonp实现ajax跨域请求数据的问题
我们在开发过程中遇到要获取另一个系统数据时,就造成跨域问题,这就是下文要说的解决办法: 先我们熟悉下json和jsonp的区别: 使用AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交 ...
- Ajax跨域请求数据实例(JSOPN方式)
今天在做取消申请的时候遇到了一个跨域ajax提交的问题. 情景是: 系统A是asp.net的站点,其中包括一个取消申请的接口(get方式通过参数提交到系统的某一个页面,然后返回提交成功或失败) 系统B ...
- ajax跨域请求数据
最近开始接触ajax的跨域请求问题,相比网上说的一大堆,我这里就说得比较浅显了. 关于为什么要跨域这个问题,实际的需求是当网站项目部署在一个域名上的时候,分域可以很好地解决网站卡顿问题(拥有多台服务器 ...
- 【前端_js】解决ajax跨域请求数据
1.ajax发送请求必须遵循同源策略,即请求方和相应方的协议头.域名.端口全部一样.只要三者有一个不一样都视为跨域,浏览器出于安全考虑不允许跨域访问. 解决ajax跨域访问的常用方法: a.使用jso ...
随机推荐
- android代码混淆笔记
混淆处理的apk被反编译后代码中包名类名等都变成abcd之类.非常难看懂. 使用代码混淆.启用混淆器,对相关文件进行编辑,然后打包签名就能够了: ------------ 在2.3的版本号中,项目中有 ...
- Java方法的概念及使用
方法 将一段逻辑或者功能提取出来,这种提取的形式就是函数 格式 修饰符 返回值类型 函数名(参数列表){ 方法体: return 返回值; } //明确返回值类型---求两个整数的和,确定结果一定是整 ...
- MyBatis SQL处理大于、小于号
MyBatis mapper文件是xml文件,需要特殊字符如大于号.小于号后需要转义. 原字符 转义后字符 < < <= <= > > > >=
- 自学Zabbix3.5.2-监控项item-types监控类型
自学Zabbix3.5.2-监控项item-types监控类型 1. item types item types是由zabbix提供的各种类型的检查器,大致就是Zabbix agent, Simple ...
- 翻译:MariaDB RENAME TABLE语句
*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...
- Epplus:导出Excel
看到其它大神的Epplus导出Excel,结合写出符合自己需求的将导出数据到Excel,给其它人参考一下,也可以学习http://www.cnblogs.com/caofangsheng/p/6149 ...
- ext.net在使用水晶报表时页面无数据显示,并报错误Uncaught ReferenceError: bobj is not defined.
一.错误描述 在公司做项目的时候,有时会需要用到水晶报表显示数据,水晶报表在ASP.NET中使用时没有问题,winform项目开发也没有问题,但是在ext.net开发使用时却报错了,错误:Uncaug ...
- ligerUI---ligerGrid分页排序的使用(从后台获取数据显示)
写在前面: 最近项目的前框框架用的是ligerUI,里面用到了ligerGrid表格,下面就来说说从后台获取数据并在前台页面进行完美展示.啊哈哈哈..(天啦,坐我旁边的丽姐貌似炒股 一个月可以搞几十万 ...
- 【二十五】cookie与session学习总结
一:cookie 1.创建cookie 关键字:setcookie 用于保存cookie 原理:当浏览器访问cookie.php页面时,我们的服务器就会以set-cookie的方式将cookie信息回 ...
- sqlserver 存储过程 删除
--删除(delete from) CREATE PROCEDURE [dbo].[DeleteMessage] @strtable varchar(),--要删除信息的表名 @strwhere va ...