PHP+html动态获取数据内容并分页
需求:动态获取展示列表,并可分页
1.引入的js
(1) jquery.min.js
(2) pagination.js
<script type="text/javascript" src="../js/jquery.min.js"/></script>
<script type="text/javascript" src="../js/pagination.js"/></script>
<script>
const pageSize = 3;//一页展示多少条
let currentPage = 1;//分页第一页
let totalPage=1//总共多少页
$("#search").click(function () {
var title = $("#title").val();
$.ajax({
url: "url",//动态展示的url
type: 'POST',
data: {title: title },
dataType: "json",
success: function (res) {
var data = res.data.list;
var html = "";
for(var i = 0 ; i < pageSize ; i++) {
if(i < data.length) {
var title = data[i].title;
var id = data[i].id;
var url = "search/detail?ids=" + data[i].id;
html +="<tr>"
html +="<td ><input id='searchid' name='searchid' type='radio' value='"+id+"' ></td>"
html +="<td href='" + url + "' class='label dialogit' title='" + title +"'>"+title+"</a></td>"
html +="</tr>"
}
}
$('#container').html(html);//赋值到html中
// 调用pagination方法
var counts = res.data.count;//数据总数
totalPage=Math.ceil(counts / pageSize);//多少页
var script = document.createElement('script');//外部引入js
script.type = 'text/javascript';
script.src = '/assets/js/pagination.js';
document.body.appendChild(script);
setTimeout(function (){
$(".Pagination").html("");
$('.Pagination').pagination({
pageCount: Math.ceil(counts / pageSize),
current:currentPage,
callback: function (api) {
var index = api.getCurrent(); // 获取点击之后的新页数
currentPage = index;
loadMoreData(data,index);
}
});
},100)
}
});
});
//分页
function loadMoreData(datas,index) {
var title = $("#title").val();
var page = index;
$.ajax({
url: "url",
type: 'POST',
data: {keytitle: keytitle,page:page,pageSize:pageSize},
dataType: "json",
success: function (res) {
var data = res.data.list;
var html = "";
for(var i = 0 ; i < pageSize ; i++) {
if(i < data.length) {
var title = data[i].title;
var id = data[i].id;
var url = "search/detail?ids=" + data[i].id;
html +="<tr>"
html +="<td><input id='searchid' name='searchid' type='radio' value='"+id+"' ></td>"
html +="<td href='" + url + "' class='label dialogit' title='" + title +"'>"+title+"</a></td>"
html +="</tr>"
}
}
$('#container').html(html)
}
});
}
</script>
2.html代码
<table id="table" width="100%">
<tbody data-listidx="0" id="container">
</tbody>
</table>