Heim  >  Artikel  >  Backend-Entwicklung  >  So implementieren Sie die Listen-Paging-Funktion mit PHP

So implementieren Sie die Listen-Paging-Funktion mit PHP

php中世界最好的语言
php中世界最好的语言Original
2017-12-20 14:30:475439Durchsuche

Wir wissen, dass wir bei der Verwendung von thinkPHP-Framework zum Durchführen von Projekten häufig auf das Paginieren des Inhalts der Liste stoßen, da das thinkPHP-Framework über eine Paging-Funktion verfügt, diese jedoch vorhanden ist Ein Fehler. Jedes Mal, wenn Sie Daten an die Seite zurückgeben, müssen Sie die für die Seite erforderlichen JS-, CSS- und anderen Ressourcen neu laden, was den Verkehrsdruck erheblich erhöht. Heute werde ich Ihnen beibringen, wie Sie die Paging-Funktion für die Rückgabeliste implementieren Laden der Seite.

2. Paging-Prozess

Prozessbeschreibung:

1) Untersuchen Sie die Funktion in App.php, die die Abruffunktion 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

<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. Der jQuery-Code in list.html

//pageCount:总页数。用于初始化laypage分页控件。
//pageIndex:初始化当前页。显示第一页。
//currentPage:当前页数。
//getPageData:获取每页数据的函数。
//url:获取每页数据的方法的路径。由控制器和函数名组成。
 function jsonPage(pageCount, pageIndex,currentPage, getPageData,url) {
  var laypageindex = laypage({
   cont: &#39;result&#39;, //容器。值支持id名、原生dom对象,jquery对象。
   skin: &#39;#3c8dbc&#39;,
   pages: pageCount, //通过后台拿到的总页数
   curr: pageIndex, //初始化当前页
   prev: &#39;上一页&#39;, //若不显示,设置false即可
   next: &#39;下一页&#39;, //若不显示,设置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");


Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

PHP verwendet Git-Bereitstellungsumgebung

Einige Anwendungsfälle von Git

Detaillierte Erläuterung der JavaScript-Datentypen und Git-Nutzungscodes

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Listen-Paging-Funktion mit PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn