Fork me on GitHub

知途灬林

导航

小分页 

 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>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
56         共<span id="pageCount"></span>页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
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>

 

posted on 2020-11-18 20:38  小豆子你还好吗  阅读(85)  评论(0)    收藏  举报