infusion
commented
10 years ago Hmm..can you again provide some more code? I used the example code from #7 and used the format specification from here. Unfortunately, I can't reproduce your problem.
Open madhat2r opened 10 years ago
infusion
commented
10 years ago Hmm..can you again provide some more code? I used the example code from #7 and used the format specification from here. Unfortunately, I can't reproduce your problem.
madhat2r
commented
10 years ago Put this in an html file, point the paging JS to a correct path, then select page 4.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="jquery.paging.js"></script>
<link href="paging.grey.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="searchPagination" class="pagination"></div>
<SCRIPT LANGUAGE="JavaScript" type="text/javascript">
$().ready(function(){
setPagination(120,10,1);
})
function setPagination(items,perPage,currentPage){
$(".pagination").paging(items, {
format: "< (qq -) ncnnnnnn (- pp) >",
perpage: perPage,
lapping: 0,
page: currentPage,
onSelect: function(page) {
loadPage(page);
$(window).scrollTop(270)
},
onFormat: function(type) {
switch (type) {
case 'block':
if (!this.active) return '<span class="disabled">' + this.value + '</span>';
else if (this.value != this.page)
return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
return '<span class="current">' + this.value + '</span>';
case 'next':
if (this.active) return '<a href="#' + this.value + '" class="next">Next ></a>';
return '<span class="disabled">Next ></span>';
case 'prev':
if (this.active) return '<a href="#' + this.value + '" class="prev">< Prev</a>';
return '<span class="disabled">< Prev</span>';
case 'first':
if (this.active) return '<a href="#' + this.value + '" class="first"><< First</a>';
return '';
case 'last':
if (this.active) return '<a href="#' + this.value + '" class="last">>|</a>';
return '<span class="disabled">>|</span>';
case "leap":
if (this.active) return "..."
return "";
case 'fill':
if (this.active) return "<span>...</span>"
return "";
case 'left':
case 'right':
if (!this.active) return '';
return '<a href="#' + this.value + '">' + this.value + '</a>';
}
}
})
}
</script>
</body>
</html>
Ah, I now understand your problem. It's a misunderstanding of the brackets of the format directive. When you put the dash (-) into the brackets, it will be "active" as long as there are active pp/qq (right/left) elements in the group. If you don't want the filling points, use a format like "< (qq ) ncnnnnnn ( pp) >". You can, of course, ignore the "active" attribute and use an own measurement. Do you want to remove it completely or just hide it in certain cases?
madhat2r
commented
10 years ago Ideally you want it in the group as to stop it's display when there is no intervening pages in the contiguous order. But you don't want it to display (as-is now) when there should not be intervening pages. i.e. between < 1 2 ... 3 4 etc.. and also when at the end 10 ... 11 12 >. Obviously the calculation for it's active state should take into account the number of "lefts" and "rights" minus the fill(s) that way it can look like this: (note: [ ] = selected page) < 1 2 3 [4] 5 6 7 8 9 10 11 12 > and then < 1 2 ... 4 [5] 6 7 8 9 10 11 12 >
if you add an extra item to the items in the code given it will increase it to 13 pages and you can examine the inconsistencies of the ending a little easier as well.
When rendering the pager using the following format with 120 items and 10 per page.
When you select to page four, the fill is displayed when it should not be:
The same is also true in the ending block as in above picture. The "..." should not show up in either place. I am guessing this is a miscalculation in the code that determines if a group is visible (active).