Jquery 6-5-10

内容在这里

西班牙下雨

5-8-10

内容在这里

另一个很酷的标题

4-15-10

内容在这里

---

感谢所有在上面发帖的人。我只是通过我的CMS雇佣了一个人来做这件事，因为我的时间紧迫。事实证明，通过PHP，开发人员能够实现此功能。

Hmm。。。我想到了3个插件，也包括搜索，但它们都使用表。不过，我会继续查找。另外，您希望只对当前选择进行排序，还是对所有文章进行排序？嘿，Levi…thnx，谢谢您的回答。是的，我所看到的一切都涉及到表格排序：（排序将针对列出的所有文章介绍（如上面的格式）。我给了你足够的信息吗？

<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.

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

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