Datatable - getting net::ERR_CONNECTION_CLOSED when datatable try to make AJAX request

Question

I am using the Datatable AJAX to get the data from the server side and it is working fine on localhost but when I uploaded this application to a live server I am getting this error and datatable is not loading the data,

net::ERR_CONNECTION_CLOSED [Along with query string]

My JS code:

$(".employee-table").DataTable({
        processing: true,
        serverSide: true,
        respoonsive: true,
        ajax: getBaseUrl() + "employee/load_employees",
        dom:'<"col-sm-6"l><"col-sm-6 align-right"f>rt<"col-sm-6"i><"col-sm-6 align-right"p>',
        scrollY: "200",
        scrollX: true,
        oLanguage: { sProcessing: preloaderHTML },

        columnDefs: [
            {
                targets: [0],
                visible: false,

            },
            {
                targets: [-1],
                visible: true,
                render: function(data, type, row) {
                    return `
                            <a href="${getBaseUrl() + 'employee/profile/' + row[0]}" class="btn btn-warning btn-xs waves-effect" data-toggle="tooltip" data-placement="left" title="" data-original-title="View Employee"><i class="material-icons">remove_red_eye</i></a>
                            <a href="${getBaseUrl() + 'employee/edit/' + row[0]}" class="btn btn-primary btn-xs waves-effect" data-toggle="tooltip" data-placement="left" title="" data-original-title="Edit Employee"><i class="material-icons">edit</i></a>
                            `;
                }
            },
            {
                targets: [28],
                visible: true,
                render: function(data, type, row) {
                    return `<span class="badge ${ getBadgeClass(data) }">${data}</span>`;
                }
            },
            {
                targets: [27],
                visible: true,
                render: function(data, type, row) {
                    return `<span class="badge ${ data === "c" ? "bg-green" : "bg-red" }">${data === "c" ? "Confirmed" : "Probation"}</span>`;
                }
            },

            {
                targets: [23],
                visible: true,
                render: function(data, type, row) {
                    let badgeClass = "bg-green";
                    if (data === "CONTRACTUAL") {
                        badgeClass = "bg-orange";
                    }
                    if (data === "TRAINEE") {
                        badgeClass = "bg-blue";
                    }

                    return `<span class="badge ${ badgeClass }">${data}</span>`;
                }
            },


        ],
        order: [0 ,'desc']
    });

When I put that URL in a browser and run I get proper data. Any help would be appreciated.

Might be a dumb question, but did you change the database connection settings for the live server, when taking it from `localhost`? — dmanexe, Mar 08 '19 at 11:39
Corrected that but no luck but it is working fine on my local machine. — Ropali Munshi, Mar 08 '19 at 11:46
Is `getBaseUrl()` function returns a '/' at the end of the baseUrl string — b0r1s, Mar 08 '19 at 11:20

score 4 · Answer 1 · answered Mar 03 '21 at 05:45

Looks like you have so many columns, this may hit the GET params characters limit

so its allways better to use POST method

 $(".employee-table").DataTable({
            ...
            ajax: {
                url: getBaseUrl() + "employee/load_employees",
                method: 'post',
            }
            ...
        });

ref: Max size of URL parameters in _GET

Datatable - getting net::ERR_CONNECTION_CLOSED when datatable try to make AJAX request

1 Answers1