thinkPHP5 verwendet das Laypage-Paging-Plug-in, um die Listen-Paging-Funktion_php-Beispiel zu implementieren

Dieser Artikel stellt thinkPHP5 im Detail vor und verwendet das Laypage-Paging-Plugin zur Implementierung der Listen-Paging-Funktion. Es hat einen gewissen Referenzwert. Freunde, die sich für thinkPHP5 interessieren, können sich darauf beziehen Werfen wir einen Blick auf die Laypage von thinkPHP5

1. Hintergrund

Bei der Verwendung des thinkPHP-Frameworks für Projekte tun wir das oft Die Paginierung des Inhalts der Liste ist aufgetreten. Das thinkPHP-Framework verfügt über eine Paging-Funktion, weist jedoch Mängel auf. Dieser Fehler besteht darin, dass jedes Mal, wenn die Daten jeder Seite an die Seite zurückgegeben werden, die für die Seite erforderlichen JS-, CSS- und anderen Ressourcen neu geladen werden müssen. Wenn die Seite zu viel JS enthält und zu groß ist, erhöht sich der Verkehrsdruck. Daher nutzen wir das Laypage-Plugin. Verwenden Sie einfach Ajax, um jedes Mal die Daten jeder Seite anzufordern, und es ist nicht erforderlich, die Seite wiederholt zu laden.

2. Paging-Prozess

Wie in der Abbildung unten gezeigt:

Prozessbeschreibung:

1) Untersuchen Sie die Funktion in App.php, die die Fetch-Funktion aufruft. Die Abruffunktion rendert list.html.
2) list.html ruft die Funktion auf, um die Gesamtzahl der Seiten abzurufen, und ruft die Gesamtzahl der Seiten ab.
3) Holen Sie sich die erste Seite mit Daten.
4) Initialisieren Sie das Laypage-Paging-Plug-in.
5) Klicken Sie auf die Seitenzahl, um eine Paging-Abfrage auszulösen.

3. Code im Zusammenhang mit der Implementierung der Paging-Funktion

1. App.php-Controller-Code

//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. Der HTML-Code in 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. jQuery-Code in 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 . Referenzressourcen

http://laypage.layui.com/

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, dass er für das Studium aller hilfreich sein wird .

Verwandte Empfehlungen:

Xiaobais kurze Einführung in die Verwendung von Laypage-Paging

laypage+laytpl-Beispiel

thinkphp5-Paging-Stil, tp5-Paging-Stil

Das obige ist der detaillierte Inhalt vonthinkPHP5 verwendet das Laypage-Paging-Plug-in, um die Listen-Paging-Funktion_php-Beispiel zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!