Comment implémenter la fonction de pagination de liste en utilisant PHP

Nous savons que lorsque nous utilisons thinkframework PHP pour réaliser des projets, nous rencontrons souvent une pagination du contenu de la liste, car le framework thinkPHP est livré avec une fonction de pagination, mais il y a un défaut.Chaque fois que vous renvoyez des données à la page, vous devez recharger le JS, le CSS et d'autres ressources requises par la page, ce qui augmente considérablement la pression du trafic. Aujourd'hui, je vais vous apprendre à réaliser la fonction de pagination de la liste de retour sans répéter. chargement de la page.

2. Processus de pagination

Description du processus :

1) Examinez la fonction dans App.php, qui appelle la fonction de récupération. La fonction fetch restitue list.html.
2) list.html appelle la fonction pour obtenir le nombre total de pages et obtient le nombre total de pages.
3) Obtenez la première page de données.
4) Initialisez le plug-in de pagination laypage.
5) Cliquez sur le numéro de page pour déclencher la requête de pagination.

3. Code lié à l'implémentation de la fonction de pagination

1. Code du contrôleur App.php

   
//fetch渲染页面
public function index()
{
 return $this->fetch('list');
} 
 //根据页面传入的页码查询数据
 public function getPage()
 {
    
   <span style="color:#FF0000;">// 获取页面传入的页码 </span>     
   $nowpage = input("page");
   //每页显示10条数据
   $limits = 10;
  
   $app = new appInfo();
   $page_info = $app->limit(($nowpage * $limits), $limits)->select();
  
   // ajax 分页输出
   $info = [&#39;pageinfo&#39;=>$page_info,&#39;nowpage&#39;=>$nowpage,&#39;nowpage&#39;=>$nowpage];
  
  return json($info);
  
  
 }
  
  
 //获取所有页数
public function getAllPage(){
  
 try{
  $count = appInfo::count();
  
  $limits = 10;
  // 计算总页面
  $allpage = ceil($count / $limits);
  
  $info =[&#39;allpage&#39;=>$allpage];
 }catch (\Exception $e){
  abort(500,$e->getMessage(),[&#39;result&#39;=>TopsecGWErrer::TOPSEC_GW_ERR_NO_UNKNOWN]);
 }
  
 return json($info);
}

2. Le code html dans list.html

<div class="box-body">
  <table id="table1" class="table table-bordered table-striped">
   <thead>
   <tr>
    <th>应用名称</th>
    <th>应用类型</th>
    <th>应用图像</th>
    <th>创建日期</th>
    <th>修改日期</th>
    <th>操作</th>
   </tr>
   </thead>
   <tbody id="table_body"></tbody>
   <tfoot>
  
   </tfoot>
  </table>
  <div id="result"></div>
  <div class=" ">
   <button id="add_app" type="button" class="btn btn-primary col-xs-offset-5" >
    <span class=&#39;fa fa-tasks white&#39;></span>丨添加应用
   </button>
  </div>
  <div id="content"> </div>
  <div class="box-body">
  
   <button id="add_img" type="button" class="btn btn-primary col-xs-offset-5" >
    <span class=&#39;fa fa-tasks white&#39;></span>丨添加图片
   </button>
  </div>
  
  <!-- /.box-body -->
 </div>

3. Le code jQuery dans list.html

//pageCount：总页数。用于初始化laypage分页控件。
//pageIndex：初始化当前页。显示第一页。
//currentPage：当前页数。
//getPageData:获取每页数据的函数。
//url:获取每页数据的方法的路径。由控制器和函数名组成。
 function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) {
  var laypageindex = laypage({
   cont: 'result', //容器。值支持id名、原生dom对象，jquery对象。
   skin: '#3c8dbc',
   pages: pageCount, //通过后台拿到的总页数
   curr: pageIndex, //初始化当前页
   prev: '上一页', //若不显示，设置false即可
   next: '下一页', //若不显示，设置false即可
   skip: true, //是否开启跳页
   jump: function (obj, first) { //触发分页后的回调
    //getPageData(1);
    if (!first) { //点击跳页触发函数自身，并传递当前页：obj.curr
     getPageData(url,obj.curr);
     currentPage = obj.curr;
    }
   }
  });
 }
  
  
/url:获取总页数据的方法的路径。由控制器和函数名组成。 
 function getAllpage(url){
  
  var tmp ;
  $.ajax({
   type: "GET",
   dataType: "json",
   async: false,
   url: PUBLIC_BASE+url,
   success: function(json) {
    var data = eval(json);
    tmp=data.allpage;
   },
   error: function(json) {
  
   }
  
  });
  return tmp;
  
 }
  
 //data:每页的数据。由JSON对象组成。
 function instantiation(data) {
  //begin $.each
  $.each(data.pageinfo, function (index, item) {
   $("#table_body").append($(&#39;<tr class="table_tr"/>&#39;)
    .append($("<td/>").html(item.name))
    .append($("<td/>").html(item.desc))
    .append($("<td/>").html("<img src=&#39;"+item.appImg+"&#39; />"))
    .append($("<td/>").html(item.create_time))
    .append($("<td/>").html(item.update_time))
    .append(
     $("<td />")
      .append($("<a class=&#39;yellow&#39; id=&#39;view"+item.id+"&#39;><i class=&#39;fa fa-eye fa-fw&#39;></i>查看丨 </a>"))
      .append($("<a class=&#39;green&#39; id=&#39;edit"+item.id+"&#39;><i class=&#39;fa fa-edit fa-fw&#39;></i>编辑丨 </a>"))
      .append($("<a class=&#39;red&#39; id=&#39;delete"+item.id+"&#39;><i class=&#39;fa fa-remove fa-fw&#39;></i>删除丨 </a>"))
      .append($("<a class=&#39;blue&#39; id=&#39;forbid" + item.id + "&#39;><i class=&#39;fa fa-ban fa-fw&#39;></i>禁用</a>"))
  
    )
  
   );
  
   $("#view"+item.id).click(function() {
    fillMainContent("/application/application?model=view&id="+item.id);
   })
  
   $("#edit"+item.id).click(function() {
    fillMainContent("/application/application?model=edit&id="+item.id);
   })
  
   $("#delete"+item.id).click(function() {
  
    deleteApp(item.id);
    alert("删除成功");
  
   })
  
   $("#forbid"+item.id).click(function() {
    deleteApp(item.id);
    alert("删除成功");
    getPageData(currentPage);
   })
  
  });
  //end $.each
    
 } 
 //获取每页的数据。curr:页码 ，curl:获取数据的路径。
 function getPageData(url,curr) {
  curr = curr-1;
  $.ajax({
  
   type: "GET",
   dataType: "json",
   data: {page:curr},
   url: PUBLIC_BASE+url,
   success: function(json) {
    $(&#39;#table_body&#39;).empty();
    var data = eval(json);
    console.log(data);
  
    instantiation(data);
   },
  
   error: function(json) {
  
    var data = eval(json);
    console.log(data);
  
   }
  
  });
  
 }
  
 <span style="color:#FF0000;">//调用函数实现分页</span>
//获取总页数，用于初始化分页控件总页数
 pageCount= getAllpage("/application/getAllPage");
 //获取第一页数据
 getPageData("/application/getpage",1);
 //初始化分页控件并分页
 jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

php utilise l'environnement de déploiement git

Quelques cas d'utilisation de Git

Explication détaillée des types de données JavaScript et des codes d'utilisation de git

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!