Semantic UI Pagination
sematic ui pagination)
http://semantic-ui.com/collections/menu.html
ajax pagination javascript
<div class="ui borderless pagination menu">
<a class="item">
<i class="left arrow icon"></i> Previous </a>
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
<a class="item">5</a>
<a class="item">6</a>
<a class="item">
Next <i class="icon right arrow"></i>
</a></div>
http://semantic-ui.com/collections/menu.html
ajax pagination javascript
function Pagination(obj) {
this.id = obj.id; //div id
this.url = obj.url;
this.pageSize = obj.pageSize;
this.pageNum = 1; //current page number
this.total = 0; //total count
this.totalPage = 0;
this.barSize = obj.barSize; //
this.numPoint=1;
this.data = obj.data;
this.success = obj.success;
this.error = obj.error;
this.div = null;
this.init();
}
Pagination.prototype.init = function () {
if (this.data == undefined) {
this.data = {}
}
this.div = $('#' + this.id);
this.fetchData(1);
};
Pagination.prototype.fetchData = function (pageNum) {
this.data.pageNum = pageNum;
this.data.pageSize = this.pageSize;
var that = this;
$.ajax({
url: that.url,
data: that.data,
type: 'post',
dataType: 'json',
success: function (data) {
if(data.total==undefined) {
that.success(data.rows);
return;
}
that.total = data.total;
var tmp = that.total % that.pageSize;
var num = Math.floor(that.total / that.pageSize);
that.totalPage = tmp == 0 ? num : num + 1;
that.showUI();
that.success(data.rows);
},
error: function (msg) {
that.error(msg);
}
})
};
Pagination.prototype.showUI = function () {
var that = this;
this.div.empty();
var currentBarSize=this.totalPage-(this.numPoint-1)*this.barSize;
currentBarSize = currentBarSize > this.barSize ? this.barSize : currentBarSize;
this.div.append('<a class="item"><i class="left arrow icon"></i> </a>');
for (var i = 0; i < currentBarSize; i++) {
this.div.append('<a class="item">' + (this.pageNum+i) + '</a>');
}
this.div.append('<a class="item"> <i class="icon right arrow"></i></a>');
var array = this.div.find('a');
for (var j = 0; j < array.length; j++) {
var current = $(array[j]);
if (j == 0) {
current.click({param: that}, that.previewPage);
} else if (j == array.length - 1) {
current.click({param: that}, that.nextPage)
} else {
current.click({param: that}, function (event) {
var p = event.data.param;
var n = $(this).text().trim();
p.fetchData(parseInt(n));
})
}
}
};
Pagination.prototype.nextPage = function (event) {
var that = event.data.param;
if (that.numPoint > 1) {
that.div.find('a').first().attr('class', 'item');
}
if (that.numPoint >= Math.ceil(that.totalPage/that.barSize)) {
that.div.find('a').last().attr('class', 'disabled item');
} else {
that.pageNum=that.numPoint*that.barSize+1;
that.numPoint++;
that.showUI();
}
};
Pagination.prototype.previewPage = function (event) {
var that = event.data.param;
if (that.numPoint <Math.ceil(that.totalPage/that.barSize)) {
that.div.find('a').last().attr('class', 'item');
}
if (that.numPoint == 1) {
that.div.find('a').first().attr('class', 'disabled item');
} else {
that.numPoint--;
that.pageNum=(that.numPoint-1)*that.barSize+1;
that.showUI();
}
};
例new Pagination({
id: "pagination",
url: "<c:url value="/image/showImage"/>",
pageSize: 5, //
barSize: 5,//
data: {panoId: '201501055A_1353497', model: 'sphere', level: 'F'},
success: function (rows) { //
console.log(rows);
},
error: function (msg) {//
console.log(msg);
}
})
サービスから返されるデータフォーマット:{"total":33,"rows":[{},{}....]}