Question

我有一个以ASC和DESC顺序排序的表，但是这只能命令显示的表行，因为我一次只显示15行。所以我现在想要使用数组进行排序，以便我也可以使用隐藏的行，但是我收到了如下错误：

未捕获的TypeError：无法读取未定义的属性“长度”

到目前为止我得到了什么：

// Variables for limiting Patients on show
var patientsToShow = 15;

// Stored Patient List
var storedPatientList = [{"RESPONSE": "OK"}, {"RECORDS": {"LastName":"Ashley", "LastName":"Jamie", "LastName":"Smith"}}];

// On page select initialize functions
$(document).ready(function ()
{
  
    $(".sortable").click(function() 
    {
        // Create a new array to store the Patients at multiple points
        var originalPatientList = new Array();
        var newPatientList = new Array();
        var patientTableRecord = '';

        originalPatientList = storedPatientList;

        if (originalPatientList.RESPONSE == "OK")
        {
            var clickedSorting = $(this).hasClass('orderNameByASC') ? 'orderNameByDESC' : 'orderNameByASC';
            $('.sortable').removeClass('orderNameByASC').removeClass('orderNameByDESC');
            $(this).addClass(clickedSorting);

            var columnIndex = $(this).prevAll().length;
            var tableBody = $(this).closest("table").find("tbody");
            var tableRow = tableBody.find("tr");

            originalPatientList.sort(function(a, b) 
            {
                var aText = $(a).find("td").eq(columnIndex).text();
                var bText = $(b).find("td").eq(columnIndex).text();

                // get the last name. May need to do something more complicated
                // if you want to skip middle names
                var A = aText.substr(aText.indexOf(' '));
                var B = bText.substr(bText.indexOf(' '));

                if (clickedSorting == 'orderNameByASC')
                {
                    return A.localeCompare(B);
                }
                else
                {
                    return B.localeCompare(A);
                }
            });

                        // If so, loop through the old Patient list
            for(var i = 0; i < originalPatientList.RECORDS.length; i++)
            {
                var currentRecord = originalPatientList.RECORDS[i];

                // If so, push the Patient into the new list
                newPatientList.push("<tr><td>" + currentRecord["LastName"] + "</td></tr>");                
            }
        }

        $.each(tableRow, function(key, value) 
        {
            tableBody.append(value);
        });
    });
});

/* Hidden Patient Notice */

.patientListHiddenNotice {
  display: none;
  background-color: lightgoldenrodyellow;
  height: 50px;
  text-align: center;
  padding: 5px;
}
/* No Patients Found Notice */

.patientListEmptyNotice {
  display: none;
  background-color: lightgoldenrodyellow;
  height: 50px;
  text-align: center;
  padding: 5px;
}
#dataTables-example th.orderNameByASC:after {
  content: '▲';
  display: inline-block;
  padding: 0 .5em;
  color: green;
}
#dataTables-example th.orderNameByDESC:after {
  content: '▼';
  display: inline-block;
  padding: 0 .5em;
  color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="dataTable_wrapper">
  <!-- Patient listing table -->
  <div class="table-responsive">
    <table class="table table table-striped table-bordered table-hover" id="dataTables-example">
      <thead>
        <tr>
          <th class="sortable orderNameByASC">Patients</th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>
    <div class="patientListHiddenNotice">
      <h4><span class='recordsHidden'>0</span> records hidden, use search field above...</h4>
    </div>

    <div class="patientListEmptyNotice">
      <h4>No records found</h4>
    </div>
  </div>
</div>

我不打算使用像数据表那样的东西

Answer 1

我要假设您尝试排序的数据来自数据库？为什么不简单地对查询中的数据进行排序，然后使用AJAX更新表？

因为只排序一个子集通常不是一个好主意，所以你可以得到一个列出'Alice，Charlie，Egon和Yann'的页面，当你移动到下一个子集时，你会列出'Bob，Derrick，Fred和威廉'。这不是您正在寻找的行为。

如果您在javascript中拥有整个数据集，只需使用sort，对整个集进行排序，然后使用有序集重新呈现整个表。

Answer 2

我强烈建议您使用https://www.datatables.net/来解决这些问题。如果您反对使用第三方库来解决问题的想法，那么我建议您保留两个列表。一个是所有记录的完整列表，第二个是此列表的片段，仅显示应用的排序序列的前15个匹配。

基于ASC和DESC顺序中的姓氏的订单数组

2 个答案: