MVC 分页 JQuery Pager

so_brave

MVC 分页 JQuery Pager





导入的包

Html代码

1. 1.<script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/jquery.pager.js")"></script>  
   
2. 2.<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Admin/Pager.css")" />  
   
3.     <script type="text/javascript" src="@Url.Content("~/Content/Admin/js/jquery/jquery.pager.js")"></script>
   
4.     <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Admin/Pager.css")" />

复制代码

Index.aspx

Html代码

1. 1.@{   
   
2. 2.    ViewBag.Title = "Index";   
   
3. 3.}   
   
4. 4.@using com.fh.Models   
   
5. 5.@model DemoList   
   
6. 6.<div id="sourcelist">  
   
7. 7.  @* @{   
   
8. 8.       Html.RenderAction("PageSelected", new { cuurentPageIndex = 0 });   
   
9. 9.    }*@   
   
10. 10.  
    
11. 11.    @Html.Partial("_TableList",Model)   
    
12. 12.</div>  
    
13. 13.<script type="text/javascript">  
    
14. 14.    $(document).ready(function () {   
    
15. 15.        PageClick(1); //$(".itemspager").pager({ pagenumber: currentPageNumber, pagecount: totalPageNumber, buttonClickCallback: PageClick });   
    
16. 16.    });   
    
17. 17.  
    
18. 18.</script>  
    
19. @{
    
20.     ViewBag.Title = "Index";
    
21. }
    
22. @using com.fh.Models
    
23. @model DemoList
    
24. <div id="sourcelist">
    
25.   @* @{
    
26.        Html.RenderAction("PageSelected", new { cuurentPageIndex = 0 });
    
27.     }*@
    
28. 
    
29.     @Html.Partial("_TableList",Model)
    
30. </div>
    
31. <script type="text/javascript">
    
32.     $(document).ready(function () {
    
33.         PageClick(1); //$(".itemspager").pager({ pagenumber: currentPageNumber, pagecount: totalPageNumber, buttonClickCallback: PageClick });
    
34.     });
    
35. 
    
36. </script>

复制代码

_TableList.cshtml(PartialView)

Html代码

1. 1.@using com.fh.Models   
   
2. 2.@model DemoList   
   
3. 3.<table>  
   
4. 4.        <thead>  
   
5. 5.            <tr>  
   
6. 6.                <td>  
   
7. 7.                    ID   
   
8. 8.                </td>  
   
9. 9.                <td>  
   
10. 10.                    Name   
    
11. 11.                </td>  
    
12. 12.            </tr>  
    
13. 13.        </thead>  
    
14. 14.        <tbody>  
    
15. 15.            @foreach (var item in Model.DataSource)   
    
16. 16.            {   
    
17. 17.                <tr>  
    
18. 18.                    <td>@item.ID   
    
19. 19.                    </td>  
    
20. 20.                    <td>@item.Name   
    
21. 21.                    </td>  
    
22. 22.                </tr>  
    
23. 23.            }   
    
24. 24.        </tbody>  
    
25. 25.    </table>  
    
26. 26.  
    
27. 27.    <div class="clear">  
    
28. 28.</div>  
    
29. 29.@if (Model.TotalItems > 0)   
    
30. 30.{   
    
31. 31.    if (Model.TotalItems <= 5)   
    
32. 32.    {   
    
33. 33.    <div class="pagination">  
    
34. 34.        <div class="results">  
    
35. 35.            Showing 1 to @Model.TotalItems of @Model.TotalItems (1 Pages)</div>  
    
36. 36.    </div>  
    
37. 37.    }   
    
38. 38.    else   
    
39. 39.    {   
    
40. 40.    <div class="itemspager pagination">  
    
41. 41.    </div>  
    
42. 42.    }   
    
43. 43.}   
    
44. 44.<div class="clear">  
    
45. 45.</div>  
    
46. 46.  
    
47. 47.  
    
48. 48.<script type="text/javascript" language="javascript">  
    
49. 49.   var currentPageNumber = 1;   
    
50. 50.    var numPerPage =5;   
    
51. 51.    var totalItems=@Model.TotalItems;   
    
52. 52.    var totalPageNumber = Math.ceil(totalItems / numPerPage);   
    
53. 53.    var url="@Url.Action("PageSelected","Demo")";   
    
54. 54.var PageClick = function (pageclicknumber) {   
    
55. 55.     currentPageNumber=pageclicknumber;   
    
56. 56.       $.ajax({   
    
57. 57.                    async: false,   
    
58. 58.  
    
59. 59.                    type: "Post",   
    
60. 60.  
    
61. 61.                    url:url,   
    
62. 62.  
    
63. 63.                    data: ({ cuurentPageIndex: currentPageNumber }),//will be more parameters when you needed.   
    
64. 64.  
    
65. 65.                    dataType: "html",   
    
66. 66.                    success: function (responseData) {   
    
67. 67.                        $("#sourcelist").html(responseData); //render table   
    
68. 68.                          totalitems=@Model.TotalItems;   
    
69. 69.                          totalPageNumber = Math.ceil(totalItems / numPerPage);   
    
70. 70.                            $(".itemspager").pager({ pagenumber:pageclicknumber, pagecount:totalPageNumber, buttonClickCallback: PageClick });   
    
71. 71.                    }   
    
72. 72.               });            
    
73. 73.};   
    
74. 74.  
    
75. 75.      
    
76. 76.</script>  
    
77. @using com.fh.Models
    
78. @model DemoList
    
79. <table>
    
80.         <thead>
    
81.             <tr>
    
82.                 <td>
    
83.                     ID
    
84.                 </td>
    
85.                 <td>
    
86.                     Name
    
87.                 </td>
    
88.             </tr>
    
89.         </thead>
    
90.         <tbody>
    
91.             @foreach (var item in Model.DataSource)
    
92.             {
    
93.                 <tr>
    
94.                     <td>@item.ID
    
95.                     </td>
    
96.                     <td>@item.Name
    
97.                     </td>
    
98.                 </tr>
    
99.             }
    
100.         </tbody>
     
101.     </table>
     
102. 
     
103.     <div class="clear">
     
104. </div>
     
105. @if (Model.TotalItems > 0)
     
106. {
     
107.     if (Model.TotalItems <= 5)
     
108.     {
     
109.     <div class="pagination">
     
110.         <div class="results">
     
111.             Showing 1 to @Model.TotalItems of @Model.TotalItems (1 Pages)</div>
     
112.     </div>
     
113.     }
     
114.     else
     
115.     {
     
116.     <div class="itemspager pagination">
     
117.     </div>
     
118.     }
     
119. }
     
120. <div class="clear">
     
121. </div>
     
122. 
     
123. 
     
124. <script type="text/javascript" language="javascript">
     
125.    var currentPageNumber = 1;
     
126.     var numPerPage =5;
     
127.     var totalItems=@Model.TotalItems;
     
128.     var totalPageNumber = Math.ceil(totalItems / numPerPage);
     
129.     var url="@Url.Action("PageSelected","Demo")";
     
130. var PageClick = function (pageclicknumber) {
     
131.      currentPageNumber=pageclicknumber;
     
132.        $.ajax({
     
133.                     async: false,
     
134. 
     
135.                     type: "Post",
     
136. 
     
137.                     url:url,
     
138. 
     
139.                     data: ({ cuurentPageIndex: currentPageNumber }),//will be more parameters when you needed.
     
140. 
     
141.                     dataType: "html",
     
142.                     success: function (responseData) {
     
143.                         $("#sourcelist").html(responseData); //render table
     
144.                           totalitems=@Model.TotalItems;
     
145.                           totalPageNumber = Math.ceil(totalItems / numPerPage);
     
146.                             $(".itemspager").pager({ pagenumber:pageclicknumber, pagecount:totalPageNumber, buttonClickCallback: PageClick });
     
147.                     }
     
148.                });         
     
149. };

复制代码

</script>  
ViewModel

C#代码

1. 1.using System;   
   
2. 2.using System.Collections.Generic;   
   
3. 3.using System.Linq;   
   
4. 4.using System.Web;   
   
5. 5.  
   
6. 6.namespace com.fh.Models   
   
7. 7.{   
   
8. 8.    public class DemoList   
   
9. 9.    {   
   
10. 10.        public DemoList()   
    
11. 11.        {   
    
12. 12.            DataSource = new List<Demo>();   
    
13. 13.        }   
    
14. 14.        public List<Demo> DataSource { get; set; }   
    
15. 15.        public int TotalItems { get; set; }   
    
16. 16.        public int CurrentPageIndex { get; set; }   
    
17. 17.    }   
    
18. 18.    public class Demo   
    
19. 19.    {   
    
20. 20.        public int ID { get; set; }   
    
21. 21.        public string Name { get; set; }   
    
22. 22.    }   
    
23. 23.}  
    
24. using System;
    
25. using System.Collections.Generic;
    
26. using System.Linq;
    
27. using System.Web;
    
28. 
    
29. namespace com.fh.Models
    
30. {
    
31.     public class DemoList
    
32.     {
    
33.         public DemoList()
    
34.         {
    
35.             DataSource = new List<Demo>();
    
36.         }
    
37.         public List<Demo> DataSource { get; set; }
    
38.         public int TotalItems { get; set; }
    
39.         public int CurrentPageIndex { get; set; }
    
40.     }
    
41.     public class Demo
    
42.     {
    
43.         public int ID { get; set; }
    
44.         public string Name { get; set; }
    
45.     }
    
46. } control

复制代码

C#代码

1. 1.using System;   
   
2. 2.using System.Collections.Generic;   
   
3. 3.using System.Linq;   
   
4. 4.using System.Web;   
   
5. 5.using System.Web.Mvc;   
   
6. 6.using com.fh.Models;   
   
7. 7.  
   
8. 8.namespace com.fh.Controllers   
   
9. 9.{   
   
10. 10.    public class DemoController : _Base   
    
11. 11.    {   
    
12. 12.        public readonly int numberPerPage = 5;   
    
13. 13.        public ActionResult Index()   
    
14. 14.        {   
    
15. 15.            DemoList m = new DemoList();   
    
16. 16.            //m.DataSource = CreatePageListTestDate();   
    
17. 17.            //return View(m);   
    
18. 18.            return View(m);   
    
19. 19.        }   
    
20. 20.        public ActionResult PageSelected(int cuurentPageIndex)   
    
21. 21.        {   
    
22. 22.            DemoList m = new DemoList();   
    
23. 23.            m.CurrentPageIndex = cuurentPageIndex;   
    
24. 24.            m.DataSource = CreatePageListTestDate().Skip((cuurentPageIndex-1) * numberPerPage).Take(numberPerPage).ToList();   
    
25. 25.            m.TotalItems = CreatePageListTestDate().Count;   
    
26. 26.            return PartialView("_TableList", m);   
    
27. 27.        }   
    
28. 28.        public List<Demo> CreatePageListTestDate()   
    
29. 29.        {   
    
30. 30.            List<Demo> r = new List<Demo>();   
    
31. 31.            for (int i = 1; i < 100; i++)   
    
32. 32.            {   
    
33. 33.                r.Add(new Demo   
    
34. 34.                {   
    
35. 35.                    ID = i,   
    
36. 36.                    Name = "test name " + i,   
    
37. 37.                });   
    
38. 38.            }   
    
39. 39.            return r;   
    
40. 40.        }   
    
41. 41.    }   
    
42. 42.}

复制代码