0
我有一个包含了年，月，国家和城市组合框数据过滤器。所有组合框的项目有一个选择所有（所有年份，所有月份，所有国家和所有城市）。处理大量数据的jQuery
当我选择一个过滤器，我将数据发送到服务器和我得到的数据JSON对象，这是由JQuery的处理。
的问题就来了，如果你选择的所有数据 - 服务器将返回一个JSON对象有三万记录（及以上）和浏览器，包括动画演出（装载机），冻结和一切花费的时间太长。
这是数据过滤器的HTML（有些选择是通过AJAX填写）
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title" data-label="Filter data"></h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-md-3" data-label="Year"></div>
<div class="col-md-3" data-label="Month"></div>
<div class="col-md-3" data-label="Country"></div>
<div class="col-md-3" data-label="City"></div>
</div>
<div class="row">
<div class="col-md-3">
<select id="cmbYear">
<option value="0" data-label="All years"></option>
</select>
</div>
<div class="col-md-3">
<select id="cmbMonth">
<option value="0" data-label="All year"></option>
<option value="1" data-label="January"></option>
<option value="2" data-label="February"></option>
<option value="3" data-label="March"></option>
<option value="4" data-label="April"></option>
<option value="5" data-label="May"></option>
<option value="6" data-label="June"></option>
<option value="7" data-label="July"></option>
<option value="8" data-label="August"></option>
<option value="9" data-label="September"></option>
<option value="10" data-label="October"></option>
<option value="11" data-label="November"></option>
<option value="12" data-label="December"></option>
</select>
</div>
<div class="col-md-3">
<select id="cmbCountry">
<option value="0" data-label="All countries"></option>
</select>
</div>
<div class="col-md-3">
<select id="cmbCity">
<option value="0" data-label="All cities"></option>
</select>
</div>
</div>
<br/>
<div class="row">
<div class="col-md-12">
<button id="btnFilterData" data-label="Filter data" class="btn btn-primary btn-lg pull-right"></button>
</div>
</div>
</div>
这是一个jQuery脚本：
$(document).ready(function() {
$('#btnFilterData').click(function() {
GetFilteredData();
});
});
function GetFilteredData() {
$.ajax({
url: 'some-file.php',
data: {
year: $('#cmbYear').val(),
month: $('#cmbMonth').val(),
countryid: $('#cmbCountry').val(),
cityid: $('#cmbCity').val()
},
type: 'post',
async: true,
success: function (data) {
if (data.IsError) {
ShowErrorDialog(data.Error);
}
else {
$('#tableRawData').find('tr:gt(0)').remove();
if (data.Data != null) {
for (var i = 0; i < Object.keys(data.Data).length; i++) {
var obj = data.Data[i];
var newRow = '<tr><td>' + obj.Date+ '</td><td>' + obj.Country + '</td><td>' + obj.City + '</td><td>' + obj.Loan+ '</td><td>' + obj.Paid+ '</td><td>' + obj.Remains+ '</td><td data-label="' + obj.Note + '"></td></tr>';
$('#tableRawData').append(newRow);
}
}
}
},
complete: function() {
HideWaitDialog();
}
});
什么办法如何使处理更快还是更有效？在理想的情况下，不冻结浏览器和动画加载器...
也许在结果中添加分页，以便一次只显示几个分页？我怀疑任何用户将需要*同时*看到30,000条记录。 – David
足够容易设置某种限制，并且如果存在比限制返回消息更多的结果，告诉用户缩小过滤器 – charlietfl
实际上不需要显示所有记录。这只是外部的限制:-)但我的客户希望有可能显示所有数据（我的意思是这是不正确的解决方案，但他想要它） – Davecz