Yii 1开发日记 -- Ajax实现点击加载下一页
功能实现:先输出一页的内容,然后点击加载下一页,如图
1.控制器中
/**
* 消费记录:列出用户购买章节的记录
*/
public function actionMyPayHis()
{
//点击加载更多
if( Yii::app()->request->isAjaxRequest ) {
//分页
$pg = isset( $_GET[ "pg" ] ) ? $_GET[ "pg" ] : 1;
$page = max( 0 , $pg );
$offset = $page * 3;
$accountLogs = B2cAccountLog::model()->findAll( array( 'condition' => 'user_id = :user_id and change_type = :change_type' ,
'params' => array( ':user_id' => Yii::app()->user->getId() , ':change_type' => B2cAccountLog::NOVEL_USER_READ_PAY ) ,
'order' => 'change_time desc' ,
'offset' => $offset ,
'limit' => 3
) ); $tpl = '<tr>
<td class="text-center">%s</td>
<td class="text-center">%s 桃花币</td>
<td class="text-center">
%s
</td>
</tr>'; $data = array();
$html = '';
foreach ( $accountLogs as $accountLog ) {
$html .= sprintf( $tpl ,
$accountLog->change_desc ,
DycUtil::toFloat( $accountLog->user_money ) ,
DycUtil::getTim2DateTime( $accountLog->change_time , 1 )
);
} $data = array( 'type' => 'ok' , 'info' => $html ); echo CJSON::encode( $data );
return; } else { $accountLogs = B2cAccountLog::model()->findAll( array( 'condition' => 'user_id = :user_id and change_type = :change_type' ,
'params' => array( ':user_id' => Yii::app()->user->getId() , ':change_type' => B2cAccountLog::NOVEL_USER_READ_PAY ) ,
'order' => 'change_time desc' ,
'offset' => 0 ,
'limit' => 3
) ); $this->render( 'myPayHis' , array( 'accountLogs' => $accountLogs ) );
} }
先输出第一页的内容,再ajax请求输出下一页。
2.视图中
<div id="czjl" style="padding: 0 20px;">
<table class="am-table">
<thead>
<tr>
<th class="text-center">图书章节</th>
<th class="text-center">消费</th>
<th class="text-center">时间</th>
</tr>
</thead>
<tbody id="data_tr">
<?php
foreach ($accountLogs as $accountLog) {
?>
<tr>
<td class="text-center"><?= $accountLog->change_desc ?></td> <td class="text-center"><?= DycUtil::toFloat( $accountLog->user_money ) ?>桃花币</td>
<td class="text-center">
<?= DycUtil::getTim2DateTime( $accountLog->change_time , 1 ) ?>
</td> </tr>
<?php
}
?>
</tbody>
</table>
</div>
<div style="display: flex;justify-content: space-around;">
<div>
<span class="btn btn-default" id="loadmore">加载更多</span>
</div>
</div>
加载更多,加一个 "id",绑定事件;"tbody"加一个"id",用来添加下一页的内容。
3. JS实现
<script type="application/javascript"> var url = '<?= $this->createUrl( '/Novel/Hyzx/MyPayHis' ) ?>';
var i = 1;
var load = $('#loadmore');
//根据页数读取数据
function getData(page) {
i++; //页码自动增加,保证下次调用时为新的一页。
$.ajax({
type: "get",
url: url,
data: {pg: page},
dataType: "json",
success: function (data) {
if (data.info.length > 0) {
$('#data_tr').append(data.info);
} else {
load.html('没有更多的数据了....');
load.unbind()
}
},
error:function( request, textStatus ){
alert('请求失败,请稍候再试!' + textStatus);
}
});
} //点击加载下一页
$(function () {
load.on('click', function(){
getData(i);
});
});
</script>
核心代码,定义一个函数,然后点击时,调用。点击一次,"i"加1,保证最新一页。
小记:小而美,工匠精神。
Yii 1开发日记 -- Ajax实现点击加载下一页的更多相关文章
- Discuz帖子列表页无法ajax加载下一页问题
上周末抽空重构了一下JX3PVE的PVE栏目,只上线了宏库栏目,结果出了一堆Bug.奈何公司这段时间都在搞完美假期这专题,太忙也没去处理.这不是周末拿时间来看一下. 发现其中有一个是点“下一页”aja ...
- thinkphp+ajax 实现点击加载更多数据
https://blog.csdn.net/a898712940/article/details/78545599?utm_source=blogxgwz8 适用范围:thinkphp3.2和thin ...
- ajax点击加载更多数据图片(预加载)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- PHP+Ajax点击加载更多列表数据实例
一款简单实用的PHP+Ajax点击加载更多列表数据实例,实现原理:通过“更多”按钮向服务端发送Ajax请求,PHP根据分页参数查询将最新的几条记录,数据以JSON形式返回,前台Query解析JSON数 ...
- PHP+Ajax点击加载更多内容 -这个效果好,速度快,只能点击更多加载,不能滚动自动加载
这个效果好,速度快,只能点击更多加载,不能滚动自动加载 一.HTML部分 <div id="more"> <div class="single_item ...
- VSTO学习笔记(三) 开发Office 2010 64位COM加载项
原文:VSTO学习笔记(三) 开发Office 2010 64位COM加载项 一.加载项简介 Office提供了多种用于扩展Office应用程序功能的模式,常见的有: 1.Office 自动化程序(A ...
- Knockout应用开发指南 第六章:加载或保存JSON数据
原文:Knockout应用开发指南 第六章:加载或保存JSON数据 加载或保存JSON数据 Knockout可以实现很复杂的客户端交互,但是几乎所有的web应用程序都要和服务器端交换数据(至少为了本地 ...
- mui点击加载,下拉刷新,上下整合代码
mui点击加载,下拉刷新,上下整合代码 mui的是上拉加载,但是老大说要做成点击加载,所以就改了一些 代码应该是有些问题的,测到了大家就自己改下. 首先要说明的是,有下拉刷新的页面一定要是双webvi ...
随机推荐
- c++中的lambda特性
来源: http://www.jb51.net/article/56147.htm cocos2dx3.0测试: 1.有参数a,b printf("lambda=%lf", []( ...
- Android 轮换控件
首先是控件轮换 一.创建主布局 1.用到的控件是 TextSwitcher (文本轮换) 那么其他对应的也就是 ImageSwitcher (图片轮换) <LinearLayout xmlns: ...
- JAVA实现带图片的列表——JList
JList:显示对象列表并且允许用户选择一个或多个项的组件. JList的构造方法: 1.根据数组创建列表: JList(Object[] listData) 构造一个 JList,使其显示指定数组中 ...
- ubuntu终端窗口最大化(不是全屏)
窗口最大化:ctrl+win窗+↑ 窗口还原:ctrl+win窗+↓ 这快捷键让人无语.好好的gnome被改造成unity,快捷键也改掉了.win窗+↑/↓为啥不用呢? 还有就是terminal的ta ...
- 3种方法修改PHP时区
PHP5.2.4之前的版本无需设置时区.下面是修改PHP时区的三个办法. 1.修改PHP.ini这个文件 找到date.timezone这行,去掉前面的分号,改成: date.timezone = A ...
- jquery复选框checkbox实现删除
实现这样一个基本需求,页面有很多数据,可以删除一条或多条,删除前判断是否选中至少一条,否则提示. function deleteUser() { //当时是想把内容以str+="" ...
- mysql 主从单库单表同步 binlog-do-db replicate-do-db
方案一:两边做主从. SELECT SUM(DATA_LENGTH)+SUM(INDEX_LENGTH) FROM information_schema.tables WHERE TABLE_SCHE ...
- RabbitMQ学习
参考链接:http://www.cnblogs.com/leocook/p/mq_rabbitmq_0.html
- ruby 基础知识(一)
突然今天发现一大神的博客:http://www.cnblogs.com/jackluo/archive/2013/01/22/2871655.html 相信初学者会受益颇多 ruby 参考文档 ...
- js中获取窗口高度的方法
取窗口滚动条滚动高度 function getScrollTop() { var scrollTop=0; if(document.documentElement&&document. ...