前端分页+ajax


<table class="table table-bordered">
<tr>
<td>每页4条数据</td>
<td>当前第<span id="pageIndex">1</span>页</td>
<td>共<span id="allCount">1</span>条数据</td>
<td>共<span id="pageCount">1</span>页</td>
<td><button class="form-control" onclick="show(1)">首页</button></td>
<td><button class="form-control" onclick="show(pageIndex+1)">下一页</button></td>
<td><button class="form-control" onclick="show(pageIndex-1)">上一页</button></td>
<td><button class="form-control" onclick="show(pageCount)">尾页</button></td>
</tr>
</table>
@section scripts{
<script>
var pageIndex = 1;
var pageCount = 1;
$(function () {
show(1);
})
function show(page) {
var obj = {};
obj.pageSize = 4;
obj.pageIndex = page;
obj.Zt = $("#zt").val();
obj.Lsh = $("#lsh").val();
$.ajax({
url: "http://localhost:44372/api/SP/Show",
type: "get",
data: obj,
success: function (d) {
pageIndex = d.pageIndex;
pageCount = d.pageCount;
$("#pageIndex").text(d.pageIndex);
$("#pageCount").text(d.pageCount);
$("#allCount").text(d.allCount);
$("#tb").empty();
$(d.shenPiModels).each(function () {
$("#tb").append(
'<tr>' +
'<td>' + this.SId + '</td>' +
'<td>' + this.Zt + '</td>' +
'<td>' + this.Spsj + '</td>' +
'<td>' + this.Lsh + '</td>' +
'<td>' + this.Spzt + '</td>' +
'<td>' + (this.Spzt == '未发送' ? '<input id="Button1" type="button" value="未发送" onclick="Upd('+this.SId+')"/>' : this.Spzt=='已发送'?"已发送": this.Spzt == '待审核' ? '<input id="Button1" type="button" value="待审核" onclick="Upd(' + this.SId + ')" />' : "审核通过") + '</td>' +

'</tr>'

)
});
}
})
}

原文地址:https://www.cnblogs.com/wypd/p/13431462.html