Question

我正在尝试找到一种解决方案，允许用户在保持分页的同时对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.

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

Answer 1

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

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

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

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

如果您没有找到可以编写自定义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>

在ChangePage函数内部，您可以循环遍历所有div，并只显示其Index在sortedArray中的div。我还没有完全测试过这个脚本。所以调试一次。

Answer 3

感谢上面发布的所有人。我刚刚开始并雇佣了一些人通过我的CMS来做这件事，因为我正处于紧张状态。通过PHP，开发人员能够使这项功能正常运行。

在jQuery中排序+分页

3 个答案: