thinkPHP5 utilise le plug-in de pagination laypage pour implémenter l'exemple de fonction_php de pagination de liste

Cet article présente principalement thinkPHP5 en utilisant le plug-in de pagination laypage pour implémenter la fonction de pagination de liste. Il a une certaine valeur de référence. Les amis intéressés par thinkPHP5 peuvent se référer. Jetons un coup d'œil à la page d'accueil de thinkPHP5

1. Contexte

Lorsque nous utilisons le framework thinkPHP pour réaliser des projets, nous le faisons souvent. Pagination rencontrée du contenu de la liste. Le framework thinkPHP est livré avec une fonction de pagination, mais il présente des défauts. Ce défaut est qu'à chaque fois que les données de chaque page sont renvoyées vers la page, les ressources JS, CSS et autres requises par la page doivent être rechargées. Si la page contient trop de JS et est trop volumineuse, cela augmentera la pression du trafic. Par conséquent, nous utilisons le plugin laypage. Utilisez simplement ajax pour demander les données de chaque page à chaque fois, et il n'est pas nécessaire de charger la page à plusieurs reprises.

2. Processus de pagination

Comme le montre la figure ci-dessous :

Description du processus :

1) Examinez la fonction dans App.php, qui appelle la fonction fetch. 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

<p 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> 
  <p id="result"></p> 
  <p 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> 
  </p> 
  <p id="content"> </p> 
  <p 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> 
  </p> 
 
  <!-- /.box-body --> 
 </p>

3. 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");

4 . Ressources de référence

http://laypage.layui.com/

Ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. .

Recommandations associées :

Brève introduction de Xiaobai à l'utilisation de la pagination laypage

exemple laypage+laytpl

style de pagination thinkphp5, style de pagination tp5

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!