把下面的方法放到一个js文件,页面引用他就行了

JavaScript

function PageList(PageSize, PageIndex, TotalCount, ParList) {
$("#Page").html();
var PageSize = parseInt(PageSize);
var PageIndex = parseInt(PageIndex);
var TotalCount = parseInt(TotalCount);
if (TotalCount > 0) {
var top = 0;
var end = 0;
var d = TotalCount / PageSize;
var count = Math.ceil(d);
top = PageIndex - 4;
if (top <= 0) {
top = 1;
}
end = top + 6;
if (end > count) {
end = count;
}
var strUrl = "";
if (parseInt(PageIndex - 1) == 0) {
strUrl += "<li><a class='w55 cur' id='top' style='cursor:default' onclick='' href='javascript:;'><</a></li>";
} else {
strUrl += "<li><a class='w55 cur' id='top' style='cursor:default' onclick='" + ParList + "(" + parseInt(PageIndex - 1) + ")' href='javascript:;'><</a></li>";
}
for (var i = top; i <= end; i++) {
if (i == PageIndex) {
strUrl += "<li class='active'><a href='JavaScript:Void(0)'" + ">" + i + "</a></li>";
}
else {
strUrl += "<li><a href='JavaScript:Void(0)' style='cursor:pointer;' onclick='" + ParList + "(" + i + ")'>" + i + "</a></li>";
}
}
strUrl += "<li><a class='w55 cur' id='end' style='cursor:default' onclick='' href='javascript:;'>></a></li>";
strUrl += "<li><a>共" + TotalCount + "条记录</a></li>";
$("#Page").html(strUrl);
if (PageIndex != 1) {
$("#top").attr("class", "w55")
$("#top").attr("style", "")
}
if (PageIndex != end) {
$("#end").attr("class", "w55")
$("#end").attr("style", "")
$("#end").attr("onclick", "" + ParList + "(" + parseInt(parseInt(PageIndex) + parseInt(1)) + ")");
}
} else {
$("#Page").html("");
}
}

  

PageSize  每页显示多少条

PageIndex 当前的页码

TotalCount 一共有多少条记录

ParList 分页方法

C# MVC中调用这个js方法

PageList("@Model.PageSize", "@Model.PageIndex", "@Model.TotalCount", "ParList")

Ajax

这个ajax方法的名字就是,第四个参数

    function ParList(data) {
$("#Wu").remove();
$.ajax({
url: "/ActivityAndProduct/ActivityList?PageIndex=" + data,
type: "post",
data: {
Name: $("#Name").val(),
type: $("#static option:selected").val()
},
success: function (data) {
$("#divList").html(data);
}
});
}

  

HTML(主视图)

<table class="table table-hover table-bordered" style="margin-top: 20px;">
<tbody id="divList"> </tbody>
</table>
<div style="margin-top: 10px;">
<div style="text-align: center;">
<nav>
<ul class="pagination" id="Page"> </ul>
</nav>
</div>
</div>

  

(部分视图)

@if (Model.Count > 0)
{
<tr>
<th>活动和产品ID</th>
<th>活动和产品名称</th>
<th>创建时间</th>
<th>最后编辑时间</th>
<th>状态</th>
<th>操作</th>
</tr>
foreach (var item in Model.Model)
{
<tr>
<td>@item.ID</td>
<td>@item.Name</td>
<td>@item.CreateTime</td>
<td>@item.EditTime</td>
<td id="@item.ID">
@if (item.Static == 0)
{
<ii>下架</ii>
}
@if (item.Static == 1)
{
<ii>上架</ii>
}
</td>
<td>
<a>编辑</a>
<a>删除</a>
</td>
</tr>
}
<script src="~/Scripts/Page.js"></script>
<script type="text/javascript">
$(function () {
PageList("@Model.PageSize", "@Model.PageIndex", "@Model.TotalCount", "ParList")
})
</script>
}

  

通过Ajax调用后台的方法

后台的方法会返回部分视图

再通过js把返回回来的部分视图替换了

这个分页的方法中

搜索和分页可以都用这个方法

调用第一页就行了

ParList(1);

使用JavaScript创建我的分页的更多相关文章

  1. 用html5的canvas和JavaScript创建一个绘图程序

    本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...

  2. 使用 Canvas 和 JavaScript 创建逼真的下雨效果

    HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...

  3. javascript创建类的6种方式

    javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...

  4. Javascript创建类和对象

    现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...

  5. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  6. javascript创建css、js,onload触发callback兼容主流浏览器的实现

    http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...

  7. Scrollanim – CSS3 & JavaScript 创建滚动动画

    Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...

  8. javascript创建节点的事件绑定

    javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...

  9. JavaScript 创建动态表格

    JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...

随机推荐

  1. Linux常用命令_(基本命令)

    基本命令:ls.cd.pwd.man 1.ls 打印当前目录下的文件和目录文件 用法详解:: ls [-alFR] [文件或目录] -a 显示所有文件,包括隐藏文件:[root@qmfsun]#ls ...

  2. protected(C# 参考)

    protected 关键字是一个成员访问修饰符.受保护成员在它的类中可访问并且可由派生类访问.有关 protected 与其他访问修饰符的比较,请参见可访问性级别. 仅当访问通过派生类类型发生时,基类 ...

  3. ural 1242. Werewolf

    1242. Werewolf Time limit: 1.0 secondMemory limit: 64 MB   Knife. Moonlit night. Rotten stump with a ...

  4. BZOJ1525 : [POI2006]Zos

    由于k很小,所以随机一组解的正确率有90%以上. 每次随机选取一个没被删除的点,然后将与其相邻的点都删去即可. #include<cstdio> #include<cstdlib&g ...

  5. Codeforces 55D (数位DP+离散化+数论)

    题目链接: http://poj.org/problem?id=2117 题目大意:统计一个范围内数的个数,要求该数能被各位上的数整除.范围2^64. 解题思路: 一开始SB地开了10维数组记录情况. ...

  6. CSS3选择器(二)之属性选择器

    CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...

  7. java+easyui实例

    1.首先引入easyui包 在jsp页面上引用以下文件: <link rel="stylesheet" type="text/css" href=&quo ...

  8. Odoo Entypo Regular Icon List

    参考地址: http://www.fontslog.com/entypo-regular-otf-33800.htm#custompreview 或 http://www.w3cplus.com/w3 ...

  9. Struts2 实战(一)

    环境: Ubuntu 14.04 LTS 64位 开发工具的准备 我选择 Eclipse, 而没有选择MyEclipse, 一是因为免费,不想去弄破解,二是不想太傻瓜化的东西(注:本人并没有用过MyE ...

  10. POJ 1185 炮兵阵地(状压DP)

    炮兵阵地 Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26426   Accepted: 10185 Descriptio ...