Yii 1开发日记 -- Ajax实现点击加载下一页

　　功能实现：先输出一页的内容，然后点击加载下一页，如图

　　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，保证最新一页。

　　小记：小而美，工匠精神。