我正在尝试使用jpage(http://luis-almeida.github.io/jPages/js/jPages.js(为我的网页进行分页。我喜欢在元素进行分页之前对其进行排序。
我使用"时间戳"对顺序、23, 22, 21, 20.....等进行排序。
但是我当前的代码仅重新排列同一页面中的项目。 示例：
- 页 1 ：
32, 23, 21, 20.... - 第 2 页：
45, 21, 19, 16....
等等。
如何让它在分页之前对顺序进行排序，这样我就可以得到以下结果：
- 页 1 ：
45, 32, 23, 21, 21.... - 第 2 页：
20, 19, 16....
https://jsfiddle.net/salyyy/zvyhbd8t/15/
<div id="itemContainer">
<li class="col-xs-6 col-sm-6 col-md-4" timestamp="3">
this is test1
</li>
<li class="col-xs-6 col-sm-6 col-md-4" timestamp="38">
this is test2
</li>
<li class="col-xs-6 col-sm-6 col-md-4" timestamp="11">
this is test3
</li>
....
</div>
<div class="holder"></div>
$(document).on('ready', function() {
/* initiate plugin */
$("div.holder").jPages({
containerID: "itemContainer",
minHeight: false,
perPage:12,
callback : function( pages, items ){
$("#itemContainer").each(function(){
$(this).find('li').sort(function(a, b) {
var count = 0;
// convert to integers from strings
a = parseInt($(a).attr("timestamp"), 10);
b = parseInt($(b).attr("timestamp"), 10);
count += 2;
// compare
if(a < b) {
return 1;
} else if(a > b) {
return -1;
} else {
return 0;
}
}).appendTo(this);
});
}
});
});
回调函数在分页后执行，因此您需要在分页之前排序并更新 DOM，
$("#itemContainer").html(
$("#itemContainer").children("li").sort(function (a, b) {
a = parseInt($(a).attr("timestamp"), 10);
b = parseInt($(b).attr("timestamp"), 10);
return b - a
});
);
然后应用分页，
$("div.holder").jPages({
containerID: "itemContainer",
minHeight: false,
perPage:12
});
小提琴：https://jsfiddle.net/u1b08nr7/