Comments (4)
infusion
commented on June 15, 2024
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.
from jquery-paging.
madhat2r
commented on June 15, 2024
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>from jquery-paging.
infusion
commented on June 15, 2024
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?
from jquery-paging.
madhat2r
commented on June 15, 2024
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.
from jquery-paging.
Related Issues (20)
- Avoiding a Circular Dependency HOT 1
- Unnecessary fill element HOT 2
- How to find the paging element from onSelect? HOT 2
- Not working when less than 5 pages HOT 3
- onSelect is fired on init and when the count is changed HOT 9
- Example with Socket.io HOT 5
- Current page changes before data is updated HOT 1
- FEATURE: Option for enabling circular navigation needed HOT 6
- License HOT 1
- Logarithmic Pagination
- Slicing without hashchange HOT 4
- Scroll to top of list on pagination click HOT 1
- How to identify the current page HOT 2
- P and q in format option HOT 12
- Active state of first/last buttons is confusing HOT 5
- Comment in the JS files point to incorrect project HOT 3
- I can not open the examples and documentation site HOT 1
- qq and pp showing as "undefined" HOT 5
- Examples with qq/pp on demo pages doesn't work HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-paging.