javascript - (JQuery/JavaScript) 按 15、50、100、500 过滤表或显示所有记录

Question

下面我有一个按组名称和要显示的记录数进行过滤的示例。

我希望能够过滤而不是不断追加和追加，过滤器应该只显示所选记录的数量，例如15、50、100、500 或所有记录。当选择 15 然后选择 100 时，它将保留 15 条记录并附加 100 条记录。

它应该像这样工作:

选择 15 它应该显示 15 条记录。

然后选择 100，它应该保留15条记录，然后应该添加75条记录。

然后选择 50 它应该删除 50 条记录。

有人知道我哪里出错了吗？

// Get all group names
GetPatientGroupNames();
// Get all patients
GetPatientListData();

// On page select initialize functions
$(document).ready(function() {
  // On select group, change midwives last sync list to the selected group
  $('#selectGroupInput').change(function(sender) {
    // Get all group names
    GetPatientGroupNames();
    // Get all patients
    GetPatientListData();
    var MyObject = {};
    MyObject.PatientID = "1";
    MyObject.patientFirstname = "Test";
    MyObject.patientSurname = "TestLastName";
    MyObject.patientNHSID = "FGFGD345";
    MyObject.Name = "Team1";
    ShowPatientTable(MyObject, $('#selectGroupInput option:selected').text(), $('#selectNumberOfRecords option:selected').text());
  });

  // On show record number, change midwives last sync list to the selected number of records
  $('#selectNumberOfRecords').change(function(sender) {

    // Get all group names
    GetPatientGroupNames();
    // Get all patients
    GetPatientListData();

    var MyObject = {};
    MyObject.PatientID = "1";
    MyObject.patientFirstname = "Test";
    MyObject.patientSurname = "TestLastName";
    MyObject.patientNHSID = "FGFGD345";
    MyObject.Name = "Team1";

    ShowPatientTable(MyObject, $('#selectGroupInput option:selected').text(), $('#selectNumberOfRecords option:selected').text());
  });
});

function GetPatientGroupNames() {
  // Set time before records start to load on page
  if (document.getElementById('selectGroupInput') !== null) {
    var GroupSelectOptions = document.getElementById('selectGroupInput').options;
    for (i = GroupSelectOptions.length - 1; i >= 0; i--) GroupSelectOptions[i] = null;
    var GroupSelectInput = document.getElementById('selectGroupInput');

    opt = document.createElement('option');
    opt.value = 'All';
    opt.innerHTML = 'All';
    GroupSelectInput.appendChild(opt);

    var MyObject = {};
    MyObject.Name = "Team1";

    // Check to see if response message returns back "OK"

    opt = document.createElement('option');
    opt.value = JSON.stringify(MyObject);
    opt.innerHTML = MyObject['Name'];
    GroupSelectInput.appendChild(opt);

    // Check to see if there is a input with the id of selectGroup
    if (document.getElementById('selectGroupInput')) {

      if ((document.getElementById('selectGroupInput')).selectedIndex != null) {
        var Selectelement = document.getElementById('selectGroupInput');

        if ((Selectelement.options[Selectelement.selectedIndex]).value != "All") {
          currentArray = JSON.parse((Selectelement.options[Selectelement.selectedIndex]).value);
        }
      }
    }
  }
}

// Get all patient information for patient list, and append to patient list table (Patient List page)
function GetPatientListData() {

  var MyObject = {};
  MyObject.PatientID = "1";
  MyObject.patientFirstname = "Test";
  MyObject.patientSurname = "TestLastName";
  MyObject.patientNHSID = "FGFGD345";
  MyObject.Name = "Team1";

  ShowPatientTable(MyObject, $('#selectGroupInput option:selected').text(), $('#selectNumberOfRecords option:selected').text());
}

// Show patient table with populated list of patients 
function ShowPatientTable(MyObject, GroupName, NumberRecords) {


  $(".patientListHiddenNotice").css("display", "none");
  // Stored patient list table rows
  var patientTableRecord = [];
  var patientTableRecordCounter = 0;

  if (MyObject) {
    // Add new patient list to be displayed in table
    // Set group input back to all when live searching

    // If so, loop through the old Patient list
    for (var i = 0; i < 500; i++) {

      if (GroupName == "All") {
        // Show team column
        $('.showAllTeam').show();

        // If so, push the Patient into the new list
        patientTableRecord[patientTableRecordCounter++] = '<tr id="' + MyObject["PatientID"] + '"><td class="patientListNames">' + MyObject["patientFirstname"] + ' ' + MyObject["patientSurname"] + '(' + MyObject["patientNHSID"] + ')' + '</td><td>' + MyObject["Name"] + '</td></tr>';
      } else {
        // Hide team table column if user has selected a group name in group drop down menu
        $('.showAllTeam').hide();
        // Check if the filter matches the Patient being checked
        if ((MyObject["Name"]).toLowerCase().indexOf(GroupName.toLowerCase()) != -1) {
          // Append patient data to the list of patients table
          patientTableRecord[patientTableRecordCounter++] = '<tr id="' + MyObject["PatientID"] + '"><td class="patientListNames">' + MyObject["patientFirstname"] + ' ' + MyObject["patientSurname"] + '(' + MyObject["patientNHSID"] + ')' + '</td></tr>';
        }
      }
    }
  }





  // Check if array exists or is empty
  if (patientTableRecord === undefined || patientTableRecord.length == 0) {
    // If there are no Patients to show, notify the user
    $(".patientListHiddenNotice").css("display", "none");
    $(".patientListEmptyNotice").css("display", "block");
  } else {
    $(".patientListHiddenNotice").css("display", "none");
    $(".patientListEmptyNotice").css("display", "none");
  }

  // Check that there are actually Patients to display
  if (patientTableRecord.length) {
    // When user selected all, 
    if (NumberRecords === "All") {
      NumberRecords = patientTableRecord.length;
    }

    // Check if the new Patient array is too large
    if (patientTableRecord.length > NumberRecords) {
      // If so, chop off all records over the limit, and update the "Patients Hidden" footer
      $(".recordsHidden").text(patientTableRecord.length - NumberRecords);
      $(".patientListHiddenNotice").css("display", "block");
      $(".patientListEmptyNotice").css("display", "none");

      patientTableRecord.splice(NumberRecords, patientTableRecord.length - NumberRecords);
    }
  } else {
    // If there are no Patients to show, notify the user
    $(".patientListEmptyNotice").css("display", "block");
  }

  // Show patient records
  $('#patientListTable').find('tbody').append(patientTableRecord);
}

/* Hidden Patient Notice */

.patientListHiddenNotice {
  display: none;
  background-color: #F3E88E;
  height: 50px;
  text-align: center;
  padding: 5px;
}
/* No Patients Found Notice */

.patientListEmptyNotice {
  display: none;
  background-color: #F3E88E;
  height: 50px;
  text-align: center;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- /.row -->
<div class="row">
  <div class="col-lg-12">
    <div class="panel panel-default">
      <!-- /.panel-heading -->
      <div class="panel-body">
        <div>
          <!-- Order patient list by --> <b>Order by</b>

          <div class="btn-group inline" role="group" aria-label="...">
            <!-- Order by group name -->
            <div class="btn-group btn-sm" role="group">
              <select class="btn btn-default" id="selectGroupInput"></select>
            </div>
          </div>
          <!-- Show number of patient records --> <b>Show records</b>

          <div class="btn-group inline" role="group" aria-label="...">
            <div class="btn-group btn-sm" role="group">
              <select class="btn btn-default" id="selectNumberOfRecords">
                <option>15</option>
                <option>50</option>
                <option>100</option>
                <option>500</option>
                <option>All</option>
              </select>
            </div>
          </div>
        </div>
        <div class="dataTable_wrapper">
          <!-- Patient listing table responsive wrapper -->
          <div class="table-responsive">
            <!-- Patient listing table -->
            <table class="table table table-striped table-bordered table-hover" id="patientListTable">
              <thead>
                <tr>
                  <th class="sortable orderNameByASC">Patients</th>
                  <th class="showAllTeam">Team Name</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>
        <!-- /.table-responsive -->
      </div>
      <!-- /.panel-body -->
    </div>
    <!-- /.panel -->
  </div>
  <!-- /.col-lg-12 -->
</div>
<!-- /.row -->

JSFIDDLE

Answer 1

您正在使用.append而不是.html ，因此您不断添加更多行，而不是替换现有的行。

您只需将其更改为:

$('#patientListTable').find('tbody').html(patientTableRecord);

<强> See Fiddle