我在应用程序中开发了一些选项卡，在这些选项卡中我使用JQuery Datatables加载了数据。我在后端使用JavaScript / JQuery，HTML5，Bootstrap 3和ColdFusion 2016与SQL 2008数据库进行通信。例如，用户将能够通过“用户”表进行搜索。他们可以按名称，用户名，电子邮件进行过滤。我使用AJAX调用ColdFusion函数，然后检索数据并加载到表中。所有数据将为JSON格式。我开始查看pagination是我的一张桌子的原因是有3600条记录。用户需要过滤器选项，可以在其中请求将所有记录显示在表中。老实说，这对于我当前的代码来说还算不错，它需要大约4 seconds来加载数据并显示在表中。但是，我不确定这4秒钟的时间是否足够好还是被认为效率不高？但是，我打算使用datatables来显示一些报告数据。在这种情况下，我可能会获得大量数据（例如，年度报告可能有5000多个记录）。我的问题是，我当前使用的这种逻辑是否足以处理数据表中的大量数据，还是应该考虑使用Server-side processing？另外，我的问题是，如果我使用server-side方法并假设我的表有7000条记录，那么我每页仅显示25条记录。用户可能仍然想将数据导出到Excel，CSV或PDF文件（这是数据表中的选项），否则他们仍然会获取该文件中导出的所有7000记录否则他们只会获得25条记录已加载到页面中？有没有一种方法可以以我提到的一种文件格式导出所有7000记录？这是我当前的代码示例：
var usersStorage = {};
$('#frm_filterby').on('change', changeAttr);
function changeAttr() {
var elementVal = $(this).val();
$("#frm_search").removeAttr('pattern maxlength title');
switch (elementVal) {
case "1":
$("#frm_search").attr({
"type": "text",
"placeholder": "Example: jcook56",
"pattern": "[a-z0-9_-]{0,50}$",
"title": "User name allows alphanumeric (lowercase only) characters, underscore, dash - no other special characters",
"maxlength": "50",
"disabled": false,
"required": true
}).val("");
break;
case "2":
$("#frm_search").attr({
"type": "email",
"placeholder": "example@gmail.com",
"title": "Enter email address",
"maxlength": "80",
"disabled": false,
"required": true
}).val("");
break;
case "3":
$("#frm_search").attr({
"type": "search",
"placeholder": "(Last, 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,
"required": true
}).val("");
break;
default:
$("#frm_search").attr({
"type": "text",
"placeholder": "Select Search Criteria",
"disabled": true,
"required": false
}).val("");
}
}
$('#frmUsers').on('submit', findRecords);
function findRecords(e) {
e.preventDefault();
var formData = $(this).serialize(),
fldMessage = $(this).find(".message-submit"),
recordsBox = $("#user_records"),
frmButton = $(this).find(":button");
if (formData) {
frmButton.prop('disabled', true);
$.ajax({
type: 'POST',
url: 'Components/myFunctions.cfc?method=findUsers',
data: formData,
dataType: 'json'
}).done(function(obj) {
if (obj.STATUS === 200) {
usersStorage = obj.DATA;
showUsers(usersStorage);
frmButton.prop('disabled', false);
} else {
recordsBox.empty(); // Clear the table.
fldMessage.show().addClass(obj.CLASS).html(obj.MESSAGE).delay(8000).fadeOut('slow').queue(function() {
$(this).removeClass(obj.CLASS).dequeue();
frmButton.prop('disabled', false);
});
}
}).fail(function(jqXHR, textStatus, errorThrown) {
alert('Error: ' + errorThrown);
});
}
}
function showAccounts(usersStorage) {
var usersTbl = "<table id='usersTbl' class='table table-bordered'><thead><tr><th>Last</th><th>First</th><th>Email</th><th class='text-center'>Edit</th></tr></thead><tbody>";
if(usersStorage){
for (var key in usersStorage) {
usersTbl += "<tr id='"+$.trim(usersStorage[key].RECORDID)+"'><td>"+$.trim(accountsStorage[key].LASTNAME)+"</td>";
usersTbl += "<td>"+$.trim(usersStorage[key].FIRSTNAME)+"</td>";
usersTbl += "<td>"+$.trim(usersStorage[key].EMAIL)+"</td>";
usersTbl += "<td class='text-center'><button class='btn btn-default btn-sm users_edit' data-toggle='collapse'></span></button></td></tr>";
}
}
usersTbl += "</tbody></table><div class='row'><div class='col-xs-12 col-sm-12 col-md-12 col-lg-12'><div id='users_message' class='alert message-submit'></div></div></div>";
$('#user_records').empty().append(usersTbl).show();
buildDataTable('usersTbl',[6,7,8],10);
}
function buildDataTable(tblID,columnsArray,displayLength) {
$("#"+tblID).DataTable({
//deferRender: true,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"iDisplayLength": Number(displayLength),
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': columnsArray }
],
"language": {
"emptyTable": "No records were found."
}
});
}<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="frmUsers" id="frmUsers">
<div class="row">
<div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
<select class="form-control" name="frm_filterby" id="frm_filterby" required>
<option value="">--Search By--</option>
<option value="1">Username</option>
<option value="2">Email</option>
<option value="3">Name</option>
</select>
</div>
<div class="form-group col-xs-12 col-sm-12 col-md-3 col-lg-3">
<input type="text" class="form-control" name="frm_search" id="frm_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 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>
<div id="user_records" class="table-responsive"></div>
这是ColdFusion函数：
<cffunction name="findUsers" access="remote" output="false" returnformat="JSON">
<cfargument name="frm_filterby" type="string" required="yes">
<cfargument name="frm_search" type="string" required="yes">
<cfset local.fnResults = structNew()>
<cfset local.fnRecUsers = structNew()>
<cftry>
<cfquery name="qryUsers" datasource="#dsn#">
SELECT RecID, FirstName, LastName, Email
FROM Users AS A
WHERE 1=1 AND
<cfswitch expression="#arguments.frm_filterby#">
<cfcase value="1"><!--- Username --->
UserName = <cfqueryparam value="#trim(arguments.frm_search)#" cfsqltype="cf_sql_varchar" maxlength="50" />
</cfcase>
<cfcase value="2"><!--- Email --->
Email = <cfqueryparam value="#trim(arguments.frm_search)#" cfsqltype="cf_sql_varchar" maxlength="80" />
</cfcase>
<cfdefaultcase><!--- Last or First or Last & First Name --->
FirstName + LastName LIKE <cfqueryparam value="%#trim(arguments.frm_search)#%" cfsqltype="cf_sql_varchar" maxlength="50" />
</cfdefaultcase>
</cfswitch>
ORDER BY Name
</cfquery>
<cfif qryUsers.recordcount NEQ 0>
<cfloop query="qryUsers">
<cfset local.fnRecUsers[RecID] = {
RecordID : qryUsers.RecID,
FirstName : qryUsers.FirstName,
LastName : qryUsers.LastName,
Email : qryUsers.Email
}>
</cfloop>
</cfif>
<cfset local.fnResults = {status : "200" , data : fnRecUsers}>
<cfcatch type="any">
<cfset local.fnResults = {status : "400", class : "alert-danger", message : "Error! Please contact your administrator."}>
</cfcatch>
</cftry>
<cfreturn fnResults>
</cffunction>
在将函数返回到findRecord函数obj.DATA之后，这里是一小段数据样本：
"DATA":{
"FB3064A7-A43D-4261-8B5C-285A637D82B9":{
"FIRSTNAME":"Mike",
"EMAIL":"mhart@yahoo.org",
"RECORDID":"23",
"LASTNAME":"Hart"
},
"BBD1669E-4FFB-4F45-A1CC-EB7CBD330A3E":{
"FIRSTNAME":"Timmy",
"EMAIL":"tbuck@gmail.com",
"RECORDID":"61",
"LASTNAME":"Draca"
},
"AF0243E5-E664-4E0C-B057-3389A06EF6F4":{
"FIRSTNAME":"Mark",
"EMAIL":"mjohnes@gmail.com",
"RECORDID":"26",
"LASTNAME":"Johnes"
},
"4B06553D-86E9-46BB-9B5B-8580E9027BE0":{
"FIRSTNAME":"Tammy",
"EMAIL":"thill@yhaoo.org",
"RECORDID":"43",
"LASTNAME":"Hill"
}
}
然后，我将该数据存储在全局JavaScript对象中。然后，如果用户决定更新记录数据，则可以使用JS对象中的数据。到目前为止，此方法还可以，但是如果可以改进或适合server-side processing，我想在这里提出任何建议。