AJAX：jQuery DataTables（服务器端）没有获得任何请求（GET或POST）数据

Question

I'm attempting to print a simple DataTables which I want to update when I use the search/filters on any column (or the "entire table" one in the top right of the page). When I click on a column header (to sort) the request goes through (though the page still says "processing" indefinitely). When I type anything into a filter it says "processing" indefinitely, but no request is passed to the server.

Here are the scripts:

client.php

<!-- jQuery and DataTables JS files, including CSS, are included here -->
<table id="employee-table" class="table-striped">
<thead>
<tr>
    <th>First</th>
    <th>Last</th>
    <th>DOB</th>
</tr>
<tr>
    <th>First</th>
    <th>Last</th>
    <th>DOB</th>
</tr>
</thead>
</table>
<script type="text/javascript">
jQuery(document).ready(function() {

    jQuery("#employee-table").dataTable({
        processing: true,
        serverSide: true,
        ajax: {
            url: "datatable.php",
            type: 'POST'
        }
    }).columnFilter({
        sPlaceHolder: "head:after",
        aoColumns: [
            { type: "text" },
            { type: "text" },
            { type: "text" }
        ]
    });
});
</script>

datatable.php

file_put_contents("debug.txt", $_REQUEST);

echo '{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
    [
        "Angelica",
        "Ramos",
        "1986-01-01"
    ],
    [
        "Ashton",
        "Cox",
        "1987-01-01"
    ],
    [
        "Test",
        "Third",
        "1989-01-01"
    ]
]
}';

As you can see, all I do on the server-side script is print all requested data to a file so I can check it. The problem is, no matter what I type into the filter boxes no request data goes through. Here is a visual:

Here is the output to the debug.txt. NOTE that this is what is loaded into the file on the initial load of client.php, it is NOT changed when you type anything into any search boxes:

Array
(
[draw] => 1
[columns] => Array
    (
        [0] => Array
            (
                [data] => 0
                [name] => 
                [searchable] => true
                [orderable] => true
                [search] => Array
                    (
                        [value] => 
                        [regex] => false
                    )

            )

        [1] => Array
            (
                [data] => 1
                [name] => 
                [searchable] => true
                [orderable] => true
                [search] => Array
                    (
                        [value] => 
                        [regex] => false
                    )

            )

        [2] => Array
            (
                [data] => 2
                [name] => 
                [searchable] => true
                [orderable] => true
                [search] => Array
                    (
                        [value] => 
                        [regex] => false
                    )

            )

    )

[order] => Array
    (
        [0] => Array
            (
                [column] => 0
                [dir] => asc
            )

    )

[start] => 0
[length] => 10
[search] => Array
    (
        [value] => 
        [regex] => false
    )

)

What am I missing to get the filters to work correctly? I assume my client-side DataTables JavaScript is misconfigured, but I can't tell how. My searches seem to be only pulling up "legacy" DataTables solutions instead of the simplified newer version they have.

Any help is greatly appreciated!

Answer 1

Try as below:

client.php

$(document).ready(function() {
    var oTable = $('#employee-table').dataTable({
            "bJQueryUI": true,
            "bProcessing": true,
            "bServerSide": true,
            "bRedraw": true,
            "sAjaxSource": "datatable.php",
            "aoColumns": [
                {"mDataProp": "first"},
                {"mDataProp": "last"},
                {"mDataProp": "dob"},
            ],
            "aaSorting": [[0, "asc"]]
    });
});

datatable.php

Please check the below link and configure your database setting in the code provided by datatable.

Server Side Code