无刷新分页展示

最新推荐文章于 2018-08-03 19:54:20 发布
最新推荐文章于 2018-08-03 19:54:20 发布
阅读量500 收藏
点赞数 1
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a9925/article/details/54378843
版权


思路

点击时：

1、得到当前页数据  2、得到当前分页连接html

分别替换数据，分布连接


第1页

//该专家全部相关问答
                       $m = new Model();
                      $page = I("get.page", 1, "intval");
			$start = ($page - 1) * 6;
			$sql = "SELECT post_ask.expert_id,post_ask.ask_id,post_ask.ask_body,post_ask.ask_user,post_ask.ask_time,post_answer.answer_body,post_answer.answer_user,post_answer.answer_time  from post_ask
                           right JOIN post_answer on post_ask.ask_id = post_answer.ask_id and post_answer.answer_body is not null
                           where post_ask.ask_id is not null and post_ask.ask_body <>'' and (post_ask.expert_id =$expert_id and post_answer.answer_user =$expert_id)
                           GROUP BY post_ask.ask_id
						LIMIT $start, 6";

			$rela_ask_answer = $m->query($sql);
			foreach ($rela_ask_answer as $key => &$value) {
				$ask_user_name = M('user')->where("id = " . $value['ask_user'])->getField('nickname');
				$value['ask_user'] = $ask_user_name ? mb_substr($ask_user_name, 0, 12) : "匿名用户";

				if($value['label_id'] == NULL){
					$value['label_id'] = '';
				}
				$map['label_id']=array('in',$value['label_id']);
				$ask_list[$key]['label_name']=M('label_list')->where($map)->select();
			}

			//分页处理
			$sql = "SELECT count(*) as count from (SELECT post_ask.expert_id,post_ask.ask_id,post_ask.ask_body,post_ask.ask_user,post_ask.ask_time,post_answer.answer_body,post_answer.answer_user,post_answer.answer_time  from post_ask
                           right JOIN post_answer on post_ask.ask_id = post_answer.ask_id and post_answer.answer_body is not null
                           where post_ask.ask_id is not null and post_ask.ask_body <>'' and (post_ask.expert_id =$expert_id and post_answer.answer_user =$expert_id)
                           GROUP BY post_ask.ask_id ) as u";
			$rela_ask_answer_info = $m->query($sql);
			$rela_ask_answer_count = $rela_ask_answer_info[0]['count'];						
			$total_page = ceil($rela_ask_answer_count / 6);

			//$link_url = U('Coach/zhuanjia/zj_id/', array('page' => 'ppp'));
			$page_htmls = pagination($total_page, $page, "javascript:void(0);", 5, "class='nu_page'");

		    $zhuanjia_name = $getExpertLists[0]['nickname'];
			$this->assign('zhuanjia_name', $zhuanjia_name);
			$this->assign('pageLinks', $page_htmls);
			$this->assign('rela_ask_answer', $rela_ask_answer);

2步：前端ajax请求 

 //ajax无刷新翻页
   //上一页，下一页
   $('.next').live("click", function () {
        var page = parseInt($('.ck-page .curr').html()) + 1;
        get_page_list(page);

    })
    $('.prev').live("click", function () {
        var page = parseInt($('.ck-page .curr').html()) - 1;
        get_page_list(page);
    })
    //页码list 1,2,3,4,5
    $('.nu_page').live("click", function () {
        var page = $(this).html(); //获得点击页码
        var expert_id = "{$expert_id}";   
       var Ajaxurl = "/index.php/Coach/get_zhuanjia_wenda"; //提交点按钮后的数据
        $.ajax({
            type: 'post',
            url: Ajaxurl,
            data: "page=" + page+"&expert_id="+expert_id,
            success: function (mag) {
                if (mag) {
                    //console.log(eval(mag));

                    var htmls = eval(mag);
                    var zhuanjia_name = "{$zhuanjia_name}";
                    console.log(htmls);
                    //console.log(htmls.length);
                    var str_html = "";
                    for ($i = 0; $i < (htmls.length) - 1; $i++) {
                        str_html = str_html + '<li>' + '<ul class=\'askul\'>' +
                                '<li>' + '<img src=\'/Public/img/问.png\' alt=\'\' class=\'askimg\'>' + '<p class=\'askp\'>' +
                                '<a href=\'/wenda/'+htmls[$i]['ask_id']+'.html\' target=\'_blank\'>' +htmls[$i]['ask_body']+ '</a></p><span class=\'asktime\'>'+htmls[$i]['ask_time']+
                                '</span><span class=\'askactor\'>By    '+htmls[$i]['ask_user']+'</span></li>' +
                                '<li>' + '<img src=\'/Public/img/huida.png\' alt=\'\' class=\'askimg\'>' + '<p class=\'askp\'>' +
                                '<a href=\'/wenda/'+htmls[$i]['ask_id']+'.html\' target=\'_blank\'>' +htmls[$i]['answer_body']+ '</a></p><span class=\'asktime\'>'+htmls[$i]['answer_time']+
                                '</span><span class=\'askactor\'>By    '+zhuanjia_name+'</span></li>' +
                                '</ul>' +
                                '</li>'
                    }
                    $("#ask_lists").html(str_html);
                    console.log(str_html);


                    $(".wenda_pagelink").html(eval(mag)[htmls.length-1]);
                }
            }
        });
    })
  //上下页的翻动
 function get_page_list(page){
        var page = page;
        var expert_id = "{$expert_id}";
        var Ajaxurl = "/index.php/Coach/get_zhuanjia_wenda"; //提交点按钮后的数据
        $.ajax({
            type: 'post',
            url: Ajaxurl,
            data: "page=" + page+"&expert_id="+expert_id,
            success: function (mag) {
                if (mag) {
                    //console.log(eval(mag));

                    var htmls = eval(mag);
                    var zhuanjia_name = "{$zhuanjia_name}";
                    console.log(htmls);
                    //console.log(htmls.length);
                    var str_html = "";
                    for ($i = 0; $i < (htmls.length) - 1; $i++) {
                        str_html = str_html + '<li>' + '<ul class=\'askul\'>' +
                                '<li>' + '<img src=\'/Public/img/问.png\' alt=\'\' class=\'askimg\'>' + '<p class=\'askp\'>' +
                                '<a href=\'/wenda/'+htmls[$i]['ask_id']+'.html\' target=\'_blank\'>' +htmls[$i]['ask_body']+ '</a></p><span class=\'asktime\'>'+htmls[$i]['ask_time']+
                                '</span><span class=\'askactor\'>By&nbsp;&nbsp;&nbsp;&nbsp;'+htmls[$i]['ask_user']+'</span></li>' +
                                '<li>' + '<img src=\'/Public/img/huida.png\' alt=\'\' class=\'askimg\'>' + '<p class=\'askp\'>' +
                                '<a href=\'/wenda/'+htmls[$i]['ask_id']+'.html\' target=\'_blank\'>' +htmls[$i]['answer_body']+ '</a></p><span class=\'asktime\'>'+htmls[$i]['answer_time']+
                                '</span><span class=\'askactor\'>By&nbsp;&nbsp;&nbsp;&nbsp;'+zhuanjia_name+'</span></li>' +
                                '</ul>' +
                                '</li>'
                    }
                    $("#ask_lists").html(str_html);
                    console.log(str_html);


                    $(".wenda_pagelink").html(eval(mag)[htmls.length-1]);
                }
            }
        });
    }

3步 分布得数据方法 

$page_htmls = str_replace("title='第1页'","title='第1页' class='nu_page'",$page_htmls);	//专家页面相关问答分页请求
	public function get_zhuanjia_wenda()
	{
		//该专相关问答
		$m = new Model();
		$page = $_POST['page'];$expert_id = $_POST['expert_id'];
		$start = ($page - 1) * 6;
		$sql = "SELECT post_ask.expert_id,post_ask.ask_id,post_ask.ask_body,post_ask.ask_user,post_ask.ask_time,post_answer.answer_body,post_answer.answer_user,post_answer.answer_time  from post_ask
                           right JOIN post_answer on post_ask.ask_id = post_answer.ask_id and post_answer.answer_body is not null
                           where post_ask.ask_id is not null and post_ask.ask_body <>'' and (post_ask.expert_id =$expert_id and post_answer.answer_user =$expert_id)
                           GROUP BY post_ask.ask_id
						LIMIT $start, 6";

		$rela_ask_answer = $m->query($sql);
		foreach ($rela_ask_answer as $key => &$value) {
			$ask_user_name = M('user')->where("id = " . $value['ask_user'])->getField('nickname');
			$value['ask_user'] = $ask_user_name ? mb_substr($ask_user_name, 0, 12) : "匿名用户";

			if($value['label_id'] == NULL){
				$value['label_id'] = '';
			}
			$map['label_id']=array('in',$value['label_id']);
			$ask_list[$key]['label_name']=M('label_list')->where($map)->select();
		}

		//分页处理
		$sql = "SELECT count(*) as count from (SELECT post_ask.expert_id,post_ask.ask_id,post_ask.ask_body,post_ask.ask_user,post_ask.ask_time,post_answer.answer_body,post_answer.answer_user,post_answer.answer_time  from post_ask
                           right JOIN post_answer on post_ask.ask_id = post_answer.ask_id and post_answer.answer_body is not null
                           where post_ask.ask_id is not null and post_ask.ask_body <>'' and (post_ask.expert_id =$expert_id and post_answer.answer_user =$expert_id)
                           GROUP BY post_ask.ask_id ) as u";
		
		$rela_ask_answer_info = $m->query($sql);
		$rela_ask_answer_count = $rela_ask_answer_info[0]['count'];		
		
		$total_page = ceil($rela_ask_answer_count / 6);
		//$link_url = U('Coach/zhuanjia/zj_id/', array('page' => 'ppp'));
		$page_htmls = pagination($total_page, $page, "javascript:void(0);", 5, "class='nu_page'");
                $page_htmls = str_replace("title='第1页'","title='第1页' class='nu_page'",$page_htmls);

               array_push($rela_ask_answer,explode('@',$page_htmls));//将分页链接加入 相关问答数组中，一起json返回给前端
		$this->ajaxReturn($rela_ask_answer);
	}

其中改变一下 分页类中分页连接，加class参数，class方法点击触发

function公共类中

/**
 * 
 * @param unknown $total_page
 * @param unknown $current_page
 * @param unknown $link_url
 * @param number $type
 * @return string
 * 
 * e.g
 * pagination($total_page, $current_page, $link_url);
 */
function pagination($total_page, $current_page, $link_url, $type = 1, $a_class='') {
	if ($total_page <= 1) {
		return '';
	}
	
	$link_head = array();
	parse_str($_SERVER['QUERY_STRING'], $query);
	if (isset ($query['page'])) {
		unset ($query['page']);
	}
	
	foreach ($query as $k => $v) {
		//去除无效参数名
		if (empty($v) && $v != 0) {
			unset($query[$k]);
			continue;
		}
	
		$link_head[] = $k.'='.urlencode($v);
	}

	$link_head[] = 'page=';
	$vhead = strtolower($_SERVER['PHP_SELF']).'?'.implode('&', $link_head);
	
	$separator = '';
	$content = '';
	
	if (1 == $type) {
		$prev = "<a title='上一页' href='".str_replace('ppp', $current_page - 1, $link_url)."' class='pagePrev ajaxLink'> </a>";
		$next = "<a title='下一页' href='".str_replace('ppp', $current_page + 1, $link_url)."' class='pageNext ajaxLink'> </a>";
		if ($current_page > 1) {
			$content .= $prev;
		}
		$min = $total_page <= 6? 1: (($current_page - 2) > 0 ? $current_page - 2 : 1);
		$max = $total_page <= 6? $total_page: $min + 4;
		if($max > $total_page){
			$max = $total_page;
			$min = $max - 4;
		}
		
		for($i = $min; $i <= $max; $i++){
			$content .= ($i == $current_page)
				? "<a class='selected' style='padding-left:0;'> ".$i." </a>"
				: "<a title='第" . $i . "页' href='" . str_replace('ppp', $i, $link_url) . "' class='ajaxLink'>" . $i . "</a>";
		}
		if($current_page < $total_page){
			$content .= $next;
		}
	} else if (5 == $type) {
		$min = $total_page <= 6 ? 1: (($current_page - 2) > 0 ? $current_page - 2 : 1);
		$prev = "<a title='上一页' href='".str_replace('ppp', $current_page - 1, $link_url)."' class='prev'>上一页</a>";
		if ($min > 1) {
			$prev .= "<a title='第1页' href='".str_replace('ppp', 1, $link_url)."'>1</a>";
		}
		if ($min > 2) {
			$prev .= "<span class='ellipsis'>...</span>";
		}
		$next = "<a title='下一页' href='".str_replace('ppp', $current_page + 1, $link_url)."'  class='next'>下一页<s></s></a>";
		if($current_page > 1){
			$content .= $prev;
		}
		$min = $total_page <= 6 ? 1: (($current_page - 2) > 0 ? $current_page - 2 : 1);
		$max = $total_page <= 6 ? $total_page: $min + 4;
		if($max > $total_page){
			$max = $total_page;
			$min = $max - 4;
		}
		for($i = $min; $i <= $max; $i++){
			$content .= ($i == $current_page)
				? "<span class='curr'> ".$i." </span>"
				: "<a $a_class title='第" . $i . "页' href='" . str_replace('ppp', $i, $link_url) . "'>" . $i . "</a>";
		}
		if ($max < $total_page - 1) {
			$content .= "<span class='ellipsis'>...</span>";
		}
		if ($max < $total_page) {
			$content .= "<a $a_class title='第".$total_page."页' href='".str_replace('ppp', $total_page, $link_url)."'>".$total_page."</a>";
		}
		if($current_page < $total_page){
			$content .= $next;
		}
	}
	
	return $content;
}



总结： 一个数据信息 一个分页信息

public function getMoreEmployeeList()
	{
		$company_id = I('company_id');	//公司id
		$page = $_POST['page'];
		$start = ($page - 1) * 20;
		$sql = "SELECT * from employee where company_id = '$company_id'
						LIMIT $start, 20";

		$list = M()->query($sql);

		//分页处理
		$sql = "SELECT count(*) as count from employee";
		$count_info = M()->query($sql);
		$count_infos = $count_info[0]['count'];

		$total_page = ceil($count_infos / 20);
		$page_htmls = pagination($total_page, $page, "javascript:void(0);", 5, "class='nu_page'");
		$page_htmls = str_replace("title='第1页'","title='第1页' class='nu_page'",$page_htmls);

		array_push($list,explode('@',$page_htmls));//将分页链接加入 数组中，一起json返回给前端
		apiReturnMsg(1, '员工列表数据',$list);
	}



蜗牛慢慢向上爬
关注
专栏目录
HTML5无刷新实现跳转页面,操纵历史，利用HTML5 History API实现无刷新跳转
weixin_35980011的博客
06-03 1022
写在前面有一次在上点点网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转(已改版，观看此效果可以猛击此处：GitHub或阅FM)，回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度搜罗了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场。直到博客改版时，才将这一技术应用起来。HTML4中的History API...
[原创]终极分页：Ajax+Js+Dom+Json无刷新分页技术叫板另一篇仿百度、Google分页算法
liwei3gjob的专栏
03-11 5364
       首次原创地址：http://www.3gput.com/forum.php?mod=viewthread&tid=146&extra=page%3D1     本实例案例资源下载：ajax20110309.zip      这几日闲来浏览学生大本营，忽见学生大本营一篇仿百度、Google分页算法的文章，引起了我的关注，该文章详细具体的阐述了仿百度、Google分页，内容算是比
怎么样点上下页时无刷新
zhaosiyu的专栏
04-26 192
JSP开发的WEB项目，分页查询时老是有页面刷新
codeigniter 实现无刷新(ajax)分页
老毕的技术博客
08-06 3175
我们都知道codeigniter（以下都简称CI）有分页的类库，现在我们就基于其原生的类库来创建一个我们所需要的ajax分页。 首先在  /application/libraries/ 目录下建立一个 MY_Pagination.php ，代码如下： <?php /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends C
CI 框架 AJAX 无刷新分页 实现
范特西的博客
05-17 600
在弹窗内进行分页，因为是在之前代码上增加分页，所以采用拼接方法，其实这种方法并不好。如果采用vue 应该更好一些。 控制器： “`php /** * 单位 详情 * @author shenguowei */ public function show() { page=page=page ...
tp5框架无刷新分页实现方法分析
10-16
tp5框架无刷新分页实现方法分析主要介绍了tp5框架中如何实现无刷新分页的技术细节和步骤。ThinkPHP5（简称tp5）是一个流行的PHP开发框架，提供了一系列便捷的开发模式，其中分页是经常需要实现的功能，特别是在大...
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
09-02
而通过与AJAX技术结合，我们可以进一步实现动态无刷新的分页，提高用户体验。 首先，我们需要在页面中引入Bootstrap Paginator插件的CSS和JS文件，以及jQuery库，因为该插件依赖于jQuery。在HTML代码中，我们创建一...
无刷新分页
08-16
无刷新分页是一种提高网页用户体验的技术，特别是在大数据量列表展示时尤为重要。传统的分页方式，用户点击下一页按钮，浏览器会发起一个全新的请求，加载整个页面，这可能导致页面的短暂空白，用户需等待数据加载...
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
12-18
本文讲解内容为： Ajax 实现无刷新分页、实现原理、代码展示、代码下载。 这里需要说明一些知识： 1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而...
Ajax+smarty技术实现无刷新分页
10-22
文章中提到使用Smarty模板实现无刷新分页，即页面展示部分使用Smarty进行模板设计，而数据处理和逻辑部分仍由PHP完成。 PHP作为服务器端编程语言，处理从前端接收的请求，并将处理结果返回。在分页功能实现中，PHP...
超简单无刷新分页、PHP分页、HTML分页、实用
weixin_42350070的博客
08-03 2645
简单的无刷新分页，了解一下 直接上代码：   &lt;?php header('content-type:text/html;charset=utf-8'); /** * 数据处理 * @param array $data 数据数组 * @param int $shownum 每页显示记录数 * @return array 返回值 */ function selectdata...
CI支持AJAX分页
molaifeng的专栏
11-30 1674
隔了几年又接触了CI框架，需要做个AJAX分页，以前也就是懂个皮毛，现在是现学活用了。
Jquery+php+mysql实现上拉加载更多，后端CI，超详细，有示例（其实就是ajax无刷新分页）
Shiva的博客
07-27 4031
来吧，今天不玩虚拟机了，改代码了，今天在公司做了个小东西挺有意思，上拉加载更多，用ajax实现的，不复杂，关键的一两个点想明白了就通了。不多说了，先上代码： 前端代码： /* *** @author By Shiva *** Created *//*需要jquery支持哦*/ //Let's Go $(function(){ /*起始页数，每页显示数据已经在
Ajax实现无刷新分页效果
杜小白的博客
07-14 1976
一、无刷新分页技术的必要性  如果我们通过”传统方式“实现上图的商品分页效果，每次分页的时候就会使得头部、左侧、底部等已经显示的信息重新从服务器获得出来，这样对带宽、服务器资源、用户等待时间都有额外的损耗。如果使用ajax无刷新分页，每次就只从服务器获得”商品评论区域“信息即可，对各方面资源的使用就有相应节省，因此ajax无刷新分页效果有其存在的必要性。二、具体实现商品总记录条数、每页显示多少条m...
codeigniter实现ajax无刷新分页
老王的技术摘要
12-16 3380
我们都知道codeigniter（以下都简称CI）有分页的类库，现在我们就基于其原生的类库来创建一个我们所需要的ajax分页。 首先在  /application/libraries/ 目录下建立一个 MY_Pagination.php ，代码如下： /** *417 add 主要是实现ajax分页 **/ class MY_Pagination extends CI_Paginat
ci框架ajax分页
hjt321658的专栏
11-01 1728
1.ci的分页类 <?php if(!defined('BASEPATH')) exit('No direct script access allowed'); /** * CodeIgniter * * An open source application development framework for PHP 4.3.2 or newer * * @package Code
利用ajax实现web项目的无刷新分页（最新版）
lp_cq242的博客
05-31 2868
在学习中用ajax实现web项目的无刷新分页，代码中注释较少，有没看懂的可以留言js代码：var model = { pageSize: 3, //每页列表的行数 currPageNo:1, pageCount: 1//总页数 }; $(function(){ show_topics(); show_n...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蜗牛慢慢向上爬

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值