layui 异步分页（全）

最新推荐文章于 2025-02-06 11:08:22 发布

小关enter

最新推荐文章于 2025-02-06 11:08:22 发布

阅读量3.1k

点赞数 2

分类专栏：前端

本文链接：https://blog.youkuaiyun.com/gty931008/article/details/86630095

版权

本文介绍了如何使用layui框架实现异步分页功能，包括引入js和css文件，编写前端html和js代码，最后展示实际效果。详细步骤简单明了，适合想要快速实现分页效果的开发者参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页前台实现分页是经常要用的，有很多分页插件比如pagenation等，这里使用layui 分页，个人比较懒不喜欢手写，手写其实也差不多；话不多说，go。详细文档可以查看官方的：https://www.layui.com/demo/laypage.html

一、引入js、css

//js 需要放到jquery.js的下方
<script src="/js/layui.js" charset="utf-8"></script>
//css
<link href="/css/layui.css" rel="stylesheet">

二、前端html

<div class="text-center" id="page-wrapper"></div>

三、前端js部分

<script type="text/javascript">

    var limit=10;//显示条数
    var curr=1;//当前页数
    var total=0;//数据条数
    $(function(){
        bindList(0,type);

    });
   //
    function bindList(offset,type) {
        $
            .ajax({