標籤：style io color os ar java for sp 資料
首先建立控制器，添加兩個試圖，一個Index 一個List 這裡我用的是mysql
Index.cshtml 代碼 ：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
@Styles.Render("~/Content/CSS/Home")@*樣式*@
@Scripts.Render("~/bundles/jquery")@*這裡引用了Jquery*@
@Scripts.Render("~/Scripts/JS/Renkefen_Fenye")@*JS*@
</head>
<body> //樣式可以自己調
<div id="container">
<div id="container-top">
<div style="float:left">測試專案</div>
<div style="color:gray;float:left;font-size:15px;">分頁列表展示</div>
<div id="container-map">
<div style="margin:0 5px;color:white;">系統>列表分頁</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="搜尋" class="search" id="searchButton" />
</div>
<div id="list"></div>
</div>
<div id="container-bottom">
測試 © 2014
</div>
</div>
<div class="loading none">
<img src="~/Content/IMG/loading.gif" />
</div>
<input type="hidden" id="pageIndexHidden" />
</body>
</html>
List.cshtml 代碼：
@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: 120px; 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) @*當沒有搜尋到使用者的時候，隱藏頁碼條*@
{
@Html.Raw(ViewBag.PagerHtml)
<span>跳轉到</span>
<input type="text" class="page_shuru" id="pageText" />
<input type="button" class="page_bt ml5" id="sureButton" value="確定" />
}
</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>基本資料:</span>
</div>
<div style="height:20%;">
<span>使用者名稱:</span>
<span>@item.Name</span>
</div>
<div style="height: 20%">
<span>密碼:</span>
<span>@item.Password</span>
</div>
</div>
}
}
else
{
@*這裡有一個小功能 當沒有搜尋到使用者的時候，隱藏頁碼條顯示暫無資料！*@
<span>暫無資料！</span>
<script type="text/javascript">
$("#pagerDiv").css("display", "none");
</script>
}
}
</div>
<input type="hidden" id="pageCountHidden" value="@ViewBag.PageCount" />
</div>
JS代碼：
//頁面載入
$(function () {
pager(Path.href, 1);
//搜尋按鈕點擊事件
$("#searchButton").click(function () {
pager(Path.href, 1);
});
//跳轉按鈕點擊事件
$("#sureButton").live(‘click‘, function () {
var pageIndex = $.trim($("#pageText").val());
var pageCount = $("#pageCountHidden").val();
var regNum = /^\d*$/;
if (parseInt(pageIndex) >= parseInt(pageCount)) {
//給隱藏欄位賦值，儲存要跳轉的目標頁面
$("#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);
});
});
//變數
//path 路徑實體
var Path = { "href": "/RenKeFenDemo/List" };
//下一頁
//href:跳轉的頁面Controller/Action/參數
//pageindex:當前頁碼
//pagecount:頁容量
function nextPager(href, pageindex, pagecount) {
if (pageindex > pagecount) {
pageindex = pagecount;
} else {
pageindex = pageindex + 1;
}
pager(href, pageindex);
}
//上一頁
//href:跳轉的頁面Controller/Action/參數
//pageindex:當前頁碼
function upPager(href, pageindex) {
if (pageindex < 1) {
pageindex = 1;
} else {
pageindex = pageindex - 1;
}
pager(href, pageindex);
}
//通用分頁click
//href:跳轉的頁面Controller/Action/參數
//pageindex:當前頁碼
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();
});
}
//開啟等待
function g_loading() {
$(".loading").show();
}
//關閉等待
function g_closeloading() {
$(".loading").hide();
}
Controller：
public class RenKeFenDemoController : Controller
{
#region 變數地區
// GET: /RenKeFenDemo/
UserBLL userBll = new UserBLL();
#endregion
public ActionResult Index()
{
return View();
}
//返回顯示列表
public ActionResult List(int pageIndex, string userName)
{
try
{
//頁容量
var pageSize = 3;
//總頁數
var pageCount = 0;
//調用查詢並返回pageCount
var list = userBll.GetStudentPager(pageIndex, pageSize, userName, out pageCount);
//建立BuilderPager對象
var pager = new BuilderPager
{
PageIndex=pageIndex,
PageSize=pageSize,
PageCount=pageCount,
Path = "/RenKeFenDemo/List",
BiaoQian="a",
CommonClickName="pager",
XiaYiYeClickName = "nextPager",
ShangYiYeClickName = "upPager",
DangQianYeClassName = "page_curr"
};
//生產HTML頁
pager.BuilderHTML();
//將當前頁碼和頁容量傳遞到視圖上顯示
ViewBag.PagerHtml = pager.PagerHTML;
ViewBag.PageCount = pageCount;
ViewBag.PageIndex = pageIndex;
ViewBag.List = list;
return View();
}
catch
{
//記錄日誌
return RediectURL();
}
}
//跳轉錯誤頁面
private ActionResult RediectURL()
{
return View("~/Views/Shared/Error.cshtml");
}
}
mysql 預存程序 這裡用的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
MVC中用Jquery、JS和Ajax 實現分頁 預存程序是用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
