AJAX template-web.js (模板引擎) jquery.twbsPagination.js (分頁外掛) 的使用
阿新 • • 發佈：2018-12-11
模板引擎 分頁外掛
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 « 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 最終效果
