分页功能

1.项目中使用的分页

html:

<div class="pagess clearfix"></div>
css:

.pagess {
margin: 20px auto;
text-align: center;
}

.clearfix {
zoom: 1;
}

.pagess a {
display: inline-block;
height: 28px;
border: 1px solid #e7e7e7;
margin-left: 5px;
line-height: 30px;
font-size: 14px;
padding: 0 10px;
}

.pagess .adisabled {
display: inline-block;
height: 28px;
border: 1px solid #e7e7e7;
line-height: 30px;
font-size: 14px;
margin-left: 5px;
cursor: pointer;
background: #ccc;
padding: 0 10px;
}

.pagess span {
height: 28px;
border: 1px solid #e7e7e7;
font-size: 14px;
padding: 0 10px;
}

.pagess .current {
background: #FFD600;
}
.pagess a {
display: inline-block;
height: 28px;
border: 1px solid #e7e7e7;
margin-left: 5px;
line-height: 30px;
font-size: 14px;
padding: 0 10px;
}

js:

/**
* 分页相关-通用方法库
*/
//获取分页html
function getPageHtml(params) {

//当前url
var currUrl = window.location.href;

//参数验证
pageNum = params.pageNum > 0 ? parseInt(params.pageNum) : 1;
pageSize = params.pageSize > 0 ? parseInt(params.pageSize) : 20;
totalNum = params.totalNum > 0 ? parseInt(params.totalNum) : 20;
showNum = params.showNum > 0 ? parseInt(params.showNum) : 8;
currClass = params.currClass != '' ? params.currClass : 'current';
showTotal = params.showTotal ? true : false;
pageName = params.pageName ? params.pageName : 'page';

//只有一页 返回空
if (totalNum <= pageSize || pageSize <= 0) {
return '';
}

//计算总页数
var pageTotal = Math.ceil(totalNum / pageSize);

//当前页大于总页数,返回第一页
if (pageNum > pageTotal) {
pageNum = 1;
}

var firstNav = '';
var lastNav = '';
if (params.showFirstLast) {
var firstNav = _getPageUnit(1, "首页", currUrl, '', pageName);
var lastNav = _getPageUnit(pageTotal, "尾页", currUrl, '', pageName);
}

var prevNav = '';
var nextNav = '';
if (pageNum > 1) {
prevNav = _getPageUnit((pageNum > 1 ? pageNum - 1 : 1), "上一页", currUrl, '', pageName);
} else {
prevNav = '<span class="adisabled " paged="上一页">上一页 </span>';
}
if (pageNum < pageTotal) {
nextNav = _getPageUnit((pageNum < pageTotal ? pageNum + 1 : pageTotal), "下一页", currUrl, '', pageName);
} else {
nextNav = '<span class="adisabled" paged="下一页">下一页 </span>';
}

var midPageNum = Math.floor(showNum / 2);
var startPage = Math.max.apply(null, [Math.min.apply(null, [pageNum - midPageNum, pageTotal - showNum + 1]), 1]);
var endPage = Math.min.apply(null, [Math.max.apply(null, [pageNum + midPageNum, showNum]), pageTotal]);

var amongNav = '';
var navCss = '';
for (i = startPage; i <= endPage; i++) {
navCss = (i == pageNum) ? ' class="' + currClass + '"' : '';
amongNav += _getPageUnit(i, i, currUrl, navCss, pageName);
}

var totalNav = '';
if (showTotal) {
totalNav = '<span class="page-all">共' + totalNum + '条</span>';
}

return '<div class="clearfix M_pages M_pages1">'
+ firstNav + prevNav + amongNav + nextNav + lastNav + totalNav
+ '</div>';
}

//分页单元链接html
function _getPageUnit(currPageNum, txt, currUrl, navCss, pageName) {

var navCss = navCss ? navCss : '';

//替换url某个参数值
var pattern = pageName + '=([^&]*)';
var replaceTxt = pageName + '=' + currPageNum;
var _navUrl = '';
if (currUrl.match(pattern)) {
var tmp = '/(' + pageName + '=)([^&]*)/gi';
_navUrl = currUrl.replace(eval(tmp), replaceTxt);
} else {
if (currUrl.match('[?]')) {
_navUrl = currUrl + '&' + replaceTxt;
} else {
_navUrl = currUrl + '?' + replaceTxt;
}
}

return "<a href='" + _navUrl + "' target='_self' " + navCss + ">" + txt + " </a >";
}

//获取分页跳转url
function _getJumpPageUrl(currUrl, currPageNum) {

return changeUrlArg(currUrl, 'page', currPageNum);
}

/**
* url相关-通用方法库
*/

//获取url参数
function getUrlParam(name) {
//构造一个含有目标参数的正则表达式对象
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
//匹配目标参数
var r = window.location.search.substr(1).match(reg);
//返回参数值
if (r != null) {
return unescape(r[2]);
}
return null;
}

//替换url某个参数值
function changeUrlArg(url,arg,arg_val) {

if (url == '') {
url = window.location.href;
}

var pattern=arg+'=([^&]*)';
var replaceText=arg+'='+arg_val;

if(url.match(pattern)) {
var tmp='/('+ arg+'=)([^&]*)/gi';
tmp=url.replace(eval(tmp),replaceText);
return tmp;
} else {
if(url.match('[?]')) {
return url+'&'+replaceText;
} else {
return url+'?'+replaceText;
}
}

// return url+' '+arg+' '+arg_val;
}

//解析url
function parseUrl(url) {
if (url == '') {
url = window.location.href;
} else {
var a = document.createElement('a');
a.href = url;
}

return {
source: url,
protocol: a.protocol.replace(':',''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function(){
var ret = {},
seg = a.search.replace(/^?/,'').split('&'),
lengthen = seg.length, i = 0, s;
for (;i<len;i++) {
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(//([^/?#]+)$/i) || [,''])[1],
hash: a.hash.replace('#',''),
path: a.pathname.replace(/^([^/])/,'/$1'),
relative: (a.href.match(/tps?://[^/]+(.+)/) || [,''])[1],
segments: a.pathname.replace(/^//,'').split('/')
};
}

// 获取当前日期的前几天的日期
function getBeforeDate(n) {
var n = n;
var d = new Date();
var year = d.getFullYear();
var mon=d.getMonth()+1;
var day=d.getDate();
if(day <= n){
if(mon>1) {
mon=mon-1;
}
else {
year = year-1;
mon = 12;
}
}
d.setDate(d.getDate()-n);
year = d.getFullYear();
mon=d.getMonth()+1;
day=d.getDate();
s = year+"-"+(mon<10?('0'+mon):mon)+"-"+(day<10?('0'+day):day);
return s;
}

当然,也可以自己引用jquery.page.js插件。




原文地址:https://www.cnblogs.com/cina33blogs/p/6737987.html