[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 861
  • Last Modified:

JQuery paging plugin

Hi everyone,

I'm using a jquery paging plugin called jPages.js located at the following url:

http://luis-almeida.github.io/jPages/

In the following code you can see that there's a div with a class of "post" so basically that div and it's child elements get repeated down the page and then the jPages plugin handles the amount per page and the paging system:

    <body>
        <div id="itemContainer">

<div class="post">
<h2 class="post-title">Title goes here</h2>
<div class="post-body"> 
   Text goes here. Text goes here.
    </div>

        </div>
        <div class="holder"></div>
    </body>

Open in new window


Here is the function that initiates the plugin:

        <script>
  /* when document is ready */
  $(function() {
    $("div.holder").jPages({
      containerID: "itemContainer",
   perPage: 4
    });
  });
  </script>

Open in new window


It works as intended but I'm looking to extend it somewhat. Currently you can specify how many divs per page but I'd like to specify that each page is separated according to an alphabetical order. You'll notice that there's an h2 element set as a child of div.post that contains the title so if there are any h2 elements that contains a title that begins with the letter 'A' then those divs would be shown first. Any with a title that begins with 'B' then they would be shown next, etc. I thought about manually adding a second class of 'A', 'B', 'C' etc. to the parent div.post but I would need a way to revise the code in order to get this to work as needed.

I'm assuming that revising the code within the plugin would be a massive overhaul so I just wondered if anyone could give me any advice as to how to get this accomplished, or does anyone know of another plugin that would create this desired effect?

Thanks so much in advance - I really appreciate any advice.
0
gwh2
Asked:
gwh2
  • 7
  • 7
1 Solution
 
RobOwner (Aidellio)Commented:
See here for a demo... just uses inbuilt sort function and jQuery

http://jsbin.com/posase/1/edit

function SortPosts() {
	var divs = $(".post").sort(function(a, b) {
		var _a = $(a).find(".post-title").text().toLowerCase();
		var _b = $(b).find(".post-title").text().toLowerCase();
		return _a > _b;
	});
	
	$("#itemContainer").html(divs);
};

Open in new window

0
 
gwh2Author Commented:
Thanks for the reply,

The sort function looks great but this only gets me some of the way. Can you let me know how I would get this to work with the jPages plugin? Also it doesn't solve the problem of the paging system. Currently the jPages plugin uses numbering to separate the pages, so how would I use letters instead?

Appreciate any further advice.
0
 
RobOwner (Aidellio)Commented:
Let me take a further look. I do have to ask though, what do you want to harem if there are 25 articles beginning with A? They all get shown on the A page?
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
gwh2Author Commented:
Hi, it would be good to limit the number of articles shown per page, so for example to limit them to 5 or 10 per page for each letter. Is that possible?
0
 
RobOwner (Aidellio)Commented:
I thought you may say that :)  In otherwords, you're after a paging system within a paging system..
0
 
gwh2Author Commented:
Well if that's possible. If not, then I'm happy to have each letter on 1 page.
0
 
RobOwner (Aidellio)Commented:
http://jsbin.com/posase/2/edit

Clicking the button is only there for you to see what's going on.  You would automate this for the final site.

the jPaging plugin works by setting the number per page.  For you that is random so it would mean a re-write.
0
 
gwh2Author Commented:
Ok thanks for the advice. I thought we-writing would be the case. Do you know of a jQuery plugin that does this type of thing out of the box?
0
 
RobOwner (Aidellio)Commented:
ok this has tabs for the letters and applies the paging when you switch tabs:  http://jsbin.com/foxoc/1/edit

function SortPosts() {
	$('button').prop('disabled',true);
	var letters = {};
	var divs = $(".post").sort(function(a, b) {
		var _a = $(a).find(".post-title").text().toLowerCase();
		var _b = $(b).find(".post-title").text().toLowerCase();
		return _a.localeCompare(_b);
	});


	$.each(divs, function(i, el) {
		// get the letters
		var _a = $(el).find(".post-title").text().toLowerCase();
		var _aLetter = _a.substr(0,1).toUpperCase();

		if (letters[_aLetter]===undefined) {
			letters[_aLetter]=[];
		}

		letters[_aLetter].push(el);

	});

	//console.dir(letters);

	// loop through the letters, wrapping content
	$.each(letters, function(letter, posts) {
		// create a tab heading
		// <li><a href="#home" role="tab" data-toggle="tab">A</a></li>
		$('#letterTabs').append('<li><a href="#'+letter+'" role="tab" data-toggle="tab" data-letter="'+letter+'">'+letter+'</a></li>');

		// create a tab body
		// <div class="tab-pane" id="[letter]">...</div>
		var tmp = $('<div class="tab-pane" id="'+letter+'">');
		var holder = $('<div>');
		holder.addClass('holder'+letter);
		holder.addClass('holder');
		var container = $('<div>');
		container.attr('id',"itemContainer"+letter);
		tmp.append(holder);
		container.append(posts);
		tmp.append(container);
		$('#letterContent').append(tmp);

	});

	$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
		//e.target // activated tab
		//e.relatedTarget // previous tab
		//alert('hi');
		var letter = $(e.target).data('letter');
		$("div.holder"+letter).jPages({
			containerID : "itemContainer"+letter,
			perPage: 2
		});
	});
	// make the first tab active
	//$('.nav-tabs').tabs('refresh');
	$('.nav-tabs a:first').tab('show');

	// divs is now sorted
	// wrap each group of Letter in 

	$("#itemContainer").html('');

}

Open in new window

0
 
RobOwner (Aidellio)Commented:
i've incorporate bootstrap tabs: http://getbootstrap.com/javascript/#tabs for the tabbing.

More than happy to answer any questions about the code
0
 
gwh2Author Commented:
I'm sorry it took me so long to get back to this post as I got distracted with other work. Thanks so much for that code - it all looks great. Can you confirm that the jPages code was not used at all, ie. that it's now only using bootstrap? If yes, is it possible to use the tab code from a Foundations js tab plugin such as:

http://foundation.zurb.com/docs/components/tabs.html

Would it be easy to transfer the code to the above plugin as I'm using Foundations not Bootstrap as the CSS/JS framework?
0
 
gwh2Author Commented:
Sorry again, I just had a closer look at your code and realised that it is still using jPages but seems to have incorporated the Bootstrap tabs. I guess I could still use bootstrap but it would be good to know if the Foundations versions would still work ok.

Thanks again.
0
 
RobOwner (Aidellio)Commented:
I'm sure any tabs will work. You want foundations we'll do those.
Aside from that it does what you were thinking yes?
0
 
gwh2Author Commented:
Yes it's great - perfect actually.

Much appreciated.
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

  • 7
  • 7
Tackle projects and never again get stuck behind a technical roadblock.
Join Now