AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分页插件) 的使用

模板引擎分页插件

1.概念
模板引擎不属于特定技术领域，它是跨领域跨平台的概念。在Asp下有模板引擎，在PHP下也有模板引擎，在C#下也有，甚至JavaScript、WinForm开发都会用到模板引擎技术。

2.原理
置换型模板引擎实现简单，但其效率低下，无法满足高负载的应用（比如有海量访问的网站），因此还出现了“解释型”模板引擎和“编译型”模板引擎等。

3.用途
模板引擎可以让（网站）程序实现界面与数据分离，业务代码与逻辑代码的分离，这就大大提升了开发效率，良好的设计也使得代码重用变得更加容易。

4.代码
4.1 第一步必须引入模板引擎文件 template-web.js

<script src="../static/assets/vendors/jquery/jquery.js"></script>  //引入jQuery文件
<script src="../static/assets/vendors/art-template/template-web.js"></script>

4.2 第二步必须要将后台传来的数据装换为对象

4.3 第三步模板引擎的语法

必须设置type=“text/template”
必须对 script 标签设置ID
调用对象的属性,将数据填到对应的位置

<script type="text/template" id="btn-att">   /
      {{each data}}   //data必须是一个对象,此处是遍历data对象
     <tr>
        <td class="text-center"><input type="checkbox"></td>
        <td>{{$value.author}}</td>
        <td>{{$value.content}}</td>
        <td>{{$value.title}}</td>
        <td>{{$value.created}}</td>
        <td>
            {{if($value.status=='held')}}   
            待审核
            {{else if($value.status=='approved')}}
            准许
            {{else if($value.status=='rejected')}}
            拒绝
            {{else if($value.status=='trashed')}}
            回收站
            {{/if}}
        </td>
        <td class="text-center">
          <a href="post-add.php" class="btn btn-warning btn-xs">驳回</a>
          <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>

4.4 全部代码 ajax+分页插件代码+模板引擎代码

<?php 
  include_once './checkLogin.php';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>Comments &laquo; Admin</title>
  <link rel="stylesheet" href="../static/assets/vendors/bootstrap/css/bootstrap.css">
  <link rel="stylesheet" href="../static/assets/vendors/font-awesome/css/font-awesome.css">
  <link rel="stylesheet" href="../static/assets/vendors/nprogress/nprogress.css">
  <link rel="stylesheet" href="../static/assets/css/admin.css">
  <script src="../static/assets/vendors/nprogress/nprogress.js"></script>
</head>
<body>
  <script>NProgress.start()</script>

  <div class="main">
    <?php include_once './common/nav.php' ?>
    <div class="container-fluid">
      <div class="page-title">
        <h1>所有评论</h1>
      </div>
      <div class="page-action">
        <div class="btn-batch" style="display: none">
          <button class="btn btn-info btn-sm">批量批准</button>
          <button class="btn btn-warning btn-sm">批量拒绝</button>
          <button class="btn btn-danger btn-sm">批量删除</button>
        </div>
        <ul class="pagination pagination-sm pull-right">
          <!-- 分页插件的使用 -->
        </ul>
      </div>
      <table class="table table-striped table-bordered table-hover">
        <thead>
          <tr>
            <th class="text-center" width="40"><input type="checkbox"></th>
            <th>作者</th>
            <th>评论</th>
            <th>评论在</th>
            <th>提交于</th>
            <th>状态</th>
            <th class="text-center" width="100">操作</th>
          </tr>
        </thead>
        <tbody>
          <!-- 评论区信息的部分,此处由模板引擎动态添加 -->
        </tbody>
      </table>
    </div>
  </div>
  <?php include_once './common/aside.php' ?>
  <script src="../static/assets/vendors/jquery/jquery.js"></script>
  <script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
  <script src="../static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>
  <script src="../static/assets/vendors/art-template/template-web.js"></script>
  <script src="../static/assets/vendors/ckeditor/ckeditor.js"></script>
  <script type="text/template" id="btn-att"> 
      {{each data}}
     <tr>
        <td class="text-center"><input type="checkbox"></td>
        <td>{{$value.author}}</td>
        <td>{{$value.content}}</td>
        <td>{{$value.title}}</td>
        <td>{{$value.created}}</td>
        <td>
            {{if($value.status=='held')}}
            待审核
            {{else if($value.status=='approved')}}
            准许
            {{else if($value.status=='rejected')}}
            拒绝
            {{else if($value.status=='trashed')}}
            回收站
            {{/if}}
        </td>
        <td class="text-center">
          <a href="post-add.php" class="btn btn-warning btn-xs">驳回</a>
          <a href="javascript:;" class="btn btn-danger btn-xs">删除</a>
        </td>
      </tr>
    {{/each}}
  </script>
  <script>NProgress.done()</script>
 <script>
    var currentpage =1;
    var pagesize =10;
    function getcomments(currentpage,pagesize){
         $.ajax({
         type: "post",
         url: "api/getcomments.php",  //接口
         data: {'currentpage':currentpage,'pagesize':pagesize},  //向服务器发送所需要的数据
         dataType: "json",
         success: function (res){
          //  console.log(res);6
          if(res.code==1){
            var html=template("btn-att",res);  //模板引擎 template()方法调用
           $('tbody').html(html);         //模板引擎将数据动态添加到页面
           $('.pagination').twbsPagination({                //分页插件的使用
              totalPages: Math.ceil(res.count/pagesize),
              visiblePages: 5,
              onPageClick: function(event,page){
                getcomments(page,pagesize);
              }
           });
          }
        }
      });
    };
    getcomments(currentpage,pagesize);
    
  </script>
</body>
</html>

4.5 PHP代码

<?Php
$currentpage = $_POST['currentpage'];

$pagesize = $_POST['pagesize'];

include_once '../../common/mysql.php';

$offset = ($currentpage - 1) * $pagesize;

$conn = connect();

$sql = "SELECT  c.id ,c.author,c.content,c.`status`,c.created,p.title FROM comments as c
    LEFT JOIN posts as p on c.post_id=p.id
    LIMIT $offset,$pagesize";

$bool = query($conn, $sql);

$sqlCount = "select count(*) as count from comments";

$count = query($conn, $sqlCount)[0]['count'];

// print_r($count);

$res = array('code' => 0, 'msg' => '请求失败');

if ($bool) {
    $res['code'] = 1;
    $res['msg'] = "请求成功";
    $res['data'] = $bool;
    $res['count'] = $count;
}
// print_r ($res);

echo json_encode($res);



?>

5 分页插件 jquery.twbsPagination.js 基于jQuery

5.1 引入文件

<script src="../static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>

5.2 必须将序列符号,放在一个div或者一个ul容积中

<ul class="pagination pagination-sm pull-right">
          <!-- 分页插件的使用 -->
</ul>

5.3 原始样式
在这里插入图片描述

5.4 代码参考4.4代码

6 最终效果
在这里插入图片描述

AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分页插件) 的使用

模板引擎 分页插件

猜你喜欢

模板引擎分页插件