前台自定义通用分页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"]+"条记录&nbsp;/r/n"+
     "每页显示<input id=/"pageSize/" name=/"pageResult.pageSize/" value=/""+data["pageSize"]+"/" size=/"3/" />条&nbsp;/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();
      }
        详情:  http://hi.baidu.com/zhifeichuan/

jquery+ajax无刷新翻页相关推荐

  1. php v9 ajax 翻页,php ajax 无刷新翻页实现代码

    下面只是一个测试,在实际应用中,可能这种方法会比较占系统资源,不建意利用这样的方法处理分页效果. var http_request=false; function send_request(url){ ...

  2. php ajax无刷新翻页,php ajax 无刷新翻页实现代码

    $page=isset($_get['page'])?intval($_get['page']):1; //这句就是获取page=18中的page的值,假如不存在page,那么页数就是1. $num= ...

  3. java pjax_通过pjax实现无刷新翻页(兼容新版jquery)

    摘要:这篇jQuery栏目下的"通过pjax实现无刷新翻页(兼容新版jquery)",介绍的技术点是"jQuery.无刷新翻页.pjax.无刷新.刷新.翻页", ...

  4. JQUERY AJAX无刷新异步上传文件

    AJAX无刷新上传文件并显示 http://blog.csdn.net/gao3705512/article/details/9330637?utm_source=tuicool jQuery For ...

  5. yii2.0下,JqPaginator与load实现无刷新翻页

    JqPaginator下载地址http://jqpaginator.keenwon.com/ 控制器部分: <?php namespace backend\controllers;use com ...

  6. 用AjaxPro实现无刷新翻页效果及数据库分页技术介绍

    在看本文之前,建议查看本人的系列文章: <AjaxPro与服务器端交互过程中如何传值>:http://blog.csdn.net/zhoufoxcn/archive/2008/01/05/ ...

  7. PHP jQuery Ajax 无刷新表单提交实例

    采用 PHP 为后台,前端使用强大的 jQuery 库,可以很快写一个无刷新的表单实例. 整个过程分为两部分,一部分是 HTML 和 JS 文件,另一部分是 PHP 代码,返回服务器的响应. HTML ...

  8. php jquery ajax裁剪图照片,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例...

    这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...

  9. php flash 图片上传,php+jquery+ajax无刷新图片上传裁切,模拟flash头像上传实例

    这几天自己在写一个cms.之前在用到图片上传裁切的时候总是用的flash的,或者是swfupload之类的.用的还不熟练,所以今天就用ajax做一个图片上传裁切的实例.个人感觉还不错,现在就分享出来. ...

最新文章

  1. 在JAVA读取Excel数据的日期格式
  2. 怎么随时获取Spring的上下文ApplicaitonContext,和Spring管理的Bean
  3. jvm虚拟机_JVM虚拟机五连问,能过并不是只靠运气
  4. idea 代码第一次上传git_如何使用IDEA将项目代码首次上传至GitHub,并持续推送?...
  5. python中oxf2是什么_0x02-StartingPoint-Oopsie
  6. java线程读取流的时候卡死,java – 线程中断没有结束阻塞调用输入流读取
  7. JavaScript数组合并
  8. Bootstrap 滚动监听(Scrollspy)插件
  9. 谭浩强 C语言程序设计第五版 第六章 习题 答案
  10. GP数据库锁表如何解锁
  11. element表格设置fixed后滚动条滚动时右下角空白块
  12. 做一名「技术掮客」去变现自己的技术
  13. 如何解决SpringBoot的单测启动慢的问题
  14. Webpack4 配置 Output
  15. 使用手机+ardinuo+esp01做的网络时钟
  16. 吃字母------线程同步与互斥的学习
  17. 基于python的智能文本分析 书_推荐一本Python数据分析必备工具书
  18. 直线和直线,直线和圆,直线和矩形的交点
  19. Android 画布使用之电子签名
  20. java 保存在_Java存储到什么地方

热门文章

  1. 象棋ai算法(极小-极大值搜索、负极大值函数、Alpha-Beta剪枝算法、渴望算法)
  2. python单向链表逆序_链表逆序-Python实现
  3. Ubuntu 12.04安装Flash plugin for Firefox
  4. 2020年3月23日阿里笔试题
  5. 高效 MacBook 工作环境配置,超实用!
  6. 线上 MySQL 的自增 id 用尽怎么办?被面试官干趴下了!
  7. c语言中u%的用法,C语言中“#”和##的用法
  8. contos8安装jenkins
  9. 如何使用Certbot独立模式检索在CentOS 7上加密SSL证书
  10. 程序员如何通过创作图文项目实现自己的代码价值