Why is Datatables not working after uploading to a web server?

vintage2019

I have two pages using datatables using different configurations.
datatables1.php

$(document).ready(function() {
    $('#example').DataTable( {
        processing: true,
        serverSide: true,
        ajax: "includes/ajax-employees.php",
        dom: 'lBfrtip',
        buttons: [{
            extend: 'print',
            title: 'List of Employees',
            className: 'btn btn-default',
            text: '<i class="lnr lnr-printer"> Print</i>'
        }],
        pageLength: 20,
        lengthMenu: [
            [20, 40, 60, 80, 100, -1],
            ['20', '40', '60', '80', '100', 'All']
        ],
        language: {
            lengthMenu: "_MENU_ Show",
            search: "_INPUT_",
            searchPlaceholder: "Search"
        },
        // Clickable row
        fnDrawCallback: function () {
            $('#example tbody tr').click(function () {
                var table = $('#example').dataTable(),
                    position = table.fnGetPosition(this),
                    id = table.fnGetData(position)[0];
                document.location.href = 'employees-payslip.php?id=' + id;
            })
        }
    });
});

datatables2.php

var name = "<?php echo $row['fullname']; ?>",
    id = "<?php echo $row['ID']; ?>";
$(document).ready(function() {
    $('#table').DataTable( {
        processing: true,
        serverSide: true,
        ajax: {
            url: "includes/ajax-payslips.php",
            data: {
                table: "<?php echo 'emp_'.$_GET['id'];?>"
            }
        },
        ordering: false,
        dom: 'Brtip',
        buttons: [
        {
            extend: 'print',
            title: 'Payroll',
            className: 'btn btn-default',
            text: '<i class="lnr lnr-printer"> Print All</i>'
        }
        ],
        pageLength: 10,
        scrollX: true,
        columnDefs: [
        {
            targets: -1,
            data: null,
            defaultContent: "<button class='btn btn-default'><i class='lnr lnr-printer'></i> Print</button>"
        }
        ]
    });
    $('#table tbody').on( 'click', 'button', function () {
        var table = $('#table').DataTable(),
            d = table.row( $(this).parents('tr') ).data();
        window.open("print.php?id="+id+"&name="+name+"&date="+d[1]+"&bsal="+d[7]+"&ot="+d[9]+"&allw="+d[10]+"&cola="+d[11]+"&tmb="+d[12]+"&ut="+d[14]+"&late="+d[16]+"&tax="+d[17]+"&sssp="+d[18]+"&sssl="+d[19]+"&hdmfp="+d[20]+"&hdmfl="+d[21]+"&hdmfh="+d[22]+"&hdmft="+d[23]+"&phic="+d[24]+"&total="+d[25],"Print","scrollbars=no,width=1000,height=650")
    });
});

Both page works on localhost but only datatables1.php only works in the web server.
No helpful logs from the web hosting site.
No active chromium extension.
Chromium's dev tools returns "GET (insert xhr here) net::ERR_CONNECTION_CLOSED."
Also tried using Firefox but also cannot retrieve xhr data.

I think it has something to do with this line.

ajax: {
    url: "includes/ajax-payslips.php",
    data: {
    table: "<?php echo 'emp_'.$_GET['id'];?>"
    }
},

Any thoughts what the problem is?
Thanks.

kthorngren

ERR_CONNECTION_CLOSED

Looks like your server is closing the session. That would be something to check on your server to see why its closing the connection instead of processing the request.

Kevin

vintage2019

I recently noticed that it gets an error every time I use https but when I tried using http Datatables returned rows with no problems.