Поиск студентов и отображение записей обратно пользователю? - PullRequest
0 голосов
/ 06 сентября 2018

Главный экран в моем приложении требует от пользователя выбрать фильтр и ввести поисковый контент. Затем пользователь отправляет этот запрос на сервер. В зависимости от критериев поиска количество записей, которые будут возвращены пользователю, может варьироваться. Допустим, пользователь выбирает фильтр по Name и вводит только три буквы Mar. Запрос на серверной части в моем коде проверит, существует ли этот Name / Value в столбце Имя или Фамилия. Этот фильтр может вернуть 600 записей, например. В этой ситуации мне интересно, какое лучшее решение или шаги предпринять? В старой системе моей компании есть логика, которая проверяет, не превышает ли количество запросов количество записей 200. В этом случае пользователь получит сообщение Your search criteria has to narrow down. Please enter more information. В одной руке я понимаю, что пользователь не будет доволен таким подходом. В то же время я не уверен, зачем им нужно более 200 записей. Мне интересно, что является хорошим решением для подобных поисковых ситуаций? Также я предоставляю возможность поиска по DOB (Дата рождения), и в некоторых ситуациях может возвращаться более 200 записей. Система, которую я разрабатываю, содержит более 1007 записей в таблице учеников. Вот пример интерфейса для процесса поиска:

$("#frmStudent_filterby").on("change", filterStudent);

function filterStudent() {
  var elementVal = $(this).val();
  $("#frmStudent_search").removeAttr("placeholder pattern title maxlength");

  switch (elementVal) {
    case '1':
      $("#frmStudent_search").attr({
        "type": "search",
        "placeholder": "Last, First or Last or First",
        "pattern": "[a-zA-Z][A-Za-z' .,-]{0,100}$",
        "title": "A-Z, space, dash, apostrophe, period, comma - no other special characters",
        "maxlength": 100,
        "disabled": false,
        "readonly": false,
        "required": true
      }).datepicker("destroy").val("");
      break;
    case '2':
      $("#frmStudent_search").attr({
        "type": "text",
        "placeholder": "mm/dd/yyyy",
        "pattern": "",
        "title": "Allows date value format mm/dd/yyyy only",
        "maxlength": 10,
        "disabled": false,
        "readonly": true,
        "required": true
      }).datepicker({
        format: "mm/dd/yyyy",
        orientation: "bottom auto",
        autoclose: true
      }).val("");
      break;
    case '3':
      $("#frmStudent_search").attr({
        "type": "text",
        "placeholder": "XXXXXXXXXX",
        "pattern": "[0-9]{10}$",
        "title": "Student ID allows numeric values only - no other special characters",
        "maxlength": 10,
        "disabled": false,
        "readonly": false,
        "required": true
      }).datepicker("destroy").val("");
      break;
    default:
      $("#frmStudent_search").attr({
        "type": "text",
        "placeholder": "Select Search Criteria",
        "pattern": "",
        "title": "",
        "maxlength": 0,
        "disabled": true,
        "readonly": true,
        "required": false
      }).datepicker("destroy").val("");
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<form name="frmfind_student" id="frmfind_student" autocomplete="off">
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <select class="form-control" name="frmStudent_filterby" id="frmStudent_filterby" required>
        <option value="">--Search By--</option>
        <option value="1">Name</option>
        <option value="2">DOB</option>
        <option value="3">Student ID</option>
      </select>
    </div>
    <div class="form-group col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <input type="text" class="form-control" name="frmStudent_search" id="frmStudent_search" placeholder="Select Search Criteria" disabled>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <button type="submit" class="btn btn-block btn-primary">
         <span class="glyphicon glyphicon-search"></span> Search
      </button>
    </div>
  </div>
  <div class="row">
    <div class="form-group col-xs-12 col-sm-12 col-md-12 col-lg-12">
      <div class="alert message-submit"></div>
    </div>
  </div>
</form>

Если у кого-нибудь есть предложения, пожалуйста, дайте мне знать. Я использую JQuery Datatables для отображения данных обратно пользователю. Мне интересно, будет ли server-side pagination хорошим вариантом в этом случае или есть какой-то другой подход. Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...