为了账号安全,请及时绑定邮箱和手机立即绑定

使用LayUI实现AJAX分页

2018.07.01 14:52 12856浏览

首先去下载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分页就是这么简单,无需几行代码即可实现;

点击查看更多内容

本文原创发布于慕课网 ,转载请注明出处,谢谢合作

3人点赞

若觉得本文不错,就分享一下吧!

评论

相关文章推荐

正在加载中
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消