项目背景
因某页面显示数据条数较多后会影响页面加载效率。
所以，需要用分布进行异步式的调用显示。
用到的技术和JS文件
代码实现
JS:<script src="/static/assets/global/Pagination/js/jquery.jqpagination.min.js"></script>
CSS:<link href="/static/assets/global/Pagination/css/jqpagination.css" rel="stylesheet" type="text/css" />
$(document).ready(function() {
$('.pagination').jqPagination({
link_string : '/?page={page_number}',
max_page : {{ allPage }},
paged : function(page) {
var onepage = $('#onepage').val();
$.ajax({
url: {% url "pagings" %},
type: 'GET',
dataType: 'json',
data: {'curPage': page,'onepage':onepage},
success:function (data) {
var tbody = "";
if(data!=""){
$("#temptable tr:gt(0)").remove();
... ...
... ...
... ...
}
if (data[i][3] =='xxx') {
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
}
else if (data[i][3] =='xxx') {
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
}
else {
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn red btn-outline'>暂无</button></td></tr>";
}
tbody+=trs;
}
$("#temptable").append(tbody);
}
}
})
}
});
});
$('#onepage').change(function () {
var onepage = $('#onepage').val();
$.ajax({
url: {% url "pagings" %},
type: 'GET',
dataType: 'json',
data: {'onepage':onepage},
success:function (data) {
var tbody = "";
if(data!=""){
$("#temptable tr:gt(0)").remove();
for(var i=0;i<data.length;i++){
... ...
... ...
... ...
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
}
else if (data[i][3] =='xxx') {
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn green btn-outline' onclick='openDialog(\""+id+"\",\""+applytype+"\")'>查看</button></td></tr>";
}
else {
trs = "<tr class='portlet-body'><td style='display:none'>" + data[i][0] + "</td><td>" + data[i][1] + "</td><td>" + data[i][2] + "</td><td>" + data[i][3] + "</td><td width='30%'>" + data[i][4] + "</td><td>" + data[i][5] + "</td><td>" + submittime + "</td><td>" + status + "</td><td type=date>" + endtime + "</td><td><button class='btn red btn-outline'>暂无</button></td></tr>";
}
tbody+=trs;
}
$("#temptable").append(tbody);
}
}
})
})
关键代码拼接截图
