怎样用PHP实现列表分页功能

php中世界最好的语言

发布时间：2017-12-20 14:30:47

5798人浏览过

来源于php中文网

原创

我们知道，在用thinkphp框架做项目的时候，经常会遇到对列表的内容进行分页，因为thinkphp框架中自带了分页功能，但是有一个缺陷，每次返回数据给页面的时候都需要重新加载页面所需要的js和css等资源，很增加流量的压力，今天就教大家怎样不重复加载页面也可以实现返回列表分页的功能。

二、分页流程

流程说明：

        1) 调研App.php中的函数，该函数调用fetch函数。fetch函数渲染list.html.
        2) list.html 调用获取总页数的函数，并得到总页数。
        3) 获取第一页数据。
        4)初始化laypage分页插件。
        5)点击页码，触发分页查询。

三、实现分页功能相关的代码

立即学习“PHP免费学习笔记（深入）”；

1、App.php Controller的代码

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

2、list.html中的html代码


  
   
   
    应用名称
    应用类型
    应用图像
    创建日期
    修改日期
    操作

jQuery带搜索跳转功能的列表分页代码

这是一款可以设置多个列表数量，带分页搜索跳转功能，非常实用的jQuery分页代码。

下载

3、list.html中的jQuery代码

//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($('')
    .append($("").html(item.name))
    .append($("").html(item.desc))
    .append($("").html("@@##@@"))
    .append($("").html(item.create_time))
    .append($("").html(item.update_time))
    .append(
     $("")
      .append($("查看丨 "))
      .append($("编辑丨 "))
      .append($("删除丨 "))
      .append($("禁用"))
  
    )
  
   );
  
   $("#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) {
    $('#table_body').empty();
    var data = eval(json);
    console.log(data);
  
    instantiation(data);
   },
  
   error: function(json) {
  
    var data = eval(json);
    console.log(data);
  
   }
  
  });
  
 }
  
 //调用函数实现分页
//获取总页数，用于初始化分页控件总页数
 pageCount= getAllpage("/application/getAllPage");
 //获取第一页数据
 getPageData("/application/getpage",1);
 //初始化分页控件并分页
 jsonPage(pageCount,pageIndex,currentPage,getPageData,"/application/getpage");

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！