前台自定义通用分页jquery插件
(一)框架:用jquery+ajax+struts1实现 自动创建行和列
持久层用的是abatis.数据库用的是MySQL.
(二)sqlMap
shangjia.xml的配置如下
<resultMap class="java.util.LinkedHashMap" id="storeMap">
<result property="sto_id" column="sto_id"/>
<result property="sto_name" column="sto_name"/>
<result property="sto_contactphone" column="sto_contactphone"/>
<result property="sto_time" column="sto_time" javaType="string"/>
</resultMap>
<statement id="selectListStore" resultMap="storeMap" parameterClass="com.tj_zhongzhixin.common.util.PageResult" >
select sto_id,sto_name,sto_contactphone,sto_time from store limit #pageSize# offset #throwRows#
</statement>
小提示:为什么不用实体类映射
我之所以不用实体类映射(就是将resultMap的Class设成实体类),是因为自动生成的表格的行是根据集合中Map的个数决定的,而表格的列是根据集合中Map的键值对的个数决定的,所以如果用实体类映射的话自动生成的表格的列就要按照实体类的属性的个数决定。而不论你的sql语句是否是查询所有的属性,都会封装到Map中实体类里。这样就不能的到实际查询的属性,而是所有的属性。
小提示:为什么要用LinkedHashMap
当我运行页面是准确的显示出了我在sql中制定的属性,而不是所有的属性。但是有出现了一个问题就是:它的顺寻跟我在sql中指定的查询不一致(起初结果集封装到了HashMap中)。原来HashMap集合会自动给值排序,后发现LinkedHashMap不会自动排序。所以就选择了LinkedHashMap
(三)query
jQuery.searchByPage.js
//jQuery提交请求数据
/*actionName为要跳转到的action的name
*param为页面参数(包括struts-config.xml中的parameter和其值,页数,每页显示的条数,查询的条件)
*options为操作的图标信息
*/
(function($){
$.showLostData=function(actionName,param){
$.ajax({
url:actionName,
type:"post",
data:param,
dataType:"json",
//在请求发出之前执行的函数
beforeSend:function(){
//dataTable为Table的Id其中table要放在From中
$("#dataTable").append(
"<div id='showWait' style='position:absolute;width:100%;height:100%;left:0;top:0;background-color:#808080;filter:alpha(opacity=15)'></div>");
//设置等待图片
$("#dataTable").append("<div id='showWaitImg' style='position:absolute;width:20px;height:20px;top:50%;left:50%'><img src='jQuery/page/blue-loading.gif'/></div>");
},
//请求成功 返回的data是PageResult(json)对象 格式如下
/**
{"firstRec":0,"list":[{"sto_id":1,"sto_name":"鼎盛行商","sto_contactphone":"18920022177","sto_time":"2009-11-17 16:27:43.0"},{"sto_id":2,"sto_name":"天津数码港","sto_contactphone":"13752134943\r\n13752134943\r\n13752134943\r\n","sto_time":"2009-11-25 16:27:49.0"}]
**/
success:function(data){
//行数
var trNum=data.list.length;
//列数
var tdNum="";
if(trNum==0){
alert("查询内容为空!");
}else{
//清空原先数据
$("#showData").empty();
//重新填充数据
for(var i=0;i<trNum;i++){
//创建tr
$("#showData").append("<tr id="+i+"></tr>");
//创建td
for(var temp in data.list[i]){
$("#"+i).append("<td class='list_data_ltext'>"+data.list[i][temp]+"</td>");
}
}
//创建翻页操作
/**
pageResult是一个分页类包含list集合,pageNo//页码; pageSize //每页显示条数 ;Total = 0; //总页数;
throwRows=0; //被跳过的记录数
下面是翻页的工具条,生成在一个实现创建的层里,层的类样式为pager
**/
$("div.pager").append("<div style='text-align:right;padding:6px 6px 0 0';></div>").html(
"共"+data["recTotal"]+"条记录 \r\n"+
"每页显示<input id=\"pageSize\" name=\"pageResult.pageSize\" value=\""+data["pageSize"]+"\" size=\"3\" />条 \r\n"+
"第<input id=\"pageNo\" name=\"pageResult.pageNo\" value=\""+data["pageNo"]+"\" size=\"3\" />页"+
" / 共"+data["pageTotal"]+"页 \r\n"+
"<a href=\"javascript:page_first();\">第一页</a> \r\n"+
"<a href=\"javascript:page_pre();\">上一页</a>\r\n"+
"<a href=\"javascript:page_next();\">下一页</a> \r\n"+
"<a href=\"javascript:page_last();\">最后一页</a>\r\n"+
"<input type=\"button\" class=\"common_button\" onclick=\"javascript:page_go();\" value=\"转到\" />\r\n"+
"<input type=\"hidden\" name=\"pageResult.orderBy\" value=\"\" />\r\n"+
"<input type=\"hidden\" name=\"pageResult.sort\" value=\"\" />\r\n"+
"<script>\r\n"+
" var pageTotal = "+data["pageTotal"]+";\r\n"+
" var recTotal = "+data["recTotal"]+";\r\n"+
"</script>\r\n"
);
}},
error:function(){
alert("请求失败!");
},
complete:function(){
$("#showWait").remove();
$("#showWaitImg").remove();
}
});
}
})(jQuery);
//操作翻页的js代码
function page_go()
{
page_validate();
$("form").submit();
}
function page_first()
{
document.forms[0].elements["pageResult.pageNo"].value = 1;
$("form").submit();
}
function page_pre()
{
var pageNo = document.forms[0].elements["pageResult.pageNo"].value;
document.forms[0].elements["pageResult.pageNo"].value = parseInt(pageNo) - 1;
page_validate();
$("form").submit();
}
function page_next()
{
var pageNo = document.forms[0].elements["pageResult.pageNo"].value;
document.forms[0].elements["pageResult.pageNo"].value = parseInt(pageNo) + 1;
page_validate();
$("form").submit();
}
function page_last()
{
document.forms[0].elements["pageResult.pageNo"].value = pageTotal;
$("form").submit();
}
function page_validate()
{
var pageNo = document.forms[0].elements["pageResult.pageNo"].value;
if (pageNo<1)pageNo=1;
if (pageNo>pageTotal)pageNo=pageTotal;
document.forms[0].elements["pageResult.pageNo"].value = pageNo;
var pageSize = document.forms[0].elements["pageResult.pageSize"].value;
if (pageSize<1)pageSize=1;
document.forms[0].elements["pageResult.pageSize"].value = pageSize;
}
function order_by(field){
document.forms[0].elements["pageResult.orderBy"].value = field;
page_first();
}
分享到:
相关推荐
项目内容从创建原生态的HTTPXMLRequest实现ajax开始,详细讲解ajax的应用,各种应用场合的实战案例;利用JQuery的ajax支持,...7.使用JQuery的ajax技术,在一个页面实现新增、修改、删除、查询、分页,文件上传等功能;
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况...
深刻体会到Ajax的优势,异步发送请求处理与页面局部刷新,提高了系统的用户体验度。 通过使用工厂模式和面向接口设计模式降低了程序的耦合度,提高程序灵活性。 通过大量编写代码,养成了更加规范的代码习惯。
10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。 AJAX 是一种用于创建快速动态网页的技术。 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换,...
9. 使用 html,基本使用 ajax 异步请求,页面不刷新。 10. 基于 shiro 改造的 sso 单机实现,登录生成 token 存储在用户 cookies 中,请求解析 cookies,以解析成功作为标识。 11. 交互上使用 layui,使用第三方功能...
10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...
10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...
10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...
10-22 1 ajax介绍 无刷新验证用户名 10-22 2 ajax如何处理xml格式返回数据 10-22 3 json 10-22 4 ajax如何处理json格式返回数据 10-22 5 ajax应用 省市联动 10-22 6 ajax应用 黄金市场报价 10-23 1 简易在线聊天室1 ...
用JAVA编写了一个小工具,用于检测当前显示器也就是显卡的显示模式,比如分辨率,色彩以及刷新频率等。 Java波浪文字制作方法及源代码 1个目标文件 摘要:Java源码,初学实例,波浪文字 Java波浪文字,一个利用...
14、修改在线更新版本对比代码段,修正了一个无外网连接时AJAX机制报错的BUG 15、修改了calendar.js,优化了日历选择控件样式和速度 16、修正了几处界面显示效果 17、在“私人定制界面”页面增加了“是否开启系统...
数字证书:从文件中读取数字证书,生成文件输入流,输入文件为c:/mycert.cer,获取一个处理X.509证书的证书工厂…… Java+ajax写的登录实例 1个目标文件 内容索引:Java源码,初学实例,ajax,登录 一个Java+ajax写的...