最近在用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. Android开发之ViewPager+ActionBar+Fragment实现响应式可滑动Tab

     今天我们要实现的这个效果呢,在Android的应用中十分地常见,我们可以看到下面两张图,无论是系统内置的联系人应用,还是AnyView的阅读器应用,我们总能找到这样的影子,当我们滑动屏幕时,Tab可 ...

  2. python 文件操作总结

    Python 文件I/O 本章只讲述所有基本的的I/O函数,更多函数请参考Python标准文档. 打印到屏幕 最简单的输出方法是用print语句,你可以给它传递零个或多个用逗号隔开的表达式.此函数把你 ...

  3. ++i与i++的区别

    1. ++i 和 i++,在单独使用时,就是 i=i+1. 2. a = ++i,相当于 i=i+1; a = i; (先i = i + 1,再使用i的值).也可以写成 i++; a=i 3. a = ...

  4. 安装 phpredis 扩展

    /************************************************//********************* phpredis  ***************** ...

  5. 20145223《Java程序程序设计》第1周学习总结

    20145223 <Java程序设计>第1周学习总结 教材学习内容总结 1.JDK.JRE以及JVM的区别 JDK:撰写java程序语言的时候需要用到的编译工具 JRE:java执行环境 ...

  6. css -- 映像 ,分页(上一页下一页)

    1.映像:-webkit-box-reflect:blow 2px -webkit-gradient( linear, left top, left bottom, from(transparent) ...

  7. 并查集 + 线段树 LA 4730 Kingdom

    题目传送门 题意:训练指南P248 分析:第一个操作可以用并查集实现,保存某集合的最小高度和最大高度以及城市个数.运用线段树成端更新来统计一个区间高度的个数,此时高度需要离散化.这题两种数据结构一起使 ...

  8. HDU3820 Golden Eggs(最小割)

    题目大概说给一个n*m的格子,每个格子放金蛋或银蛋都会得到不同的价值,当然也可以不放,不过如果存在相邻的两个格子都是金蛋会损失价值g,都是银则损失s.问能得到的最大价值. 有点像二者选一的最小割模型, ...

  9. TODO软件工程--如何预算项目的工期

    我的项目后台接口已经开发好,是前人留下的接口,现在只需要和前端联调,本以为后台的开发周期短,可以提早上线,可以因为旧接口不兼容新的要求 不得不重新写,造成了工期的延误. 如何计算一个工期被提上日程.

  10. WPF 2D 碰撞检测

        var intersectionDetail = path1.Data.FillContainsWithDetail(path2.Data); if (intersectionDetail ! ...