搜索学生并将记录显示给用户?

时间:2018-09-06 17:41:11

标签: jquery datatables paging server-side-scripting

我的应用程序的主屏幕要求用户选择过滤器并输入搜索内容。然后,用户将此请求发送到服务器。根据搜索标准,将返回给用户的记录数可能会有所不同。假设用户选择对Name进行过滤,仅输入三个字母Mar。在我的代码的后端查询将检查此Name / Value是否存在于“名字”或“姓氏”列中。例如,此过滤器可能返回600条记录。在那种情况下,我想知道最好的解决方案或步骤是什么?在我公司的旧系统中,它们具有检查查询记录数是否大于200的逻辑。在那种情况下,用户会收到消息Your search criteria has to narrow down. Please enter more information.。我了解到用户不会对这种方法感到满意。同时,我不确定他们为什么需要200多个记录。我想知道对于这种搜索情况有什么好的解决方案?另外,我提供了按DOB(出生日期)进行搜索的选项,在某些情况下可能返回200条以上的记录。我正在开发的系统在学生表中有超过500k条记录。这是搜索过程界面的示例:

$("#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是不是一个好的选择,还是有其他方法。谢谢。

0 个答案:

没有答案