最近在用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. python图像卷积

    import cv2import numpy as np #filier 2Dsavepath = "E:\\"image = cv2.imread('E:\\me.jpg');c ...

  2. hdu1114 完全背包

    题意:给出钱罐的重量,然后是每种钱的价值和重量,问钱罐里最少可能有多少钱. 完全背包. 代码: #include<iostream> #include<cstdio> #inc ...

  3. PHP学习之字符串

    1.字符串变量用于存储并处理文本: 2.字符串变量用于包含有字符的值,在创建字符串后,就可以对它进行操作了,可以直接在函数中使用字符串,或把它存储在变量中: <?php $txt="H ...

  4. Angular JS学习之指令

    1.Angular JS通过称为指令的新属性来扩展HTML:通过内置的指令来为应用添加功能: 2.AngularJS指令:AngularJS指令是扩展的HTML属性,带有前缀ng-: **ng-app ...

  5. css/js(工作中遇到的问题)-3

    设置宽高比 使用padding/margin-top/bottom; 设置出教准确的自适应布局; 用于预加载图片; 关于数据库设置 添加extra对象用于扩展; 添加type类型; 对于字体 使用百分 ...

  6. jQuery-事件以及动画

    事件: 1.//方法1 $(window).load(function(){ }) window.onload=function(){ } //方法2 function one(){ alert(&q ...

  7. 去除手机端触摸滑动事件ontouchmove

    window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; ...

  8. shell中命令之间数据的传递

    1.管道 "|" ls | cat -n > out.txt 2. 子shell 2.1 子shell 说明 在shell脚本中可以用()操作符可以定义一个子shell #/ ...

  9. Shell 编程基础之变量和环境变量

    一.变量赋值和引用 Shell 编程中,使用变量无需事先声明,同时变量的命名不惜遵循如下规则: 首个字符必须为字母(a-z,A-Z)或者_ 变量名中间不能有空格,可以使用_连接 不能使用其他表达符号 ...

  10. Drawing Arc Using ArcSegment in XAML

    We can use the Arc XAML element to draw arcs in XAML. Besides drawing arcs using the Arc element, we ...