Sort + pagination in jQuery

Question

I am trying to find a solution that allows users to sort the content that is displayed by the CMS while maintaining the pagination.

I have 50 articles, and after 10 articles I need to start pagination. I found several jQuery plugins that handle pagination without problems.

I will have a drop-down list with options so that the user can sort the information (from oldest to newest, from A to Z to the oldest).

Information is not presented in tables, but content is in divs, for example:

<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 can solve both of these problems.

Answer 1

, . -, CMS, . PHP .

Answer 2

jquery - divs - . jquery.find div.

, , , .

HTML script - div CMS . , !

    <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" />

Answer 3

, js.

    <script type="text/javascript">
    var myDivContentArray = new Array();
    var sortedContents = new Array();
    var size = 0;
    var pageSize = 10;
    //var currentPageNumber = 1;
    var tempContent = new Array();
    $(document).ready(function(){
        $("div").each(function(index){
            //debugger;
            tempContent["Index"] = index;
            tempContent["Title"] = $(this).find("h1").html();
            tempContent["Date"]= Date.Parse($(this).find(".date").html());
            //need to parse milliseconds to current time
            tempContent["Content"] = $(this).find("p:last").html();
            $(this).hide();
            myDivContentArray.push(tempContent);
        });
        $(".pageNumber").live("click",Changepage($(this).val()));
        size = myDivContentArray.length;
        for(i = 0; i< size/pageSize; i++)
        {
            $("select[name=Sort]").append("<label value="+i+" class='pageNumber' ></label>");
        }

    });
    $("label[for=sort]").click(function(){
        var selectedOption = $("select[name=sort]").val();
        switch(selectedOption)
        {
            case "A-Z": { sortedContents = myDivContentArray.sort(sortAlpha); break; }
            case "Oldest to Newest": { sortedContents = myDivContentArray.sort(sortDate).reverse(); break; }
            case "Newest to Oldest": { sortedContents = myDivContentArray.sort(sortDate); break; }
        }
        Changepage(1);
    });
    function Changepage(pageNumber)
    {
        //Show only those divs whose Index is in the sortedContents array
    }
    function sortDate(a,b){  
        return a["Date"] > b["Date"] ? 1 : -1;  
    };
    function sortAlpha(a,b) {
        return (a["Title"] > b["Title"]) ? 1: -1;
    }
    </script>

Inside the ChangePage function, you can scroll through all divs and make only those divs whose pointer is in sortedArray. I have not tested this script completely. So debug it once.