MVC - 20.前台ajax分页
1.用pager方法，输入参数，会返回一个导航条的html字符串。方法的内部比较简单。
ajax-pager.js
/**
* pageSize, 每页显示数
* pageIndex, 当前页数
* pageCount 总页数
* url 连接地址
* pager(10, 1, 5, 'Index')使用方法示例
*/
function pager(pageSize, pageIndex, pageCount, url) {
var intPage = 5; //数字显示
var intBeginPage = 0;//开始的页数
var intEndPage = 0;//结束的页数
var intCrossPage = parseInt(intPage / 2); //显示的数字 var strPage = "<div class='fr'><span class='pageinfo'>第 <font color='#FF0000'>" + pageIndex + "/" + pageCount + "</font> 页 每页 <font color='#FF0000'>" + pageSize + "</font> 条</span>"; if (pageIndex > 1) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=1&pageSize=" + pageSize + "'><span>首页</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex - 1) + "&pageSize=" + pageSize + "'><span>上一页</span></a> ";
}
if (pageCount > intPage) {//总页数大于在页面显示的页数 if (pageIndex > pageCount - intCrossPage) {//当前页数>总页数-3
intBeginPage = pageCount - intPage + 1;
intEndPage = pageCount;
}
else {
if (pageIndex <= intPage - intCrossPage) {
intBeginPage = 1;
intEndPage = intPage;
}
else {
intBeginPage = pageIndex - intCrossPage;
intEndPage = pageIndex + intCrossPage;
}
}
} else {
intBeginPage = 1;
intEndPage = pageCount;
} if (pageCount > 0) {
for (var i = intBeginPage; i <= intEndPage; i++) {
{
if (i == pageIndex) {//当前页
strPage = strPage + " <a class='current' href='javascript:void(0);'>" + i + "</a> ";
}
else {
strPage = strPage + " <a class='pageNav' href='" + url + "?pageIndex=" + i + "&pageSize=" + pageSize + "' title='第" + i + "页'>" + i + "</a> ";
}
}
}
} if (pageIndex < pageCount) {
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize + "'><span>下一页</span></a> ";
strPage = strPage + "<a class='pageNav' href='" + url + "?pageIndex=" + pageCount + "&pageSize=" + pageSize + "'><span>尾页</span></a> ";
}
return strPage+"</div>"; }
activity.cshtml
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Script/ajax-pager.js"></script>
<script src="Script/jquery-1.8.0.js"></script>
<script type="text/javascript">
$(function () {
loadData(1, 10); //分页条点击事件
$(document.body).on('click', '.pageNav', function () {
var pageSize = Number(getQueryString('pageSize', $(this).attr('href')));
var pageIndex = Number(getQueryString('pageIndex', $(this).attr('href')));
loadData(pageIndex, pageSize);
return false;//不跳转页面
});
}); //加载数据
function loadData(pageIndex, pageSize) {
$.getJSON('Content/CustomersData.txt', { pageIndex: pageIndex, pageSize: pageSize }, function (data) {
var beginIndex = (pageIndex - 1) * pageSize;
var endIndex = pageIndex * pageSize - 1;
var tbodyHtml = '';
for (var i = beginIndex; i < endIndex; i++) {
if (!data.Rows[i]) {
break;
}
var tbody = '<tr><td>{0}</td><td>{1}</td><td>{2}</td><td>{3}</td><td>{4}</td><td>{5}</td>';
tbody += '<td>{6}</td><td>{7}</td><td>{8}</td><td>{9}</td><td>{10}</td></tr>';
tbody = tbody.format(data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].ContactName,
data.Rows[i].ContactTitle, data.Rows[i].Address, data.Rows[i].City,
data.Rows[i].Region ? data.Rows[i].Region : '', data.Rows[i].PostalCode, data.Rows[i].Country,
data.Rows[i].Phone, data.Rows[i].Fax ? data.Rows[i].Fax : '');
tbodyHtml += tbody;
}
$('#tb').find('tbody').first().html(tbodyHtml);
var pageCount = parseInt((data.Total / pageSize)) + (data.Total % pageSize ? 1 : 0);
$('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'CustomersData.txt'));
}
);
} //字符串格式化
String.prototype.format = function (args) {
var result = this;
var reg;
if (arguments.length > 0) {
if (arguments.length == 1 && typeof (args) == "object") {
for (var key in args) {
if (args[key] !== undefined) {
reg = new RegExp("({" + key + "})", "g");
result = result.replace(reg, args[key]);
}
}
} else {
for (var i = 0; i < arguments.length; i++) {
if (arguments[i] !== undefined) {
reg = new RegExp("({)" + i + "(})", "g");
result = result.replace(reg, arguments[i]);
}
}
}
}
return result;
}; //获取url参数
function getQueryString(name, url) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
url = url && url.indexOf('?') >= 0 ? url.substring(url.indexOf('?'), url.length) : window.location.search;
var r = url.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
</script>
</head>
<body>
<table id="tb" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th width="90px;">CustomerID</th>
<th width="240px;">CompanyName</th>
<th width="130px;">ContactName</th>
<th width="140px;">ContactTitle</th>
<th width="205px;">Address</th>
<th width="90px;">City</th>
<th width="50px;">Region</th>
<th width="80px;">PostalCode</th>
<th width="80px;">Country</th>
<th width="95px;">Phone</th>
<th width="95px;">Fax</th>
</tr>
</thead>
<tbody></tbody>
</table>
<div id="dvPager"></div>
</body>
</html>
查看效果
js日期转化
/*格式化时间*/
Date.prototype.format = function (format) {
var o = {
"M+": this.getMonth() + 1, //month
"d+": this.getDate(), //day
"h+": this.getHours(), //hour
"m+": this.getMinutes(), //minute
"s+": this.getSeconds(), //second
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
"S": this.getMilliseconds() //millisecond
}
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
for (var k in o) if (new RegExp("(" + k + ")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length == 1 ? o[k] :
("00" + o[k]).substr(("" + o[k]).length));
return format;
}
//字符串转化为时间
function getDate(strDate) {
if (strDate != null) {
var date = eval('new Date(' + strDate.replace(/\d+(?=-[^-]+$)/,
function (a) { return parseInt(a, 10) - 1; }).match(/\d+/g) + ')');
return date;
} else {
return "";
}
}
//js时间比较(yyyy-mm-dd hh:mi:ss)
function compareDate(strDate1, strDate2) {
var date1 = new Date(strDate1.replace(/\-/g, "\/"));
var date2 = new Date(strDate2.replace(/\-/g, "\/"));
//return date1 - date2;
console.info(date1)
if (date1 > date2) {
return 1;
} else {
return -1;
}
}
//因为firefox与chome不兼容
//firefox设置时间加1天
function DateNextDay(d2) {
//slice返回一个数组
var str = d2.slice(5) + "- " + d2.slice(0, 4);
var d = new Date(str);
var d3 = new Date(d.getFullYear(), d.getMonth() - 1, d.getDate() + 1);
//var month = returnMonth(d3.getMonth());
var month = d3.getMonth();
var day = d3.getDate();
//day = day < 10 ? "0" + day : day;
var str2 = d3.getFullYear() + "年" + month + "月" + day + "日";
return str2;
}
//chome设置时间加1天
function DateNextDayChome(d2) {
//slice返回一个数组
var str = d2.replace("月", "/");
var str1 = str.replace("日", "").substr(5) + "- " + d2.slice(0, 4);
var d = new Date(str1);
var d3 = new Date(d.getFullYear(), d.getMonth() - 1, d.getDate() + 1);
//var month = returnMonth(d3.getMonth());
var month = d3.getMonth();
var day = d3.getDate();
//day = day < 10 ? "0" + day : day;
var str2 = d3.getFullYear() + "年" + month + "月" + day + "月";
return str2;
}
//返回月份
function returnMonth(num) {
var str = " ";
switch (num) {
case 0: str = "01"; break;
case 1: str = "02"; break;
case 2: str = "03"; break;
case 3: str = "04"; break;
case 4: str = "05"; break;
case 5: str = "06"; break;
case 6: str = "07"; break;
case 7: str = "08"; break;
case 8: str = "09"; break;
case 9: str = "10"; break;
case 10: str = "11"; break;
case 11: str = "12"; break;
}
return str;
}
//data.rows[i].BenginTime.getDateByJson("yyyy-MM-dd")
String.prototype.getDateByJson = function (format) {
var jsondate = this.replace("/Date(", "").replace(")/", "");
if (jsondate.indexOf("+") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("+"));
}
else if (jsondate.indexOf("-") > 0) {
jsondate = jsondate.substring(0, jsondate.indexOf("-"));
}
return new Date(parseInt(jsondate, 10)).format(format);
}
参考：http://www.cnblogs.com/xiaoafei1991/p/4246662.html 锋利的js前端分页之jQuery
MVC - 20.前台ajax分页的更多相关文章
- 【spring】spring boot中使用@EnableTransactionManagement 以后，spring mvc接收前台ajax的post方法传过来的参数，使用@RequestBody接收不到参数
在启动类上添加了注解: @EnableTransactionManagement, postMan测试接口,以这种方式传递参数: 测试结果: 接收不到参数 问题解决: 原因:是因为 这个项目中的Con ...
- MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 (支持asp.net mvc)
该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...
- MVC - 11（下）jquery.tmpl.js +ajax分页
继续 mvc-11(上).dto:http://www.cnblogs.com/tangge/p/3840060.html jquery.tmpl.js 下载:http://pan.baidu.com ...
- MVC如何使用开源分页插件shenniu.pager.js
最近比较忙,前期忙公司手机端接口项目,各种开发+调试+发布现在几乎上线无问题了:虽然公司项目忙不过在期间抽空做了两件个人觉得有意义的事情,一者使用aspnetcore开发了个人线上项目(要说线上其实只 ...
- ThinkPHP 整合Bootstrap Ajax分页
ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $wh ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- PHP+jQuery 长文章分页类 ( 支持 url / ajax 分页方式 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8 **** ...
- PHP+jQuery 列表分页类 ( 支持 url 分页 / ajax 分页 )
/* ******* 环境:Apache2.2.8 ( 2.2.17 ) + PHP5.2.6 ( 5.3.3 ) + MySQL5.0.51b ( 5.5.8 ) + jQuery-1.8.3.mi ...
- yii下多条件多表组合查询以及自写ajax分页
多条件组合查询主要用到yii的CDbCriteria,这个类很多oem框架都有,非常好用. 前台表单 前台查询表单效果是这样的,多个条件组,每个组里放多个input,name为数组.当任何一个复选框被 ...
随机推荐
- python文件头的#-*- coding: utf-8 -*- 的作用
这一句其实是告诉编辑器,我的代码使用的格式是utf-8,如果没有这句编辑器就会自动去识别代码的文件格式,如果发现文件格式不是utf-8,就有可能去将编码格式转换为utf-8,比如本来是gbk的,编辑器 ...
- HEOI 2016 游记
闲来无事,把这玩意儿补上. OI生涯中第一次正经的考试.挂的很惨. Day -1 不小心把机油(雾)sm惹毛了. 好像没啥别的事儿. Day 0 说好了上午直接去机房,然而临时说让我们上完前两节课再去 ...
- oracle数据库常用plsql语句
(一)oracle中常用的数据类型 (二)PL-sql基本语法 1.创建数据库表.删除数据库表 create table table1--创建表 ( field1 number(8), field2 ...
- ACM/ICPC 之 递归(POJ2663-完全覆盖+POJ1057(百练2775)-旧式文件结构图)
POJ2663-完全覆盖 题解见首注释 //简单递推-三个米诺牌(3*2)为一个单位打草稿得出规律 //题意-3*n块方格能被1*2的米诺牌以多少种情况完全覆盖 //Memory 132K Time: ...
- percona-toolkit 之 【pt-summary】、【pt-mysql-summary】、【pt-config-diff】、【pt-variable-advisor】说明
摘要: 通过下面的这些命令在接触到新的数据库服务器的时候能更好更快的了解服务器和数据库的状况. 1:pt-summary:查看系统摘要报告 执行: pt-summary 打印出来的信息包括:CPU.内 ...
- CentOS搭建svn服务器支持https访问
在CentOS6.3 64位机器上配置SVN服务器,并设置只允许HTTPS连接,可以配置多个repos源,每个源都拥有自己的组和成员,用于权限控制. 安装相关软件 Apache yum install ...
- 3.saltstack的grains和pillar学习笔记
作者:刘耀 QQ:22102107 SaltStack_Grains Grains grains是minion第一次启动的时候采集的静态数据,可以用在salt的模块和其他组件中.其实grains在每次 ...
- WCF服务跟踪
如果在开发过程中,WCF服务出现问题,我们可以通过服务引用,然后直接断点调试进去.然而,对于已经发布的服务,出现错误时,寻找错误信息会变得麻烦. 幸好,微软提供了服务跟踪查看器工具 (SvcTrace ...
- Mac系统搭建java开发环境
今天尝试在mac下搭建java开发环境 包括 JDK,Tomcat , eclipse ,mysql ,mysqlGUI
- IOS - 控件的AutoresizingMask属性
在 UIView 中有一个autoresizingMask的属性,它对应的是一个枚举的值(如下),属性的意思就是自动调整子控件与父控件中间的位置,宽高. enum { UIViewAutoresi ...