按分数排序列表并保持分页
sorting lists by score and keeping pagination
我有三个无序列表,其中包含列表项,每个列表项包含从1到10的分数。我有分页,所以页面中有三个相同的ul项。
我需要一个按钮,当点击时,按降序排列列表项(所以从10到1)。
的HTML是:
<ul class="pagination">
<li class="first active">1</li>
<li class="second">2</li>
<li class="third">3</li>
</ul>
<ul class="sort">
<li class="sortEm">sort by score</li>
</ul>
<div class="block" style="display:block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">10</div>
</li>
<li class="one_review">score:
<div class="score">7</div>
</li>
<li class="one_review">score:
<div class="score">9</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
</ul>
</div>
<div class="block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">1</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">3</div>
</li>
<li class="one_review">score:
<div class="score">7</div>
</li>
<li class="one_review">score:
<div class="score">9</div>
</li>
</ul>
</div>
<div class="block">
<ul class="reviews_list">
<li class="one_review">score:
<div class="score">10</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">2</div>
</li>
<li class="one_review">score:
<div class="score">1</div>
</li>
<li class="one_review">score:
<div class="score">5</div>
</li>
</ul>
</div>
, js是
$(".pagination li").click(function () {
$(this).toggleClass("active").siblings().removeClass("active");
$(".block").hide();
$(".block").eq($(this).index()).show()
});
$(".sortEm").click(function () {
function sortEm(a, b) {
return parseInt($(".score", a).text()) < parseInt($(".score", b).text()) ? 1 : -1;
}
$("li.one_review").sort(sortEm).prependTo($(".reviews_list"));
});
的问题是,使用这个函数,当我点击按钮,我失去了分页。这里有一个小提琴:http://jsfiddle.net/3ed03xy9/2/
我如何写javascript,以使它从块移动到块的li项,保持分页和显示它们从10到1?我不是js专家,所以这是我不知道如何做的事情。我走了这么远有人能帮忙吗?非常感谢:)
您可以将插入排序列表的代码更改为
//store sorted list in variable so we can iterate over it and divide it
//this list combine all '.one_review' (li)s in the 3 reviews_list (ul)s
var sortedList = $("li.one_review").sort(sortEm);
// i iteration variable to let us know where we are in sortedList iteration
// we will increase it every iteration throgh sortedList elements
var i = 0;
// j iteration variable to point to Nth of ul.reviews_list (we have 3 ul.reviews_list)
// we will increase it when i=0, i=5 and i=10
var j = -1;
// the number of items per page (here the sortedList length is 15 and we wanna dived it to 3 pages )
// 15/3 = 5 then round it
var itemsPerPage = Math.round(sortedList.length / 3);
// iterate over each item in sortedList array
// https://api.jquery.com/each/
sortedList.each(function(){
//if reminder of Nth of element / itemsPerPage equal zero that mean
//we need to move to next ul.reviews_list empty it.
if( i % itemsPerPage == 0 ){
//move to next ul.reviews_list
// we will enter here 3 times:
// in first iteration when i=0 then 0%5 = 0 then j will be 0
// in 6th iteration when i=5 then 5%5 = 0 then j will be 1
// in 11th iteration when i=10 then 10%5 = 0 then j will be 2
++j;
// empty current ul.reviews_list
// see : https://api.jquery.com/eq-selector/
// see : http://api.jquery.com/html/
$('.reviews_list:eq('+j+')').html("");
}
// append current li.one_review(this) to current ul.reviews_list (:eq(j))
$('.reviews_list:eq('+j+')').append(this);
++i;
});
http://jsfiddle.net/3ed03xy9/5/相关文章:
- 如何使用skip参数使用angular ui引导进行服务器端分页
- 如何通过引用var Using DataTables来进行分页或排序
- 使用CSS或JavaScript计算分页符的数量
- DataTables-创建自定义分页样式(加载更多样式)
- 使用ajax的服务器端分页&jQuery
- 列表的分页
- 如何在 PHP 中使用 OnChange 事件的下拉列表中选择一个选项后,对大量数据行设置分页
- 使用ng repeat对列表进行分页
- 将 Backbone.Collection 用于分页列表
- JQuery Mobile使用Listomatic插件对列表视图进行分页
- 页面加载时显示完整列表的分页
- 为什么我以前的按钮不包含控制器的参数?分页列表 MVC
- 在列表视图窗口 8 中进行分页
- 剑道移动列表视图不分页
- 选择列表项分页内的默认选项卡
- 列表视图分页:滚动到顶部
- 通过JS在Django模板中遍历对象的分页列表
- jquery中分页列表的实时搜索
- 分页对象的连接列表
- 按分数排序列表并保持分页