1 public class DefaultController : Controller
2 {
3 // GET: Default
4 public ActionResult Index()
5 {
6 return View();
7 }
8
9 [HttpGet]
10 public JsonResult GetUsers(int pageIndex=1,int pageSize=2)
11 {
12 string sql = $"--Sql语句--";
13 List<UserModel> list = DBHelper.GetList<UserModel>(sql);
14 PageModel model = new PageModel();
15 model.DataCount = list.Count;//拿到总的数据量
16 model.Users = list.Skip((pageIndex - 1) * pageSize).Take(pageSize).ToList();
17 return Json(model, JsonRequestBehavior.AllowGet);
18 }
19 }
1 @{
2 Layout = null;
3 }
4
5 <!DOCTYPE html>
6
7 <html>
8 <head>
9 <meta name="viewport" content="width=device-width" />
10 <title>Index</title>
11 <link href="~/Content/bootstrap.css" rel="stylesheet" />
12 <script src="~/Scripts/jquery-3.4.1.js"></script>
13 <script>
14 var pageIndex = 1;//当前页
15 var pageSize = 2;//页大小
16 var PageCount = 0;//总页数
17 var DataCount = 0;//总条数
18 $(function () {
19 GetList();
20 })
21
22 //显示数据的获取
23 function GetList() {
24 $.get("/Default/GetUsers", { pageIndex,pageSize }, function (d) {
25 $("#DataRows").empty();
26 $(d.Users).each(function () {
27 var str = "<tr>" +
28 "<td>"+this.UId+"</td>" +
29 "<td>"+this.LoginName+"</td>" +
30 "<td>************</td></tr>";
31 $("#DataRows").append(str);
32 })
33 DataCount = d.DataCount;
34 PageCount = Math.ceil(DataCount * 1.0 / pageSize);
35 $("#pageIndex").text(pageIndex);
36 $("#pageCount").text(PageCount);
37
38 })
39 }
40 </script>
41 </head>
42 <body>
43 <div>
44 <table class="table table-bordered">
45 <tr>
46 <th>编号</th>
47 <th>用户名</th>
48 <th>密码(MD5加密)</th>
49 </tr>
50 <tbody id="DataRows">
51 </tbody>
52 </table>
53 </div>
54 <div>
55 当前第<span id="pageIndex"></span>页
56 共<span id="pageCount"></span>页
57 <input id="btnPrev" type="button" value="上一页" onclick="DoPrev();" />
58 <input id="btnNext" type="button" value="下一页" onclick="DoNext();" />
59 </div>
60 <script>
61 function DoPrev() {
62 if (pageIndex == 1) {
63 alert("已经是第一页了");
64 return;
65 }
66
67 pageIndex--;
68 GetList();
69 }
70
71 function DoNext() {
72 if (pageIndex == PageCount) {
73 alert("已经是最后一页了");
74 return;
75 }
76 pageIndex++;
77 GetList();
78 }
79 </script>
80 </body>
81 </html>
