jquery+ajax通用无刷新分页

前台自定义通用分页jquery插件

(一)框架:用jquery+ajax+struts1实现自动创建行和列

持久层用的是abatis.数据库用的是MySQL.

(二)sqlMap

shangjia.xml的配置如下

<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\" οnclick=\"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();
}

jquery+ajax通用无刷新分页相关推荐

jQuery+Ajax+PHP无刷新分页
代码需要在后台运行(包括页面index.html,ajax.php,connect.php,还有数据库food.sql) index.html <!DOCTYPE html> <ht ...
ajax实现无刷新分页与提示
目录封装dao方法通用查询分页sql语句定义oracle 语句dao 方法 Servlet界面获取数据代码分页与提示共用界面以及加载主页数据 Html界面代码显示与搜索实现分页下一页应用 ...
smarty+php+ajax 简单无刷新分页
简介分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($ ...
在Thinkphp中使用AJAX实现无刷新分页
在Thinkphp目录的Lib\ORG\Util\目录里新建AjaxPage.class.php,写入一下内容: <?php // +------------------------------ ...
Ajax实现无刷新分页效果
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
JQuery Ajax后台无刷新验证用户名重复，前台验证两次密码一致，后台创建并验证验证码
写在前面写web 的人,我想最先要解决的就是注册登录的界面了,一个小小的界面却包含着各种基本的知识,让我这个新手摸了一天. 效果图知识 1.bootstrap渲染表单 2.JQuery ajax验 ...
Jquery Ajax自定义无刷新提交表单Form
Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法如Form ...
Ajax 实现无刷新分页
用这种ajax做分页的方法比较简单,把代码直接复制就可以,然后根据实际更改一下里面的参数. 1.设置分页显示显示的样式,显示效果如下. <style type="text/css&qu ...

jquery+ajax通用无刷新分页

jquery+ajax通用无刷新分页相关推荐

最新文章

热门文章