如何在jquery数据表上对大型数据集进行服务器端处理

时间:2016-06-27 11:42:16

标签: jquery datatables

我正在尝试使用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,
    });

1 个答案:

答案 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" }
                ],
        });