thinkPHP5使用laypage分页插件实现列表分页功能

发布时间：2020-12-14 14:09:44 所属栏目：大数据来源：网络整理

导读：一、背景在使用thinkPHP框架做项目的时候，经常会遇到对列表的内容进行分页。thinkPHP框架中自带了分页功能，但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS、CSS等资源。如果页面包含的JS过多、过大，会增加流量压力。因此，

丨添加应用

丨添加图片

3、list.html中的jQuery代码

/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($('<tr class="table_tr"/>')
.append($("

一、背景在使用thinkPHP框架做项目的时候，经常会遇到对列表的内容进行分页。thinkPHP框架中自带了分页功能，但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS、CSS等资源。如果页面包含的JS过多、过大，会增加流量压力。因此，我们使用laypage插件。每次使用ajax请求获取每页的数据就可以了，不需要重复加载页面。二、分页流程如下图所示：流程说明： 1) 调研App.php中的函数，该函数调用fetch函数。fetch函数渲染list.html. 2) list.html 调用获取总页数的函数，并得到总页数。 3) 获取第一页数据。 4)初始化laypage分页插件。 5)点击页码，触发分页查询。三、实现分页功能相关的代码 1、App.php Controller的代码 fetch('list'); } //根据页面传入的页码查询数据 public function getPage() { <span style="color:#FF0000;">// 获取页面传入的页码 $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代码应用名称	应用类型	应用图像	创建日期	修改日期	操作
").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",data: {page:curr},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);` } }); } <span style="color:#FF0000;">//调用函数实现分页 //获取总页数，用于初始化分页控件总页数 pageCount= getAllpage("/application/getAllPage"); //获取第一页数据 getPageData("/application/getpage",1); //初始化分页控件并分页 jsonPage(pageCount,"/application/getpage"); 四、参考资源以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。（编辑：李大同）【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

一、背景

在使用thinkPHP框架做项目的时候，经常会遇到对列表的内容进行分页。thinkPHP框架中自带了分页功能，但是有缺陷。这个缺陷是每次返回每页数据给页面时需要重新加载页面所需要的JS、CSS等资源。如果页面包含的JS过多、过大，会增加流量压力。因此，我们使用laypage插件。每次使用ajax请求获取每页的数据就可以了，不需要重复加载页面。

二、分页流程

如下图所示：

流程说明：

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

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

1、App.php Controller的代码

fetch('list'); }

//根据页面传入的页码查询数据
public function getPage()
{

<span style="color:#FF0000;">// 获取页面传入的页码
$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代码

应用名称

应用类型

应用图像

创建日期

修改日期

操作

").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",data: {page:curr},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);

}

});

}

<span style="color:#FF0000;">//调用函数实现分页
//获取总页数，用于初始化分页控件总页数
pageCount= getAllpage("/application/getAllPage");
//获取第一页数据
getPageData("/application/getpage",1);
//初始化分页控件并分页
jsonPage(pageCount,"/application/getpage");

四、参考资源

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!