前台分页控件用法
<head>
<meta charset="utf-8" />
<link href="content/pagination.css" rel="stylesheet" />
<script src="Scripts/jquery-3.3.1.min.js"></script>
<script src="Scripts/pagination.js"></script>
<title>显示</title>
<script>
$(function () {
var where = $("#where").val();
$.ajax({
url: "http://localhost:62103/api/show",
data: { where: where, pageIndex: 1, pageSize: 2 },
dataType: "json",
type: "get",
success: function (res) {
pageShow(res.Falg);
}
})
})
//拼接显示方法
function Show(pageNumber, jq) {
var where = $("#where").val();
$.ajax({
url: "http://localhost:62103/api/show",
data: { where: where, pageIndex: (pageNumber+1), pageSize: 2 },
dataType: "json",
type: "get",
success: function (res) {
var str = "";
$(res.TT).each(function (i, n) {
str += "<tr>";
str += "<td>" + n.Sid + "</td>";
str += "<td>" + n.Sname + "</td>";
str += "<td>" + n.Ssex + "</td>";
str += "<td>" + n.Sage + "</td>";
str += "<td>" + n.Smajor + "</td>";
str += "</tr>";
})
$("#tb tr:gt(0)").empty();
$("#tb").append(str);
}
})
}
//分页的方法
function pageShow(total) {
$("#pagination").pagination(total, {
//每页显示的值
items_per_page: 2,
//省略号前显示的个数
num_display_entries: 2,
//省略号后显示的个数
num_edge_entries: 2,
prev_text: "首页",
next_text: "尾页",
//回调一个函数
callback: Show,
})
}
//查询方法
function chaxun() {
var where = $("#where").val();
$.ajax({
url: "http://localhost:62103/api/show",
data: { where: where ,pageIndex: 1, pageSize: 2 },
dataType: "json",
type: "get",
success: function (res) {
pageShow(res.Falg);
}
})
}
</script>
</head>
<body>
<input id="where" type="text" /><input id="chaxun" onclick="chaxun()" type="button" value="查询" />
<table id="tb">
<tr>
<td>编号</td>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>专业</td>
</tr>
</table>
<div id="pagination" class="pagination">
</div>
</body>
