使用JavaScript创建我的分页
把下面的方法放到一个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创建我的分页的更多相关文章
- 用html5的canvas和JavaScript创建一个绘图程序
本文将引导你使用canvas和JavaScript创建一个简单的绘图程序. 创建canvas元素 首先准备容器Canvas元素,接下来所有的事情都会在JavaScript里面. <canvas ...
- 使用 Canvas 和 JavaScript 创建逼真的下雨效果
HTML5 规范引进了很多新特性,其中最令人期待的之一就是 Canvas 元素,HTML5 Canvas 提供了通过 JavaScript 绘制图形的方法,非常强大.这里向大家展示一个使用 Canva ...
- javascript创建类的6种方式
javascript创建类的7种方式 一 使用字面量创建 1.1 示例 var obj={}; 1.2 使用场景 比较适用于临时构建一个对象,且不关注该对象的类型,只用于临时封装一次数据,且不适合代码 ...
- Javascript创建类和对象
现总结一下Javascript创建类和对象的几种方法: 1.原始的创建方法: <script type="text/javascript"> var person = ...
- JavaScript 创建一个 form 表单并提交
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- javascript创建css、js,onload触发callback兼容主流浏览器的实现
http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...
- Scrollanim – CSS3 & JavaScript 创建滚动动画
Scrollanim 是结合 CSS3 和 JavaScript 来创建令人惊叹的滚动动画的开源库. Scrolanim 支持在页面上的所有可用的元素的位置.有很多的自定义参数可以配置使用,构建出精彩 ...
- javascript创建节点的事件绑定
javascript创建节点的事件绑定 timeupdate事件是<video>中用来返回视频播放进度的事件,绑定在<video>标签返回视频播放位置(每秒计). 现video ...
- JavaScript 创建动态表格
JavaScript 创建动态表格 版权声明:未经授权,严禁转载! 案例代码 <div id="data"></div> <script> va ...
随机推荐
- Linux常用命令_(基本命令)
基本命令:ls.cd.pwd.man 1.ls 打印当前目录下的文件和目录文件 用法详解:: ls [-alFR] [文件或目录] -a 显示所有文件,包括隐藏文件:[root@qmfsun]#ls ...
- protected(C# 参考)
protected 关键字是一个成员访问修饰符.受保护成员在它的类中可访问并且可由派生类访问.有关 protected 与其他访问修饰符的比较,请参见可访问性级别. 仅当访问通过派生类类型发生时,基类 ...
- ural 1242. Werewolf
1242. Werewolf Time limit: 1.0 secondMemory limit: 64 MB Knife. Moonlit night. Rotten stump with a ...
- BZOJ1525 : [POI2006]Zos
由于k很小,所以随机一组解的正确率有90%以上. 每次随机选取一个没被删除的点,然后将与其相邻的点都删去即可. #include<cstdio> #include<cstdlib&g ...
- Codeforces 55D (数位DP+离散化+数论)
题目链接: http://poj.org/problem?id=2117 题目大意:统计一个范围内数的个数,要求该数能被各位上的数整除.范围2^64. 解题思路: 一开始SB地开了10维数组记录情况. ...
- CSS3选择器(二)之属性选择器
CSS3选择器的第二部分——属性选择器.. 属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式 使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同 ...
- java+easyui实例
1.首先引入easyui包 在jsp页面上引用以下文件: <link rel="stylesheet" type="text/css" href=&quo ...
- Odoo Entypo Regular Icon List
参考地址: http://www.fontslog.com/entypo-regular-otf-33800.htm#custompreview 或 http://www.w3cplus.com/w3 ...
- Struts2 实战(一)
环境: Ubuntu 14.04 LTS 64位 开发工具的准备 我选择 Eclipse, 而没有选择MyEclipse, 一是因为免费,不想去弄破解,二是不想太傻瓜化的东西(注:本人并没有用过MyE ...
- POJ 1185 炮兵阵地(状压DP)
炮兵阵地 Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26426 Accepted: 10185 Descriptio ...