使用LayUI实现AJAX分页

首先去下载layUI，然后在页面当中加载layUI分页所需JS,CSS文件：

<link rel="stylesheet" href="../layui/css/layui.css">
<script src="../layui/layui.js"></script>

注意两个文件的先后顺序！！！

前端页面实现：

<script>
toPage(1);
//初始化分页数据
function toPage(curr) {$.ajax({type: "post",async: false,url: "./srv/public_fun.php",    //后台数据处理-下面有具体实现data: {"datatype": "getpage","curr":curr},success: function (d) {var a = eval("("+d+")");var html='';$.each(a.list,function(i,e){//......此处写回传显示的数据});$("#list_show").empty().html(html);laypage(a);    }});
}function laypage(a){layui.use(['layer', 'laypage', 'element'], function () {var layer = layui.layer, laypage = layui.laypage, element = layui.element();laypage({cont: 'pageDemo' //分页容器的id, pages: a.allpage //总页数, curr: a.curr, skin: '#5FB878' //自定义选中色值,skip: true //开启跳页, jump: function (obj, first) {if (!first) {toPage(obj.curr);}}});});
}

后台文件public_fun.php实现：

$p = $_REQUEST["curr"];//获取当前页
if($p<1)$p=1;
$limits = 2;//每页显示几条
$rc=$pd->query("select count(*) from sys_member where 1=1 ".$s_where)-fetchColumn(0);//查询总条数
$allpage = intval(ceil($rc / $limits));    //计算总共几页
$sql="select * from "表名" limit ".(($p-1)*$limits).",".$limits;
$datalist = $pd->query($sql)->fetchAll(PDO::FETCH_ASSOC);
$arr["list"]=$datalist;    //数据集
$arr["allpage"]= $allpage;    //总共几页
$arr["curr"]= $p;    //当前页
echo json_encode($arr);
break;

至此，全部实现结束！！！

使用LayUI实现AJAX分页相关推荐

layui php ajax分页,layui+thinkphp5.1实现分页（非动态表格）
框架:前段layui 后端thinkphp5.1 js:layui laypage.render({ elem:'paging' //数据总数 ,count:{$total_num} //当前页面大小 ...
bootstrap layui 两种分页的实现
最近做的项目中后台界面用的layui框架,前台界面用的是boostrap框架,这就导致我在做分页的过程中要考虑前台两种分页的动态实现,现在我已经爬出这个坑了,哈哈,给大家分享一下,写的不好的地方请大家 ...
layui 传递前端请求_前端请求后端，后端查询完毕传到前端，用layui 将数据分页...
前端:我用的是layui框架的分页 js 文件 layui.config({ base : "script/" }).use(['form','layer','jquery','l ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
PHP、jQuery、jQueryPager结合实现Ajax分页
建立html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
think php ajax分页,thinkPHP5框架实现基于ajax的分页功能示例
本文实例讲述了thinkPHP5框架实现基于ajax的分页功能.分享给大家供大家参考,具体如下: 最近一个页面的选项卡又牵扯到ajax分页,所以研究了一下tp5的ajax分页使用方法首先看一下tp5 ...
ajax分页实现（php）
ajax分页实现(php) 使用jquery.pagination.js插件引入js文件.css文件 <link rel="stylesheet" href="/ ...
Thinkphp ajax分页
Thinkphp中用ajax分页和普通的ajax分页的区别在于处理位置的不同,thinkphp是在控制器的方法中处理ajax传的值,然后返回数据.下面是一个点击事件触发后,显示的内容用ajax分页. ...
php ajax 分页phpapi,ajax分页_php ajax分页代码
摘要腾兴网为您分享:php ajax分页代码,智慧农业,长沙银行,一折包邮,信和财富等软件知识,以及381.65,红娘牵线,中经油马,战地小,歌词制作,唯美会,微软必应输入法,邓州在线,螺丝钉,侠客 ...

使用LayUI实现AJAX分页

使用LayUI实现AJAX分页

注意两个文件的先后顺序！！！

使用LayUI实现AJAX分页相关推荐

最新文章

热门文章