DataTables warning: table id=submitted - Ajax error. For more information about this error, please see http://datatables.net/tn/7

Question

DataTables warning: table id=submitted - Ajax error. For more information about this error, please see http://datatables.net/tn/7

I have a 2 datatables and when I tried to apply serverSide:true on both of them, I encountered the error above, they load on same time.

First Datatable

$('#submitted').DataTable({                               
            "language": {
                "emptyTable": "No orders with this status"
            },
            processing: true, 
            serverSide: true,
            ajax: {
                url: '/Orders/SubmittedList',
                dataSrc: function (d) {                                                
                    var response = d;
                    if (typeof d.response != 'undefined') {
                        response = d.response;
                    }                        
                    return response.data;
                },
                start: 0,
                length: 10,
                draw: 1
            },columns: [
                { targets: 0, data: 'jobNumber' },
                { targets: 1, data: 'podiatrist' },
                { targets: 2, data: 'clinic' },
                { targets: 3, data: 'subject' },
                { targets: 4, data: 'type' },
                { targets: 5, data: 'orderDate' },
                { targets: 6, data: 'etsDate' },
                { targets: 7, data: 'status' },
                {
                    targets: 8,
                    data: 'orderID',
                    render: function (data, type, row, meta) {                            
                        return "<a href='/Orders/Prescription?orderId=" + data + "' class='btn btn-outline-secondary btn-sm'>View</a>";

                    }
                }

            ],columnDefs : [
                {
                    targets: 1,
                    visible: showHideAdmin
                },
                {
                    targets: 4,
                    visible: showHideAdminType
                }
            ]

        });

Second DataTable

$('#completed').DataTable({
            "language": {
                "emptyTable": "No orders with this status"
            },                                
            processing: true,                
            serverSide: true,
            ajax: {
                url: '/Orders/CompletedList',                   
                dataSrc: function (d) {                                                
                    var response = d;
                    if (typeof d.response != 'undefined') {
                        response = d.response;
                    }
                    return response.data;
                },
                start: 0,
                length: 10,
                draw: 1
            },columns: [
                { targets: 0, data: 'jobNumber' },
                { targets: 1, data: 'podiatrist' },
                { targets: 2, data: 'clinic' },
                { targets: 3, data: 'subject' },
                { targets: 4, data: 'extremity' },
                { targets: 5, data: 'orderDate' },
                {
                    targets: 6,
                    data: 'orderID',
                    render: function (data, type, row, meta) {                            
                        return "<a href='/Orders/Prescription?orderId=" + data + "' class='btn btn-outline-secondary btn-sm'>View</a>";

                    }
                }

            ],columnDefs : [
                {
                    targets: 1,
                    visible: showHideAdmin
                }
            ]
        });

I've search so many article about it, but still no luck. I hope someone can help me about this.

Thank you in advance.

Answer 1

I figure it out, I check on developer tools and I have a long query string and I add this on web.config and it works fine.

<requestLimits maxQueryString="32768" />