使用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分页就是这么简单，无需几行代码即可实现；