zoukankan      html  css  js  c++  java
  • 分页功能

    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插件。




  • 相关阅读:
    IT开发者对Mac钟爱
    POJ 3486 &amp; HDU 1913 Computers(dp)
    基础排序算法
    LeetCode 70:Climbing Stairs
    Qt自己定义事件实现及子线程向主线程传送事件消息
    maven自己主动编译,解决你每次代码改动须要又一次编译的繁琐
    Unity定制 Image、Text的对象生成
    iOS学习4_UITableView的使用
    GTK+重拾--09 GTK+中的组件(一)
    Architecting Android…The clean way?
  • 原文地址:https://www.cnblogs.com/cina33blogs/p/6737987.html
Copyright © 2011-2022 走看看