兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src + #1p=1 ajax bugfix Oct 26, 2016
.gitattributes 基本完成,测试通过 Sep 10, 2016
.gitignore
LICENSE
README.md

README.md

GB-paging


简介

兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。

使用

Browser

<link rel="stylesheet" href="css/GB-paging.css">
<script src="js/GB-paging.js"></script>

普通分页

HTML

<div id="gbpaging" class="gb-paging">

JS

gbPaging({
    total: 101,
    paramName: 'p',
    curPage: getPage('p', '#'),
    size: 5,
    prevText: '<',
    nextText: '>',
    pageInfo: '<b>{{currentPage}}</b>/<b>{{totalPages}}</b>',
    eventType: 'click'
});

同页面另一个分页

HTML

<div id="paging1" class="gb-paging"></div>

JS

gbPaging({
	eleId: 'paging1',
    total: 54,
    size: 10,
    prevText: false,
    nextText: false,
    paramName: 'p1',
    curPage: getPage('p1', '#'),
    pageInfo: false,
    eventType: 'click'
});

刷新带参数

HTML

<div id="paging2"  class="gb-paging"></div>

JS

gbPaging({
    eleId: 'paging2',
    total: 2500,
    paramName: 'page',
    curPage: getPage('page', '?type=1&name=2&'),
    goUrl: '?type=1&name=2&{{n}}'
});

辅助函数

function getPage(pname, other){
    var page = window.location.search.replace( other + pname + '=', '') || 1;
    return parseInt(page);
}

选项

  • eleId 分页容器,仅支持ID,默认为: 'gbpaging'
  • total: 总记录数
  • paramName: 分页参数名 || 'p'
  • curPage: 当前页码
  • size: 每页记录数 || 10
  • prevText: 上一页文案 || '上一页',值为 false 不显示
  • nextText: '下一页文案 || '下一页' 值为 false 不显示
  • pageInfo: 分页信息,{{currentPage}}当前页码,{{totalPages}}总页数 || 当前第{{currentPage}}页/共{{totalPages}}页,值为 false 不显示
  • eventType: 事件方式,'click' || 'link'
  • goUrl: 链接URL,'?type=1&name=2&{{n}}' || '',{{n}}为分页参数名+值,如:'p=1'

感谢他们

演示网页排版来自: https://github.com/sofish/typo.css

License

MIT © 2016 givebest