Sorting + Pagination in jQuery

Question

I'm attempting to find a solution to allow users to sort content that is being output by a CMS while maintaining pagination.

I've got 50+ articles, and after 10 articles, I need to start pagination. I've found several jQuery plugins that handle pagination no problem.

I'll have a dropdown with options so the user can sort the info (Oldest to newest, A-Z, newest to oldest).

The info is not presented in tables, but rather content is in divs, like this:

<label for="sort">Sort</label>
<select name="sort">
<option value="A-Z">A-Z</option>
<option value="Oldest to Newest">Oldest to Newest</option>
<option value="Newest to Oldest">Newest to Oldest</option>
</select>

<div>
<h1>Cool Title Here</h1>
<p class="date">6-5-10</p>
<p>Content Goes Here.  <a href="#">read more</a></p>
</div>

<div>
<h1>It rains in Spain</h1>
<p class="date">5-8-10</p>
<p>Content Goes Here.  <a href="#">read more</a></p>
</div>

<div>
<h1>Another Cool Title</h1>
<p class="date">4-15-10</p>
<p>Content Goes Here.  <a href="#">read more</a></p>
</div>

Pagination Options will go here.

Not sure if anyone has found a solution that is able to tackle both of these issues.

Answer 1

You can sort a jquery object - in this case the divs from the content management system - by using the sort method with a function as an argument. In this case I've used the jquery .find method to sort based on the text of the elements within the parent divs.

If you're going to be sorting a large number of elements then you might potentially run into performance issues on older browsers and might have to use another function to sort.

I've included the original HTML underneath the script - I added a parent container element for the CMS divs and some pagination controls. Hope this helps!

    <script>
   var pageSize = 10; //sets number of results shown at a time
   $(document).ready(function() {
       $("#selectSort").change(function() {
           switch ($(this).val()) {
               case "A-Z":
                   $("#CMSContent div").sort(sortTitle).appendTo($("#CMSContent").empty());
                   break;

               case "Oldest to Newest":
                   $($.makeArray($("#CMSContent div").sort(sortDate)).reverse()).appendTo($("#CMSContent").empty());
                   break;

               case "Newest to Oldest":
                   $("#CMSContent div").sort(sortDate).appendTo($("#CMSContent").empty());
                   break;
           }
           displayResults(0); //initial sort
       });

       $("#first").click(function() { displayResults(0); });

       $("#previous").click(function() { displayPreviousPage(); });

       $("#next").click(function() { displayNextPage(); });

       $("#last").click(function() {
           displayResults($("#CMSContent div").length - ($("#CMSContent div").length % pageSize));
       });
       $("#selectSort").change(); //initial sort
   });

   function displayNextPage() {
       displayResults($("#CMSContent div:visible:first").prevAll().length + pageSize);
   }

   function displayPreviousPage() {
       displayResults($("#CMSContent div:visible:first").prevAll().length - pageSize);
   }
   function displayResults(start) {
       if (start < 0) { start = 0; }
       $("#CMSContent div")
            .css("display", "none") //hide all elements
            .slice(start, start + pageSize).css("display", "block"); //displays elements in page
       //show and hide pagination controls as necessary
       $("#next, #last").css("visibility", (start + pageSize > $("#CMSContent div").length ? "hidden" : ""));
       $("#previous, #first").css("visibility", (start == 0 ? "hidden" : ""));
   }

   function sortTitle(a, b) {
       return $(b).find("h1").text() < $(a).find("h1").text();
   }
   function sortDate(a, b) {
       return formatDate($(b).find("p.date").text()) > formatDate($(a).find("p.date").text());
   }
   function formatDate(txt) { //assumes all dates in mm-dd-yyyy format and post 2000
       var d = new Date();
       d.setFullYear(parseInt("20" + txt.split("-")[2]));
       d.setMonth(parseInt(txt.split("-")[0]) - 1, parseInt(txt.split("-")[1]));
       return d;
   }
</script>


<label for="sort">
    Sort</label>
<select name="sort" id="selectSort">
    <option value="A-Z">A-Z</option>
    <option value="Oldest to Newest">Oldest to Newest</option>
    <option value="Newest to Oldest">Newest to Oldest</option>
</select>
<div id="CMSContent">
    <div>
        <h1>
            Cool Title Here</h1>
        <p class="date">
            6-5-10</p>
        <p>
            Content Goes Here. <a href="#">read more</a></p>
    </div>
    <div>
        <h1>
            It rains in Spain</h1>
        <p class="date">
            5-8-10</p>
        <p>
            Content Goes Here. <a href="#">read more</a></p>
    </div>
    <div>
        <h1>
            Another Cool Title</h1>
        <p class="date">
            4-15-10</p>
        <p>
            Content Goes Here. <a href="#">read more</a></p>
    </div>
</div>
<input id="first" type="button" value="First" />
<input id="previous" type="button" value="Previous" />
<input id="next" type="button" value="Next" />
<input id="last" type="button" value="Last" />