MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。

首先创建控制器,添加两个试图,一个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">
测试 &copy; 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

时间: 2024-10-13 04:34:17

MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。的相关文章

prototype.js 和 jQuery.js中 ajax 的使用

这次还是prototype.js 和 jQuery.js冲突的问题,前面说到过解决办法http://www.cnblogs.com/Joanna-Yan/p/4836252.html,以及上网说的大部分方法都只能解决$的冲突问题.我先引入了prototype.js 再引入jQuery.js,在用了jquery中的$,然后来用prototype中的ajax的时候,ajax的方法就不启作用了. 最后改为了用 jQuery.js中 ajax .现在记录下两者ajax调用的区分: <%@ page la

jQuery 分页插件(jQuery.pagination.js)ajax 实现分页

首先需要引入jQuery 再次需要引入 <script src="jquery/jquery.pagination.js"></script> 同时也要引入 <link rel="stylesheet" href="css/pagination.css"> 引入之后,分页基本样子 下面看分页配置参数 var defaults = { totalData: 0, //数据总条数 showData: 0, //每页

MVC中用jQuery加BootStrap实现动态增加删除文本输入框!

http://www.freejs.net/article_biaodan_278.html 这是在网上找到方法,我修改了一下实合我的项目,发博只为收藏记录并加深记忆. 修改后效果如下 @model PwtsWeb.Models.PhoneNum @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-w

jQuery框架中$.ajax()的常用参数有哪些?写一个post请求并带有发送数据和返回数据的样例

sync是否异步 url请求地址 contentType发送信息至服务器时内容编码类型 data发送到服务器的数据 dataType预期服务器返回的数据类型 type请求类型 success请求成功回调函数 error请求失败回调函数 $.ajax({ url: "/jquery/test1.txt", type: 'post', data: { id: 1 }, success: function(data) { alert(data); } }

asp.net MVC 使用JQuery.Ajax

使用到:Jquery.js 以及 Newtonsoft.Json.dll 客户端调用方式: $("#ButAjax").click(function() {$.ajax({type: "POST", //默认是GETurl: "/AjaxTest/getPerson",data: "ID=1&FirstName=C&LastName=HY",async: true, //异步cache: false, //不加

Jquery的DataTable插件 AJAX 服务器分页的的学习心得(java版)

首先得先引入对应的js 1.jquery.min.js  首先导入 2. File:        jquery.dataTables.min.js Version:     1.9.4     这是我使用的版本 这是  jsp 页面 关键的table  代码 <table id="fuck" class="table table-bordered data-table"> <thead> <tr> <span style=

MVC使用jQuery.ajax()删除数据

jQuery.ajax()可以简写为$.ajax().以前有写过MVC删除的实现,如<MVC实现删除数据库记录> http://www.cnblogs.com/insus/p/3368042.html 和<MVC 5显示.创建.编辑.删除等功能实练>http://www.cnblogs.com/insus/p/3372916.html .不过此次Insus.NET想使用jQuery.ajax()方法来实现. 能实现到此功能,也有遇上很多困难以及花费很多时间.当你看到此篇时,你会看到

MVC 简单的AJAX异步分页+MYSQL

留资料,以后学习用 1.后台 public ActionResult textPage() { return View(); } [HttpPost] public ActionResult textPage(FormCollection collection) { //实例化对象 BLL.pc_dialog bll_pcdialog = new BLL.pc_dialog(); Model.pc_dialog model_pcdialog = new Model.pc_dialog(); //

MVC 使用Jquery实现AJax

在上一篇介绍MVC中的Ajax实现方法的时候,曾经提到了除了使用Ajax HTML Helper方式来实现之外,Jquery也是实现Ajax的另外一种方案. 通过get方法实现AJax请求 View <script type="text/javascript"> function GetTime() { $.get("Home/GetTime", function (response) { $("#myPnl").html(respo