标签：blog status round more date 技术 echo cti color
功能实现：先输出一页的内容，然后点击加载下一页，如图
1.控制器中
1 /** 2 * 消费记录：列出用户购买章节的记录 3 */ 4 public function actionMyPayHis() 5 { 6 //点击加载更多 7 if( Yii::app()->request->isAjaxRequest ) { 8 //分页 9 $pg = isset( $_GET[ "pg" ] ) ? $_GET[ "pg" ] : 1; 10 $page = max( 0 , $pg ); 11 $offset = $page * 3; 12 $accountLogs = B2cAccountLog::model()->findAll( array( ‘condition‘ => ‘user_id = :user_id and change_type = :change_type‘ , 13 ‘params‘ => array( ‘:user_id‘ => Yii::app()->user->getId() , ‘:change_type‘ => B2cAccountLog::NOVEL_USER_READ_PAY ) , 14 ‘order‘ => ‘change_time desc‘ , 15 ‘offset‘ => $offset , 16 ‘limit‘ => 3 17 ) ); 18 19 $tpl = ‘<tr> 20 <td class="text-center">%s</td> 21 <td class="text-center">%s 桃花币</td> 22 <td class="text-center"> 23 %s 24 </td> 25 </tr>‘; 26 27 $data = array(); 28 $html = ‘‘; 29 foreach ( $accountLogs as $accountLog ) { 30 $html .= sprintf( $tpl , 31 $accountLog->change_desc , 32 DycUtil::toFloat( $accountLog->user_money ) , 33 DycUtil::getTim2DateTime( $accountLog->change_time , 1 ) 34 ); 35 } 36 37 $data = array( ‘type‘ => ‘ok‘ , ‘info‘ => $html ); 38 39 echo CJSON::encode( $data ); 40 return; 41 42 } else { 43 44 $accountLogs = B2cAccountLog::model()->findAll( array( ‘condition‘ => ‘user_id = :user_id and change_type = :change_type‘ , 45 ‘params‘ => array( ‘:user_id‘ => Yii::app()->user->getId() , ‘:change_type‘ => B2cAccountLog::NOVEL_USER_READ_PAY ) , 46 ‘order‘ => ‘change_time desc‘ , 47 ‘offset‘ => 0 , 48 ‘limit‘ => 3 49 ) ); 50 51 $this->render( ‘myPayHis‘ , array( ‘accountLogs‘ => $accountLogs ) ); 52 } 53 54 }
先输出第一页的内容，再ajax请求输出下一页。
2.视图中
1 <div id="czjl" style="padding: 0 20px;"> 2 <table class="am-table"> 3 <thead> 4 <tr> 5 <th class="text-center">图书章节</th> 6 <th class="text-center">消费</th> 7 <th class="text-center">时间</th> 8 </tr> 9 </thead> 10 <tbody id="data_tr"> 11 <?php 12 foreach ($accountLogs as $accountLog) { 13 ?> 14 <tr> 15 <td class="text-center"><?= $accountLog->change_desc ?></td> 16 17 <td class="text-center"><?= DycUtil::toFloat( $accountLog->user_money ) ?>桃花币</td> 18 <td class="text-center"> 19 <?= DycUtil::getTim2DateTime( $accountLog->change_time , 1 ) ?> 20 </td> 21 22 </tr> 23 <?php 24 } 25 ?> 26 </tbody> 27 </table> 28 </div> 29 <div style="display: flex;justify-content: space-around;"> 30 <div> 31 <span class="btn btn-default" id="loadmore">加载更多</span> 32 </div> 33 </div>
加载更多，加一个 "id"，绑定事件；"tbody"加一个"id"，用来添加下一页的内容。
3. JS实现
1 <script type="application/javascript"> 2 3 var url = ‘<?= $this->createUrl( ‘/Novel/Hyzx/MyPayHis‘ ) ?>‘; 4 var i = 1; 5 var load = $(‘#loadmore‘); 6 //根据页数读取数据 7 function getData(page) { 8 i++; //页码自动增加，保证下次调用时为新的一页。 9 $.ajax({ 10 type: "get", 11 url: url, 12 data: {pg: page}, 13 dataType: "json", 14 success: function (data) { 15 if (data.info.length > 0) { 16 $(‘#data_tr‘).append(data.info); 17 } else { 18 load.html(‘没有更多的数据了....‘); 19 load.unbind() 20 } 21 }, 22 error:function( request, textStatus ){ 23 alert(‘请求失败，请稍候再试！‘ + textStatus); 24 } 25 }); 26 } 27 28 29 //点击加载下一页 30 $(function () { 31 load.on(‘click‘, function(){ 32 getData(i); 33 }); 34 }); 35 </script>
核心代码，定义一个函数，然后点击时，调用。点击一次，"i"加1，保证最新一页。
小记：小而美，工匠精神。
标签：blog status round more date 技术 echo cti color
原文地址：http://www.cnblogs.com/Jackmee/p/6221606.html
