/**
* 依赖jquery，bootstrap3
*/
(function($){
var defaultConfigure = {
total: 0,
current: 1,
pageSize:10,
totalpage:1,
shownumber:8,
pageSizeOption:[10,20,30,40,50]
}
$.fn.extend({
pagination: function(configure,onchange) {
var $this = $(this),
newConfigure = $.extend(true,{},defaultConfigure,configure),
totalpage = newConfigure.total === 0 ? 1 : Math.ceil(newConfigure.total/newConfigure.pageSize),
con = $('<div style="white-space:nowrap; height:32px; line-height: 32px"></div>'),
psoCon = $('<div class="text-multe pull-left"></div>'),
pso_total = $('<div style="display:inline-block;margin-right:15px"></div>'),
pso_select = $('<select style="background-color: white;height:32px"></select>'),
pnCon = $('<div class="text-right"></div>'),
pn_pn = $('<ul class="pagination" style="margin:0;margin-right:5px"></ul>'),
pn_sel = $('<div style="display:inline-block;" class="pull-right"></div>'),
pn_sel_btn = $('<button style="display:inline-block;" class="btn btn-default btn-sm">跳转</button>'),
pn_sel_in = $('<input style="width:40px;display:inline-block" class="form-control input-sm " type="text" placeholder="">');
newConfigure.totalpage = totalpage;
$this.configure = newConfigure;
con.append(psoCon.append(pso_total).append(pso_select));
con.append(pnCon.append(pn_pn).append(pn_sel.append(pn_sel_btn).append($('<span> 至 </span>')).append(pn_sel_in).append($('<span> 页 </span>'))));
$this.append(con);
pn_sel_btn.on('click',function(){
$this.jumpto(parseInt(pn_sel_in.val()))
});
pso_select.on('change',function(e){
var c = $this.configure;
c.pageSize = parseInt(e.target.value);
c.totalpage = Math.ceil(c.total / c.pageSize);
$this.refresh();
if(onchange){
onchange({
totalpage: c.totalpage,
current: c.current,
pageSize: c.pageSize
});
}
});
$this.createDetail = function(){
var c = $this.configure;
pso_total.text('总共'+c.total+'条,'+(c.total === 0 ? 1 : Math.ceil(c.total/c.pageSize))+'页');
for(var i in c.pageSizeOption){
pso_select.append($('<option value=\"'+c.pageSizeOption[i]+'\">'+c.pageSizeOption[i]+'条每页</option>'))
};
}
$this.create_pn_pn_child = function(){
var c = $this.configure;
pn_pn.empty();
var prew = $('<li><a href="#">«</a></li>');
prew.on('click',$this.prew);
pn_pn.append(prew);
var totalpage = c.totalpage;
if(totalpage > c.shownumber){
var start = c.current - Math.floor(c.shownumber/2);
start = (start + c.shownumber - 1) > totalpage ? totalpage - c.shownumber + 1 : start;
start = start <= 0 ? 1 : start;
for(var i=start;i<c.shownumber + start;i++){
var li = $('<li '+(c.current === i ? 'class=\"active\"' : '') +'><a href="#">'+i+'</a></li>');
li.on('click',{value:i},function(e){
$this.jumpto(e.data.value)
});
pn_pn.append(li);
}
}
else{
for(var i=1; i<=totalpage; i++){
var li = $('<li '+(c.current === i ? 'class=\"active\"' : '') +'><a href="#">'+i+'</a></li>');
li.on('click',{value:i},function(e){
$this.jumpto(e.data.value)
});
pn_pn.append(li);
}
}
var next = $('<li><a href="#">»</a></li>');
next.on('click',function(){
$this.next();
});
pn_pn.append(next);
}
$this.createDetail();
$this.create_pn_pn_child();
//跳转至某页
$this.prew = function(){
if($this.configure.current === 1)return;
$this.jumpto($this.configure.current-1)
}
$this.jumpto = function(number){
if(number<1 || number>$this.configure.totalpage)throw new Error('您选择的野马超出范围!');
$this.configure.current = number;
$this.create_pn_pn_child();
if(onchange){
onchange({
totalpage: $this.configure.totalpage,
current: $this.configure.current,
pageSize: $this.configure.pageSize
});
}
}
$this.next = function(){
var c = $this.configure;
var totalpage = c.totalpage;
if(c.current === totalpage)return;
$this.jumpto(c.current+1)
}
$this.refresh = function(configure){
var $nc = configure || {},
newConfigure = $.extend(true,{},$this.configure,$nc),
totalpage = newConfigure.total === 0 ? 1 : Math.ceil(newConfigure.total/newConfigure.pageSize);
newConfigure.totalpage = totalpage;
$this.configure = newConfigure;
var c = $this.configure;
c.current = c.current > c.totalpage ? c.totalpage : c.current;
$this.jumpto(c.current)
}
return $this
}
});
})(jQuery)
使用方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<title>pagination</title>
<link rel="stylesheet" type="text/css" href="/tools/bootstrap-3.3.7/css/bootstrap.min.css" />
</head>
<body>
<div id="p">
</div>
<script type="text/javascript" src="/tools/jquery.min.js"></script>
<script type="text/javascript" src="/tools/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/tools/CGGPagenation.js"></script>
<script type="text/javascript">
var $p = $('#p')
.pagination(
{total: 800,
current: 3,
pageSize:10},
function(pagination){
console.log(pagination)
}
);
window.setTimeout(function(){
$p.refresh(
{total: 100,
current: 3,
pageSize:50}
)
},3000)
</script>
</body>
<html>
