Hy I have following tutorial pagination jquery system
This my code :
$(document).ready(function() {
var show_per_page = 1;
var number_of_items = $('#list').children('li').size();
var number_of_pages = Math.ceil(number_of_items / show_per_page);
$('body').append('<div class=controls></div><input id=current_page type=hidden><input id=show_per_page type=hidden>');
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
var navigation_html = '<a class="prev" onclick="previous()">Prev</a>';
var current_link = 0;
while (number_of_pages > current_link) {
navigation_html += '<a class="page" onclick="go_to_page(' + current_link + ')" longdesc="' + current_link + '">' + (current_link + 1) + '</a>';
current_link++;
}
navigation_html += '<a class="next" onclick="next()">Next</a>';
$('.controls').html(navigation_html);
$('.controls .page:first').addClass('active');
$('#list').children().css('display', 'none');
$('#list').children().slice(0, show_per_page).css('display', 'block');
});
function go_to_page(page_num) {
var show_per_page = parseInt($('#show_per_page').val(), 0);
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#list').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page[longdesc=' + page_num + ']').addClass('active').siblings('.active').removeClass('active');
$('#current_page').val(page_num);
}
function previous() {
new_page = parseInt($('#current_page').val(), 0) - 1;
//if there is an item before the current active link run the function
if ($('.active').prev('.page').length == true) {
go_to_page(new_page);
}
}
function next() {
new_page = parseInt($('#current_page').val(), 0) + 1;
//if there is an item after the current active link run the function
if ($('.active').next('.page').length == true) {
go_to_page(new_page);
}
}
.controls a{
padding:3px;
border:1px solid gray;
margin:2px;
color:black;
text-decoration:none
}
.active{
background:darkblue;
color:white !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<ul id=list>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
</ul>
My quetion is how display just 4 number in pagination, for example :
I have 10 datashow_per_page = 1;display number in pagination 1,2,3,4 next and if I'm click next display number 5,6,7,8 next, prev 9,10
Thanks
Related
I'm using this jsfiddle code and trying to change to following requirements.
Change the "prev" and "next" button to pagination (e.g. 1 2 3 4 and so on)
Show the "Category 1" content on first page instead of show all contents
This is the code I have changed to pagination but I'm not sure how to combine it with the filtering function. And also not sure how to show the "Category 1" content on first page. Hoping that some of you could provide me with some advice. Thanks!
Please take note on the filtering function.
var visible = "";
$('div.filter').delegate('a', 'click', function (event) {
visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
//$('ul.items li').hide().filter(visible).show();
pagination();
event.preventDefault();
});
pageSize = 5;
var i = 1;
showPage = function(page) {
$("li").hide();
$("li").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(i);
function pagination(action) {
var pages = Math.ceil($('li').length / pageSize)
for (var i = 0; i<pages; i++) {
$('#pager').append(''+(i+1)+' ');
}
$('.pageClick').on('click', function(e) {
e.preventDefault();
showPage($(this).index()+1);
});
}
pagination();
ul{list-style: none;}
#item-wrapper {
width:250px;
margin:30px 0 0 30px;
}
.items li {
font-family:arial;
font-size:13px;
background-color:#ccc;
margin-bottom:1px;
padding:5px;
}
.ctrl-nav {
background-color:#999;
padding:5px;
overflow:hidden;
}
.ctrl-nav a {
font-family:arial;
font-size:13px;
padding:5px 10px;
color:#fff;
}
.ctrl-nav a#prev{
float:left;
}
.ctrl-nav a#next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
category 1
category 2
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">item 7</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div id="pager"></div>
</div>
you can hide all the li first and then show $(visible). Also in your pagination function just add $('#pager').html("") at start so that you don't repeat numbers.
not sure what you are trying to do but you might want to change your pagination logic for categories.
var visible = "";
var liToShow = $('li');
$('div.filter').delegate('a', 'click', function (event) {
visible = '.' + this.href.slice(this.href.indexOf("#") + 1);
$('ul.items li').hide();
$(visible).show();
liToShow = $(visible);
pagination();
event.preventDefault();
});
pageSize = 5;
var i = 1;
showPage = function(page) {
$("li").hide();
$("li").each(function(n) {
if (n >= pageSize * (page - 1) && n < pageSize * page)
$(this).show();
});
}
showPage(i);
function pagination(action) {
var pages = Math.ceil(liToShow.length / pageSize);
$('#pager').html("");
for (var i = 0; i<pages; i++) {
$('#pager').append(''+(i+1)+' ');
}
$('.pageClick').on('click', function(e) {
e.preventDefault();
showPage($(this).index()+1);
});
}
pagination();
ul{list-style: none;}
#item-wrapper {
width:250px;
margin:30px 0 0 30px;
}
.items li {
font-family:arial;
font-size:13px;
background-color:#ccc;
margin-bottom:1px;
padding:5px;
}
.ctrl-nav {
background-color:#999;
padding:5px;
overflow:hidden;
}
.ctrl-nav a {
font-family:arial;
font-size:13px;
padding:5px 10px;
color:#fff;
}
.ctrl-nav a#prev{
float:left;
}
.ctrl-nav a#next{
float:right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="filter">
category 1
category 2
</div>
<div id="item-wrapper">
<ul class="items">
<li class="category-1">item 1</li>
<li class="category-1">item 2</li>
<li class="category-1">item 3</li>
<li class="category-1">item 4</li>
<li class="category-1">item 5</li>
<li class="category-1">item 6</li>
<li class="category-2">item 7</li>
<li class="category-2">item 8</li>
<li class="category-2">item 9</li>
<li class="category-2">item 10</li>
<li class="category-2">item 11</li>
<li class="category-2">item 12</li>
<li class="category-1">item 13</li>
<li class="category-1">item 14</li>
<li class="category-2">item 15</li>
</ul>
<div id="pager"></div>
</div>
I want to hide other siblings li when i click one li to diplay tree view.
Only one node should open and its children elements have to expand. check the fiddle links below .
Html code :
Part 1
Item A
Sub-item 1
Sub-item 2
Sub-item 3
Item B
Sub-item 1
Sub-item 2
Sub-item 3
Item C
Sub-item 1
Sub-item 2
Sub-item 3
Item D
Sub-item 1
Sub-item 2
Sub-item 3
Item E
Sub-item 1
Sub-item 2
Sub-item 3
<li>Part 2
<ul>
<li>Item A
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item B
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item C
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item D
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item E
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ul>
</li>
<li>Part 3
<ul>
<li>Item A
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item B
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item C
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item D
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
<li>Item E
<ul>
<li>Sub-item 1</li>
<li>Sub-item 2</li>
<li>Sub-item 3</li>
</ul>
</li>
</ul>
</li>
</ul>
css :
ul.tree li {
list-style-type: none;
position: relative;
}
ul.tree li ul {
display: none;
}
ul.tree li.open > ul {
display: block;
}
ul.tree li a {
color: black;
text-decoration: none;
}
ul.tree li a:before {
height: 1em;
padding:0 .1em;
font-size: .8em;
display: block;
position: absolute;
left: -1.3em;
top: .2em;
}
ul.tree li > a:not(:last-child):before {
content: '+';
}
ul.tree li.open > a:not(:last-child):before {
content: '-';
}
js code :
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var parent = e.target.parentElement;
var classList = parent.classList;
if(classList.contains("open")) {
classList.remove('open');
var opensubs = parent.querySelectorAll(':scope .open');
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
} else {
classList.add('open'); // Here only i want that condition to check li is already opened or not//
}
});
}
For more info : https://jsfiddle.net/te366hu2/2/
This should work!
All info in comments:
https://jsfiddle.net/xog7hxLs/
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var element = e.target.parentElement; //actually this is just the elem itself
var parent = element.parentElement //real parent
var opensubs = parent.querySelectorAll(':scope .open'); //check which are opened on parent
if(opensubs.length !=0) {
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open'); //closing opened previously
}
}
element.classList.add('open'); //opening current
});
}
I have modified you js code a bit to collapse the sibling nodes. Full working fiddle here
var tree = document.querySelectorAll('ul.tree a:not(:last-child)');
for(var i = 0; i < tree.length; i++){
tree[i].addEventListener('click', function(e) {
var parent = e.target.parentElement;
var classList = parent.classList;
var closeAllOpenSiblings = function(){
var opensubs = parent.parentElement.querySelectorAll(':scope .open');
for(var i = 0; i < opensubs.length; i++){
opensubs[i].classList.remove('open');
}
}
if(classList.contains("open")) {
classList.remove('open');
} else {
closeAllOpenSiblings();
classList.add('open');
}
});
}
Use the node open event to look through the tree and close other nodes.
$('#tree').on('open_node.jstree', function (e, data) {
var nodesToKeepOpen = [];
// get all parent nodes to keep open
$('#'+data.node.id).parents('.jstree-node').each(function() {
nodesToKeepOpen.push(this.id);
});
// add current node to keep open
nodesToKeepOpen.push( data.node.id );
// close all other nodes
$('.jstree-node').each( function() {
if( nodesToKeepOpen.indexOf(this.id) === -1 ) {
$("#tree").jstree().close_node(this.id);
}
})
});
JSFiddle Demo
The code below slides down and up four elements of the list. These elements, of course has its height. So the question is: how to slide down or up elements and at the same time slide page scroll?
Thank You.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var numInList = list.length;
var isShowing = true;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
if (isShowing) {
list.slice(showing - 1, showing + numToShow).fadeIn(100, onFadeComplete);
} else {
list.slice(showing - numToShow, numInList).fadeOut(100, onFadeComplete);
}
});
function onFadeComplete() {
var nowShowing = list.filter(':visible').length;
if (nowShowing == numInList && isShowing) {
isShowing = false;
button.text("Show less");
} else if (isShowing) {
button.text("Show even more");
}
if (nowShowing == numToShow) {
button.text("Show more");
isShowing = true;
}
}
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
<button class="partners__button__a_less" style="display:none">Show Less</button>
</div>
I often do something like the code below to get the slide animation:
$(".scrollto").click(function(e) {
var btn = $(e.currentTarget);
$('html, body').animate({
scrollTop: $(btn.attr("href")).offset().top
}, 1000);
});
I use the code above to implement animations(slide effect) to my header website. You can use it for your own. Also if you want you can add your html code and I can update the answer.
I hope it's helps.
EDITED:
Basically I have added a piece of code in your function onFadeComplete() as you can see below: DEMO
$("html, body").animate({ scrollTop: $('.partners__ul li').last().offset().top }, 1000);
I have set the scroll to the body so in the example is not working but in your website should work fine.
Here's a script that shows 4 items each time a button is clicked. What i need is to change the text of the button after a click to "show even more" and then change to "show less" at the end when all items shown. I tried to add this:
if (nowShowing >= numInList) {
$('.partners__button__a').toggle(function() {
$(this).text('Show More');
}, function() {
$(this).text('Show Less');
button.show();
});
}
but it's not working the way I need.
And also how to add a reverse function to hide items?
Thank you.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var numInList = list.length;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
var nowShowing = list.filter(':visible').length;
});
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
</div>
I did something different. Used two buttons but instead of one just to hide and show at the same time when half content is visible. Not sure whether you need it this way, just thought about making it more functional.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var buttonLess = $(".partners__button__a_less");
var numInList = list.length;
var nowShowing = 4;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - 1, showing + numToShow).fadeIn();
nowShowing = list.filter(':visible').length;
if(numInList === nowShowing) {
$(this).hide();
buttonLess.text('Show Less')
} else if(nowShowing > numToShow) {
$(this).text('Show Even More');
buttonLess.show();
}
});
buttonLess.click(function() {
var showing = list.filter(':visible').length;
list.slice(showing - numToShow, showing).fadeOut();
nowShowing = nowShowing - numToShow;
if(numToShow === nowShowing) {
$(this).hide();
button.text('Show More');
} else if(nowShowing < numInList) {
$(this).text('Show Less');
button.show();
}
});
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
<button class="partners__button__a_less" style="display:none">Show Less</button>
</div>
Getting the text to change is easy enough, the simplest way would be to add this to the bottom of your button's click handler:
if(nowShowing == numInList){
$(this).text("Show less");
}
else{
$(this).text("Show even more");
}
As for the second item of showing less, you could add this (agin in the click handler)
if(showing < numInList){
list.slice(showing - 1, showing + numToShow).fadeIn();
}
else{
list.slice(showing - numToShow, numInList).fadeOut();
}
From here, you need to handle the fact that once you've shown everything and you start being able to show less, you need some form of boolean to indicate if we're currently in the state of "showing" or "hiding".
This then presents another problem! As you're fading in and out the :visible state will not be correct until after the fade has completed. Therefore you should defer the functionality using an overload of fadeIn / fadeOut which takes a callback.
The finished code can be seen below.
$(document).ready(function() {
var list = $(".partners__ul li");
var numToShow = 4;
var button = $(".partners__button__a");
var numInList = list.length;
var isShowing = true;
list.hide();
if (numInList > numToShow) {
button.show();
}
list.slice(0, numToShow).show();
button.click(function() {
var showing = list.filter(':visible').length;
if(isShowing){
list.slice(showing - 1, showing + numToShow).fadeIn(100,onFadeComplete);
}
else{
list.slice(showing - numToShow, numInList).fadeOut(100,onFadeComplete);
}
});
function onFadeComplete(){
var nowShowing = list.filter(':visible').length;
if(nowShowing == numInList && isShowing){
isShowing = false;
button.text("Show less");
}
else if(isShowing){
button.text("Show even more");
}
if(nowShowing == numToShow){
button.text("Show more");
isShowing = true;
}
}
});
.partners__ul {
list-style: none;
padding: 0;
margin: 0;
}
.partners__ul li {
position: relative;
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<ul class="partners__ul">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
</ul>
<button class="partners__button__a">Show More</button>
</div>
I have horizontal navigation menu with lot of list items. I want to display only five items and hide the rest. Then add left and right arrow buttons at the both ends of the navigation menu. On click it shows the next 5 list items.
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li class="hide">List item 6</li>
<li class="hide">List item 7</li>
<li class="hide">List item 8</li>
<li class="hide">List item 9</li>
<li class="hide">List item 10</li>
</ul>
I appreciate any help.
try it:
HTML code
<ul id="list">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
</ul>
<input type="button" name="prev" value=" prev " />
<input type="button" name="next" value=" next " />
JavaScript Code
var list = $('#list li');
reset();
function reset () {
step = 5; // number of list items to show (by removing hidden class)
current = 0;
for (i=0; i< list.length; i++) {
if ( i >= step ) { $(list[i]).addClass('hidden'); }
else $(list[i]).removeClass('hidden');
}
}
$('input[name="next"]').live('click', function () {
current += step;
threshold = current + step;
if (threshold > list.length-1+step) { current -= step; threshold = list.length; }
for (i=0; i < list.length; i++) {
if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
else $(list[i]).addClass('hidden');
}
});
$('input[name="prev"]').live('click', function () {
current -= step;
threshold = current + step;
if (current < 0) { reset(); threshold = current + step;
}
for (i=0; i < list.length; i++) {
if ( (i >= current) && (i < threshold ) ) { $(list[i]).removeClass('hidden'); }
else $(list[i]).addClass('hidden');
}
});