一个分页功能的实现
依赖layui
链接： http://www.layui.com/demo/laypage.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>layui</title> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <link rel="stylesheet" href="layui/css/layui.css" media="all"> <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --></head><body> <button onclick="make(data)">asdfasdf</button> <div id="demo8"></div> <ul id="biuuu_city_list"></ul> <script src="layui/layui.js" charset="utf-8"></script><!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 --><script>var data = [2,2,2,2,2,2,2,22,222,2,22,2,2,2,2,2,2]function make(data,nums=2){layui.use(['laypage', 'layer'], function(){ var laypage = layui.laypage ,layer = layui.layer; //测试数据 //模拟渲染 var render = function(data, curr){ var arr = [] ,thisData = data.concat().splice(curr*nums-nums, nums); layui.each(thisData, function(index, item){ arr.push('<li>'+ item +'</li>'); }); return arr.join(''); }; //调用分页 laypage({ cont: 'demo8' ,pages: Math.ceil(data.length/nums) //得到总页数 ,jump: function(obj){ document.getElementById('biuuu_city_list').innerHTML = render(data, obj.curr); } }); });}</script></body></html> |
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· Vue3状态管理终极指南：Pinia保姆级教程