当前位置: 首页 > 工具软件 > Pagination.js > 使用案例 >

分页插件pagination.js的使用

陈誉
2023-12-01

1、js

参考:http://www.jq22.com/jquery-info5697

// 分页处理
				$('.M-box3').pagination({
					totalData: total, //数据总条数
			        showData: pageSize, //每页显示的条数
				    jump: true,
				    coping: true,
				    homePage: '首页',
				    endPage: '末页',
				    prevContent: '上页',
				    nextContent: '下页',
				    callback: function(api){
				    	console.log(api.getCurrent());
				    	$.ajax({
				    		url:'../data/post_list_do.php?page=' + (api.getCurrent()) + '&pageSize=' + pageSize,
				    		success:function(res){
				    			let datas = res.pageData;
				    			getAjaxDom(datas);
				    		},
				    		error:function(){}
				    	})
				    }
				});

	function getAjaxDom(data){
		let html = '';
		for (var i = 0; i < data.length; i++) {
			html += `
				<li>
					<span>${data[i]['a_id']}</span><span>${data[i]['title']}</span>
					<span>${data[i]['recommend']}</span><span>${data[i]['art_status']}</span>
					<span>${data[i]['author']}</span><span>${data[i]['create_time']}</span>
					<span><a href="view.php?pid=${data[i]['a_id']}">查看</a></span><span><a href="">修改</a></span><span>删除</span>
				</li>
			`;
		}
		$("#postList").html(html);
	}

2.html

<!-- 分页插件 -->
			<div class="M-box3"></div>

 

 

 类似资料: