我的应用程序的主屏幕要求用户选择过滤器并输入搜索内容。然后,用户将此请求发送到服务器。根据搜索标准,将返回给用户的记录数可能会有所不同。假设用户选择对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
是不是一个好的选择,还是有其他方法。谢谢。