ThinkPHP+jquery.tmpl实现ajax无刷新分页

目录隐藏

1 1.控制器中增加一个获取JSON格式的方法

2 2.模板文件中代码

上一篇文章《ThinkPHP实现ajax无刷新分页》实现了普通的无刷新分页，这一篇主要使用jquery.tmpl.js插件来实现无刷新分页。

之前的步骤都一样，主要是模板文件要作一些小修改。

1.控制器中增加一个获取JSON格式的方法

  public function getAjaxList($p=1,$order='1'){
      $archivesModel = D('Archives');
      $count = $archivesModel->count(); //计算记录数
      $pagelist = 5; // 设置每页记录数
      $pageHTML = $this->getAjaxPage($count,$pagelist,'archives');//第三个参数是你需要调用换页的ajax函数名
      $rows = $archivesModel->getList($p,$order);
      $result = array();
      $result['rows'] = $rows;
      $result['page']= $pageHTML;
      echo json_encode($result);
  }

从以上方法中，可以看到，getAjaxList返回了一个json格式的数组，包含了列表数据(rows)和分页代码(page)，所以，模板中只需要将这两部分展示到指定的位置即可。

2.模板文件中代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <script src="http://127.0.0.1:8080/demos/jquery.tmpl.min.js" type="text/javascript"></script>
    <style type="text/css">
        /**
         *---------------分页样式-----------------
         */
        .pages {
            font-size: 0;
            margin: 5px auto;
            padding-bottom: 25px;
            padding-top: 0;
            text-align: center;
        }
        .pages a {
            display: inline-block;
            margin-right: 3px;
        }
        .pages a, .pages a:visited, .pages a:link, .pages a:hover {
            color: #000000;
            text-decoration: none;
        }
        .pages a {
            border: 1px solid #DDDDDD;
            display: inline-block;
            font-size: 14px;
            line-height: 28px;
            padding: 0 10px;
        }

        .pages span {
            background: none repeat scroll 0 0 #2D96E9;
            border: 1px solid #DDDDDD;
            color: #FFFFFF;
            display: inline-block;
            font-size: 14px;
            font-weight: 700;
            line-height: 28px;
            padding: 0 10px;
            margin-right: 3px;
        }
        .pages span.rows{
            background: none;
            color: #000;
            font-weight: normal;
        }
        .pages .current, .pages a:hover{background:none repeat scroll 0 0 #2D96E9; border:1px solid #2D96E9; color:#FFFFFF}
        /**
         *------------------分页样式---------------------
         */
    </style>

</head>
<body>
<script type="text/javascript">
    function archives(id){    //archives函数名 一定要和action中的第三个参数一致上面有
        var id = id;
        $.getJSON('/tp/App/index.php/Index/getAjaxList', {'p':id,'order':<?php echo $_GET['order']?>}, function(data){  //用get方法发送信息到IndexAction中的index方法
            $("#list").html('');
            $("#list").append($('#listTemplate').tmpl(data.rows));
            $("#page div").replaceWith(data.page);
        });
    }

</script>
<script id="listTemplate" type="text/x-jquery-tmpl">
<li>${ $data.id} | ${ $data.title}</li>
</script>
<script id="pageTemplate" type="text/x-jquery-tmpl">
${ $data.html}
</script>
<div id='archives'>
    <ul id="list">
    <volist name="rows" id="row">
        <li>{$row.id} | {$row.title}</li>
    </volist>
    </ul>
    <div id="page" class="pages">
       {$page}
    </div>
</div>
</body>
</html>

参考：
https://www.jb51.net/article/122701.htm

发表评论取消回复