我正在尝试使用jquery datatable加载大型数据集。我有超过2000行,需要时间来渲染。我使用以下代码
src/main/webapp/WEB-INF
我不确定如何在我的代码中实现following。
我尝试了以下但是它似乎没有选择post params并且它没有在回调中设置设置以一次渲染几个
table_impact = $('#table_impact').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
"order": [[ 1, "desc" ]],
"ajax": {
url: base_url + 'api/change/self-serve',
type: "POST",
data : function ( d ) {
d.action = "impact";
d.period = $("#group_period label.active").data("value");
coordinator_group = $(".js-basic-multiple-coordinator-group-group").val();
if(coordinator_group && coordinator_group.length > 0){
d.coordinator_group = [];
for( key in coordinator_group){
var obj = coordinator_group[key];
d.coordinator_group.push(obj);
}
}
change_manager_group = $(".js-basic-multiple-change-manager-group").val();
if(change_manager_group && change_manager_group.length > 0){
d.change_manager_group = [];
for( key in change_manager_group){
var obj = change_manager_group[key];
d.change_manager_group.push(obj);
}
}
company = $(".js-basic-multiple-company").val();
if(company && company.length > 0){
d.company = [];
for( key in company){
var obj = company[key];
d.company.push(obj);
}
}
status = $(".js-basic-multiple-ticket-status").val();
if(status && status != 'null' && status.length > 0){
d.status = [];
if(typeof status == "string"){
d.status = status.split(",");
}else{
for( key in status){
var obj = status[key];
d.status.push(obj);
}
}
}
ops_cat_tier1 = $(".js-basic-multiple-ops-cat-tier1").val();
if(ops_cat_tier1 && ops_cat_tier1.length > 0){
d.ops_cat_tier1 = [];
for( key in ops_cat_tier1){
var obj = ops_cat_tier1[key];
d.ops_cat_tier1.push(obj);
}
}
pou_id = $(".js-basic-multiple-pou").val();
if(pou_id && pou_id.length > 0){
d.pou_id = [];
for( key in pou_id){
var obj = pou_id[key];
d.pou_id.push(obj);
}
}
},
},
columns: [
{ "data": "CHANGE_ID" },
{ "data": "SCHEDULED_START_DATE_GMT" },
{ "data": "SCHEDULED_END_DATE_GMT" },
{ "data": "POU_ID" },
{ "data": "SUMMARY" },
{ "data": "STATUS" },
{ "data": "COMPANY" },
{ "data": "CUSTOMER_PID" },
{ "data": "SITE_GROUP" },
{ "data": "SERVICE_STATUS" },
{ "data": "CIRCUIT_ID" },
{ "data": "ADDRESS" },
{ "data": "SERVICE_IMPACT" },
{ "data": "SERVICE_TYPE" },
{ "data": "SERVICE_MODEL" },
{ "data": "OTHER_REF" },
{ "data": "TAIL_REF" },
{ "data": "KEY_OWNER" },
{ "data": "RECEIVES_COMMS" },
],
responsive:true,
processing:true,
deferRender: true,
searchHighlight: true,
//scrollY: 200,
deferRender: true,
scroller: true,
"bSortClasses": false,
serverSide: true,
searching: false,
});
答案 0 :(得分:0)
我设法让它发挥作用
table_summary = $('#table_summary').DataTable({
dom: 'lBfrtip',
buttons: [
'copy', {
extend: 'csv',
title: 'Summary of Changes'
}, {
extend: 'excelHtml5',
title: 'Summary of Changes'
}, {
extend: 'pdf',
title: 'Summary of Changes'
}, 'print'
],
//serverSide: true,
//ordering: false,
//searching: false,
deferRender: true,
searchHighlight: true,
ajax: {
url: base_url + 'api/change/self-serve',
type: "POST",
data : function(d){
d.action = "summary";
d.period = $("#group_period label.active").data("value");
coordinator_group = $(".js-basic-multiple-coordinator-group-group").val();
if(coordinator_group && coordinator_group.length > 0){
d.coordinator_group = [];
for( key in coordinator_group){
var obj = coordinator_group[key];
d.coordinator_group.push(obj);
}
}
change_manager_group = $(".js-basic-multiple-change-manager-group").val();
if(change_manager_group && change_manager_group.length > 0){
d.change_manager_group = [];
for( key in change_manager_group){
var obj = change_manager_group[key];
d.change_manager_group.push(obj);
}
}
company = $(".js-basic-multiple-company").val();
if(company && company.length > 0){
d.company = [];
for( key in company){
var obj = company[key];
d.company.push(obj);
}
}
status1 = $("#ticket_status").val();
if(status1 && status1 != 'null' && status1.length > 0){
d.status = [];
if(typeof status1 == "string"){
d.status = status1.split(",");
}else{
for( key in status1){
var obj = status1[key];
d.status.push(obj);
}
}
}
ops_cat_tier1 = $(".js-basic-multiple-ops-cat-tier1").val();
if(ops_cat_tier1 && ops_cat_tier1.length > 0){
d.ops_cat_tier1 = [];
for( key in ops_cat_tier1){
var obj = ops_cat_tier1[key];
d.ops_cat_tier1.push(obj);
}
}
pou_id = $(".js-basic-multiple-pou").val();
if(pou_id && pou_id.length > 0){
d.pou_id = [];
for( key in pou_id){
var obj = pou_id[key];
d.pou_id.push(obj);
}
}
impact = $(".js-basic-multiple-impact").val();
if(impact && impact.length > 0){
d.impact = [];
for( key in impact){
var obj = impact[key];
d.impact.push(obj);
}
}
change_id = $(".js-basic-multiple-crq").val();
if(change_id && change_id.length > 0){
d.change_id = [];
for( key in change_id){
var obj = change_id[key];
d.change_id.push(obj);
}
}
project_ref = $(".js-basic-multiple-project").val();
if(project_ref && project_ref.length > 0){
d.project_ref = [];
for( key in project_ref){
var obj = project_ref[key];
d.project_ref.push(obj);
}
}
}
},
columns: [
{ "data": "CHANGE_ID" },
{ "data": "SCHEDULED_START_DATE_GMT" },
{ "data": "SCHEDULED_END_DATE_GMT" },
{ "data": "POU_ID" },
{ "data": "OPS_CAT_TIER1" },
{ "data": "STATUS" },
{ "data": "CHANGE_MANAGER" },
{ "data": "CHANGE_MANAGER_GROUP" },
{ "data": "IMPACT" },
{ "data": "SUMMARY" },
{ "data": "CHANGE_COORDINATOR" },
{ "data": "COORDINATOR_GROUP" },
{ "data": "CHANGE_LOCATION" },
{ "data": "CUSTOM_CLASS" },
{ "data": "URGENCY" },
{ "data": "RISK_LEVEL" },
{ "data": "INCIDENT_REF" },
{ "data": "PROJECT_REF" },
{ "data": "CUSTOMER_REF" }
],
});