jquery - jQuery中的排序+分页

我试图找到一种解决方案，以允许用户对CMS正在输出的内容进行排序，同时保持分页。

我有超过50篇文章，而在10篇文章之后，我需要开始分页。我发现几个处理分页的jQuery插件都没问题。

我将使用一个选项下拉列表，以便用户可以对信息进行排序（从最旧到最新，从A到Z，从最新到最旧）。

信息不在表格中显示，而是内容在div中显示，如下所示：

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

不知道是否有人找到了能够解决这两个问题的解决方案。

最佳答案

您可以使用功能为参数的sort方法对jquery对象（在本例中为内容管理系统中的div）进行排序。在这种情况下，我已使用jquery .find方法根据父div中元素的文本进行排序。

如果要对大量元素进行排序，则可能会在较旧的浏览器上遇到性能问题，并且可能必须使用其他函数进行排序。

我已经在脚本下面包含了原始的HTML-我为CMS div和一些分页控件添加了一个父容器元素。希望这可以帮助！

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