最近在用ZendFreamwork开发一个后台,其中用到了分页,ZendFreamwork自带的分页挺好用的,可是我其中用到了Ajax的局部刷新,在加上一些搜索条件,所以分页有点无头绪了。下面我来介绍下我的方法:

1.首页我这个页面有两种选择情况我用a(渠道)和b(应用) 代替了,如果搜索的条件是a中的,那么就执行a 方法,如果是b 就执行b 方法,只刷新下边的列表部分

这里面php部分不说了,ZendFreamwork的分页可以看下手册,只说其中我认为最重要的(关键当时这个地方不会)

我的模板页面都是用js写的如何传参和执行的php方法名称:(可能写的不是很好,请见谅)

html页面:

<dl>

<dt>渠道:<input type="radio" name="type" value="1" checked="checked" /></dt>

<dd>

选择渠道<select name="cid" id="cid" title="渠道" class="add-text">

<option value="0">请选择</option>

<option value="1">博客园</option>

</select>

选择包<select name="q_pid" id="q_pid" title="当前资源"  class="add-text">

<option value="">请选择资源</option>

</select>

<dd>

</dl>

<dl>

<dt>应用:<input type='radio" name="type" value="2" /></dt>

<dd>

选择应用:<select name="pro" id="pid" title="应用" class="add-text">

<option value="0">请选择</option>

<option value="1">博客园</option>

</select>

选择包: <select name="pid" id="y_pid" title="当前资源"  class="add-text">

<option value="">请选择资源</option>

</select>

</dd>

</dl>

<script type="text/javascript">

var showReport = (function(){

function showList(type,date,cid,y_pid,q_pid,pid){

   var url = "";
         switch(type){
                case "1":
                    url = "/data/xiang/showpk";
                    break;
                case "2":
                    url = "/data/xiang/show";
                    break;
                default:
                    url = "/data/xiang/showpk";
                    break;
            }

    $.ajax({
             url:url,
             data:{
                 date:date,cid:cid,y_pid:y_pid,q_pid:q_pid,pid:pid
             },
             type:"post",
             dataType:"html",
             success:function(data){
                 $("div#divTable").html(data).show(300);
             }
         });

}

})();

$(function(){

  //选择应用时刷新对应的包

  $("#pid").change(function(){
         var url = "/data/xiang/getpackages";
         var sql = "pid";
             Ajaxpackages($("#pid").val(),$("#y_pid"),url,sql);//pid,包id,Ajax地址,php页面字段名
     });
     if($("#pid").val()){
         var url = "/data/xiang/getpackages";
         var sql = "pid";
            Ajaxpackages($("#pid").val(),$("#y_pid"),url,sql);
       }

  //选择渠道时刷新对应的包
     $("#cid").change(function(){
        var url = "/data/xiang/getpackages";
         var sql = "cid";
             Ajaxpackages($("#cid").val(),$("#q_pid"),url,sql);//cid,包id,Ajax地址,php页面字段名
     });
     if($("#cid").val()){
          var url = "/data/xiang/getpackages";
          var sql = "cid";
          Ajaxpackages($("#cid").val(),$("#q_pid"),url,sql);
       }

  showReport.showList("1","<?php echo $this -> views['date'];?>");//加载页面时执行
     showReport.searchList();

//分页

$("#pages a").live("click",function(e){

var gurl = $(this).attr("href");    //这是a 标签的链接地址,主要用于Page的传值

var type = "1";
$("input[name='type']").each(function(){
      if($(this).attr("checked")){
              type = $(this).val();
      }
});

var url = "";
         switch(type){
                case "1":
                    url = "/data/xiang/showpk";
                    break;
                case "2":
                    url = "/data/xiang/show";
                    break;
                default:
                    url = "/data/xiang/showpk";
                    break;
            }

var date = $("input[name='date']").val();

var cid = $("#cid").val();

var q_pid = $("#q_pid").val();

var y_pid = $("#y_pid").val();

var pid = $("#pid").val();

$.ajax({

url:url+gurl,

data:{

date:date,cid:cid,y_pid:y_pid,q_pid:q_pid,pid:pid

},

type:"post",

dataType:"html",

success:function(data){

$("div#divTable").html(data).show(300);

}

});

e.preventDefault();//去掉a标签的单击默认的操作

})

});

function Ajaxpackages(pid,pk,url,sql){
     $.ajax({
         url:url,
         type:"post",
         data:{pid:pid,v:new Date().getTime(),sql:sql},
         success:function(data){
             if(data){
                 var jsondata=eval(data);
                 var len = jsondata.length;
                 var selectContent = "<option value=''>资源包</option>";
                 for(var i=0;i<len;i++){
                     if(jsondata[i].acc_name){
                         selectContent += '<option value="'+jsondata[i].acc_id+'">'+jsondata[i].acc_name+'</option> ';
                     }
                 }
             }else{
                 selectContent = '<option value="">--没有对应的包--</option> ';
             }
             pk.html(selectContent);
         }
     });
 }

</script>

zendFream 中的用到了Ajax(其中有搜索)分页的更多相关文章

  1. 页面中的删除确认(ajax)、输入框中确认信息是否可用(ajax)的jquery代码

    1.页面中的删除确认(ajax) <%@ page language="java" contentType="text/html; charset=UTF-8&qu ...

  2. laravel中form表单,ajax传值没反应

    laravel中form表单,ajax传值没反应时,可能是令牌有问题. form中添加: {{csrf_token()}} ajax中添加: data: {'page': page, '_token' ...

  3. thinkphp ajax 无刷新分页效果的实现

    思路:先做出传统分页效果,然后重新复制一份Page.class.php类,对它进行修改,把js中的函数传到page类中,把上一页.下一页.首页.尾页.链接页中的url地址改成js控制的函数,模板页面中 ...

  4. thinkphp下实现ajax无刷新分页

    1.前言 作为一名php程序员,我们开发网站主要就是为了客户从客户端进行体验,在这里,thinkphp框架自带的分页类是每次翻页都要刷新一下整个页面,这种翻页的用户体验显然是不太理想的,我们希望每次翻 ...

  5. PHP 实例 - AJAX 实时搜索-AJAX Live Search

    PHP 实例 - AJAX 实时搜索 AJAX 可为用户提供更友好.交互性更强的搜索体验. AJAX Live Search 在下面的实例中,我们将演示一个实时的搜索,在您键入数据的同时即可得到搜索结 ...

  6. ajax 无刷新分页

    //ajax 无刷新分页1.前台要做的 滑动时 当前page+1,通过page ajax请求后台接口获取数据将数据进行拼装;2.后台要做的 做分页接口返回json数据前台判断触发请求条件: var p ...

  7. 转:SQL SERVER数据库中实现快速的数据提取和数据分页

    探讨如何在有着1000万条数据的MS SQL SERVER数据库中实现快速的数据提取和数据分页.以下代码说明了我们实例中数据库的“红头文件”一表的部分数据结构: CREATE TABLE [dbo]. ...

  8. Yii 框架ajax搜索分页

    要想实现ajax搜索分页 其实很简单 第一步:在 Yii 框架自带的搜索和分页正常运行的情况下,在视图层

  9. 关于Ajax无刷新分页技术的一些研究 c#

    关于Ajax无刷新分页技术的一些研究 c# 小弟新手,求大神有更好的解决方案,指教下~ 以前做项目,用过GridView的刷新分页,也用过EasyUI的封装好的分页技术,最近在老项目的基础上加新功能, ...

随机推荐

  1. LoadRunner检查点学习实例

    LoadRunner只会检测脚本中事务的执行状态,而实际的事务执行结果则需要通过检查点来完成. 例如一个登录事务,LR只关心事务本身的执行状态,也就是说哪怕实际操作密码错误产生登录失败的业务操作,其事 ...

  2. 【转】Hive配置文件中配置项的含义详解(收藏版)

    http://www.aboutyun.com/thread-7548-1-1.html 这里面列出了hive几乎所有的配置项,下面问题只是说出了几种配置项目的作用.更多内容,可以查看内容问题导读:1 ...

  3. Zepto tap 穿透bug

    当两个层重叠在一起时,使用Zepto的tap事件时,点击上面的一层时会触发下面一层的事件,特别是底层如果是input框时,必“穿透”,“google”说原因是“tap事件实际上是在冒泡到body上时才 ...

  4. java发送短信--httpclient方式

    最近头让我写个发送短信的java程序检测BI系统,检查数据库是否有异常发送,有则发送短信到头的手机里.这里我直说httpclient方式的get请求方式,并且已经有方式的短信的接口了,所以只要再加上参 ...

  5. docker不稳定 short running containers with -rm failed to destroy

    正常运行以下命令 sudo docker run --rm busybox echo helloworld /var/log/upstart/docker.log 日志如下: // :: POST / ...

  6. shell实现https登录

    服务端提供了两个api: 一个是用于用户认证,因为要传输密钥,所以用了https方式  如何在服务端配置https请见另外一个博文 https://192.168.1.190:8443/api/aut ...

  7. 将公司的主要项目从eclipse迁移到android studio for mac环境(1)

    上星期,我决定要解决这个问题.理由如下: 3个月之前,我已经投入一段时间要做好这个迁移工作,直到最后,我发现能够安装了,但是运行不了,这个过程也看不到bugly上传,在找不到原因的情况下,我放弃了. ...

  8. [Word]将word文件中的软回车符[↓]替换为硬回车符

    Ctrl+H,替换对话框 搜索:^l 替换:^p 确定替换即可.

  9. Linux下统计高速网络中的流量

    netpps.sh统计每秒数据量,包含接收(RX)或发送(TX) netpps.sh eth0 #!/bin/bash INTERVAL=" # update interval in sec ...

  10. ccc 碰撞初步

    cc.Class({ extends: cc.Component, properties: { }, // use this for initialization onLoad: function ( ...