First create the controller, add two tries, an index a list here, I'm using MySQL.
Index.cshtml Code:
@{
Layout = null;
}
<! DOCTYPE html>
<meta name= "viewport" content= "Width=device-width"/>
<title>Index</title>
@Styles. Render ("~/content/css/home") @* style *@
@Scripts. Render ("~/bundles/jquery") @* here references jquery*@
@Scripts. Render ("~/scripts/js/renkefen_fenye") @*js*@
<body>//style can be adjusted by itself
<div id= "Container" >
<div id= "Container-top" >
<div style= "Float:left" > Test Project </div>
<div style= "color:gray;float:left;font-size:15px;" > Pagination List Display </div>
<div id= "Container-map" >
<div style= "margin:0 5px;color:white; " > System > List Paging </div>
</div>
</div>
<div id= "main" style= "height:500px;" >
<div style= "margin:10px Auto" >
<input type= "text" value= "" class= "TextInput" id= "UserName"/>
<input type= "button" value= "Searching" class= "search" id= "SearchButton"/>
</div>
<div id= "List" ></div>
</div>
<div id= "Container-bottom" >
Test © 2014
</div>
</div>
<div class= "Loading None" >
</div>
<input type= "hidden" id= "Pageindexhidden"/>
</body>
List.cshtml Code:
@using person.models
<div>
<div>
<div id= "Pagerdiv" style= "float:right; margin-top:- 30px; "
<span style= "width:120px; height:25px; margin-left:10px" ></SPAN>
<span style= "width:120p X height:25px; color:red; "> @ViewBag. Pageindex</span>
<span style=" width:120px; height:25px; ">/</SPAN>
<span style=" width:120px; height:25px; "> @ViewBag. pagecount</span>
</div>
@ShowPagerList ()
<div id=" List-pager "class=" page mt20 FR ";
@if (viewbag.list! = null) @* hide the page bar *@
{
@Html. Raw (viewbag.pagerhtml)
<span when no user is found > Jump to </span>
<input type= "text" class= "Page_shuru" id= "Pagetext"/>
<input type= "button" class= "Page_bt ml5" id= "Surebutton" value= "OK"/>
}
</div>
@helper showpagerlist ()
{
var list = Viewbag.list as list<usermodel>;
if (list! = null)
{
foreach (var item in list)
{
<div class= "List-item" >
<div style= "height:10%;margin:15px 0" >
<span> Basic Information:</span>
</div>
<div style= "height:20%;" >
<span> User name:</span>
<span> @item. Name</span>
</div>
<div style= "height:20%" >
<span> Password:</span>
<span> @item. Password</span>
</div>
</div>
}
}
Else
{
@* Here's a little feature. when no user is searched, the hidden page bar shows no data! *@
<span> No data! </span>
<script type= "Text/javascript" >
$ ("#pagerDiv"). CSS ("display", "none");
</script>
}
}
</div>
<input type= "hidden" id= "Pagecounthidden" value= "@ViewBag. PageCount"/>
</div>
JS Code:
Page load
$ (function () {
Pager (path.href, 1);
Search button Click event
$ ("#searchButton"). Click (function () {
Pager (path.href, 1);
});
Jump button Click event
$ ("#sureButton"). Live (' click ', function () {
var PageIndex = $.trim ($ ("#pageText"). Val ());
var PageCount = $ ("#pageCountHidden"). Val ();
var regNum =/^\d*$/;
if (parseint (pageIndex) >= parseint (PageCount)) {
Assign a value to a hidden field to store the target page to jump to
$ ("#pageIndexHidden"). Val (PageCount);
Pager (path.href, PageCount);
Return
}
else if (parseint (pageIndex) <= 1 | |!regnum.test (PAGEINDEX)) {
$ ("#pageIndexHidden"). Val (' 1 ');
Pager (path.href, 1);
Return
}
$ ("#pageIndexHidden"). Val (PageIndex);
Pager (path.href, pageIndex);
});
});
Variable
Path entity
var Path = {"href": "/renkefendemo/list"};
Next page
HREF: jump page controller/action/parameter
PageIndex: Current page number
PageCount: Page capacity
function nextpager (href, pageindex, PageCount) {
if (pageindex > PageCount) {
pageindex = PageCount;
} else {
pageindex = pageindex + 1;
}
Pager (href, pageindex);
}
Previous page
HREF: jump page controller/action/parameter
PageIndex: Current page number
function uppager (href, pageindex) {
if (pageindex < 1) {
pageindex = 1;
} else {
pageindex = pageindex-1;
}
Pager (href, pageindex);
}
Universal Paging Click
HREF: jump page controller/action/parameter
PageIndex: Current page number
function Pager (href, pageindex) {
var userName = $ ("#userName"). Val ();
G_loading ();
$ ("#list"). Load (href, {"PageIndex": PageIndex, "UserName": UserName}, Function () {
$ ("#pageText"). Val ($ ("#pageIndexHidden"). Val ());
$ ("#pageIndexHidden"). Val (');
G_closeloading ();
});
}
Open wait
function g_loading () {
$ (". Loading"). Show ();
}
Close wait
function g_closeloading () {
$ (". Loading"). Hide ();
}
Controller:
public class Renkefendemocontroller:controller
{
#region Variable Area
GET:/renkefendemo/
USERBLL USERBLL = new USERBLL ();
#endregion
Public ActionResult Index ()
{
return View ();
}
//Return to display list
public actionresult list (int pageIndex, string userName)
{
Try
{
//page capacity
Var pageSize = 3;
//Total pages
var pagecount = 0;
//Call Query and return PageCount
var list = Userbll.getstudentpager (PageIndex, PageSize, UserN Ame, out PageCount);
//Create Builderpager object
var pager = new Builderpager
{
Pageindex=pageindex,
Pagesize=pagesize,
Pagec Ount=pagecount,
Path = "/renkefendemo/list",
biaoqian= "A",
Commonclickname= "Pager",
Xiayiyeclickname = "Nextpager",
Shangyiyeclickname = "Uppager",
Dangqianyeclassname = "Page_curr"
};
//Production HTML page
Pager. Builderhtml ();
//Pass the current page number and page capacity to the view display
Viewbag.pagerhtml = pager. pagerhtml;
Viewbag.pagecount = PageCount;
Viewbag.pageindex = PageIndex;
Viewbag.list = List;
return View ();
}
Catch
{
//logging
return Rediecturl ();
}
}
Jump error page
Private ActionResult Rediecturl ()
{
Return View ("~/views/shared/error.cshtml");
}
}
MySQL stored procedure is used here Navicat
Begin
DECLARE _paidex int default 0;
DECLARE _count int default 0;
Set _paidex= (_pageindex-1) *_pagesize;
if (_username= ") Then
Begin
Select COUNT (ID) into _count from student;
Select student. ' Name ', student.age,student ' password ' from student LIMIT _paidex,_pagesize;
End
Else
Begin
Select COUNT (ID) into _count from student where student. ' Name ' like CONCAT ("%", _username, "%");
Select student. ' Name ', student.age,student ' password ' from student where student. ' Name ' like CONCAT ("%", _username, "%") Limit _paidex,_pagesize;
End
End If;
Set _pagecount=ceiling (_count*1.0/_pagesize);
End
The use of jquery, JS, and Ajax in MVC for paging stored procedures is written in MySQL.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
