<div id="pagination"></div>
<div id="dataContainer"></div>

<script>
	layui.config({
		base: '__LAYUIADMIN__/' //静态资源所在路径
	}).use(['layer','jquery', 'laypage'], function () {
		var laypage = layui.laypage
			,$= layui.$
			,layer = layui.layer;
			
		// 分页初始化
		laypage.render({
			elem: 'pagination',
			count: 0, // 数据总数，初始值为0
			limit: 5, // 每页显示的数据条数
			jump: function (obj, first) {
				// 首次加载
				if (first) {
					loadData(1, obj.limit); // 默认加载第一页
				} else {
					loadData(obj.curr, obj.limit); // 切换页码时加载对应页的数据
				}
			}
		});

		// 加载数据
		function loadData(page, limit) {
			$.ajax({
				url: 'your_backend_api_url',
				type: 'post',
				data: {
					action: 'listjson',
					page: page,
					limit: limit
				},
				success: function (res) {
					if (res.code === 200) {
						console.log(res.data);
						var data = res.data;
						var totalCount = res.count;

						// renderData(data); // 渲染数据
						updatePagination(totalCount,page, limit); // 更新分页组件的数据总数
					} else {
						layer.msg('数据加载失败');
					}
				},
				error: function () {
					layer.msg('请求失败');
				}
			});
		}

		// // 渲染数据
		// function renderData(data) {
		// 	var html = '';
		// 	for (var i = 0; i < data.length; i++) {
		// 		html += '<div>' + data[i].name + '</div>';
		// 	}
		// 	$('#dataContainer').html(html);
		// }

		// 更新分页组件的数据总数
		function updatePagination(totalCount, page, limit){
			laypage.render({
			elem: 'pagination',
			count: totalCount,
			limit: limit,
			curr: page, // 重置当前页码为第一页
			jump: function(obj, first){
				if(!first){
				loadData(obj.curr, obj.limit); // 切换页码时加载对应页的数据
				}
			}
			});
		}

	});
</script>