Reload on change function

phillipkoneswaran

I've been struggling with a problem for a number of days now. Read all the similar posts and can't seem to get this to work.

On change of form, DataTable is reloaded
I checked the console and it appears all good. Data is returned properly
However I get an error: DataTables warning: table id=example - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

I checked the link, and made some changes, to no avail. Could someone please point me in the right direction?

$(document).ready(function(){
    $('#142_get').change(function () {
                var typefilter = $("#typefilter").val();
                var datefilter_enddate = $("#datefilter_enddate").val(); 
                var datefilter_startdate = $("#datefilter_startdate").val();
        $.ajax({
            type: 'POST',
            url: '142_get.php',
            data: "typefilter="+typefilter+"&datefilter_enddate="+datefilter_enddate+"&datefilter_startdate="+datefilter_startdate,
            success: function (data) {          
                $('#example').DataTable({                   
                    destroy: true,
                       data: data,
                    columns: [
                         { data: "id" },
                         { data: "eui" },
                         { data: "callerid" },
                         { data: "date_called" },
                         { data: "type" },
                         { data: "billing_item_id" },
                         { data: "action" },
                    ],
                });
            }
        })
    });
});

phillipkoneswaran

console log shows data returned as follows:

{"draw":0,"iTotalRecords":8620,"iTotalDisplayRecords":1062,"aaData":[{"id":"8622","eui":"test","callerid":"450XXXXXXX","date_called":"2024-02-29 13:43:27","type":"Test Call","billing_item_id":null,"action":null},{"id":"8612","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-29 00:11:54","type":"Test Call","billing_item_id":null,"action":null},{"id":"8613","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-29 00:11:23","type":"Test Call","billing_item_id":null,"action":null},{"id":"8611","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-29 00:07:57","type":"Test Call","billing_item_id":null,"action":null},{"id":"8610","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-29 00:06:47","type":"Test Call","billing_item_id":null,"action":null},{"id":"8609","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-29 00:05:11","type":"Test Call","billing_item_id":null,"action":null},{"id":"8604","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-28 17:58:01","type":"Test Call","billing_item_id":null,"action":null},{"id":"8603","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-28 17:47:31","type":"Test Call","billing_item_id":null,"action":null},{"id":"8602","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-28 17:46:10","type":"Test Call","billing_item_id":null,"action":null},{"id":"8601","eui":"Not Found","callerid":"450XXXXXXX","date_called":"2024-02-28 17:40:16","type":"Test Call","billing_item_id":null,"action":null}]}

kthorngren

Your JSON looks like this:

    "aaData": [
        {
            "id": "8622",
            "eui": "test",
            "callerid": "450XXXXXXX",
            "date_called": "2024-02-29 13:43:27",
            "type": "Test Call",
            "billing_item_id": null,
            "action": null
        },

You are loading the Datatable data with data: data,. Looks ike you should be using data: aaData, since there is not a data object.

Kevin

phillipkoneswaran

I tried that, seems to make no difference. I tried changing that, but same result.

kthorngren

Sorry, use data: data.aaData, to point to the row data.

Kevin

phillipkoneswaran

So now the error is gone. However the table does not update with data.

phillipkoneswaran

Just as an update, here is what I have now

$(document).ready(function(){
    $('#142_get').change(function () {
                var typefilter = $("#typefilter").val();
                var datefilter_enddate = $("#datefilter_enddate").val(); 
                var datefilter_startdate = $("#datefilter_startdate").val();
        $.ajax({
            type: 'POST',
            url: '142_get.php',
            data: "typefilter="+typefilter+"&datefilter_enddate="+datefilter_enddate+"&datefilter_startdate="+datefilter_startdate,
            success: function (data) {          
                $('#example').DataTable({                   
                    destroy: true,
                       data: data.aaData,
                    columns: [
                         { data: "id" },
                         { data: "eui" },
                         { data: "callerid" },
                         { data: "date_called" },
                         { data: "type" },
                         { data: "billing_item_id" },
                         { data: "action" },
                    ],
                });
            }
        })
    });
});

kthorngren

However the table does not update with data.

Use the browser's network inspector to verify the JSON response is what you are expecting when the change event executes.

If the first data set and the second contain some of the same data its possible, due to Datatables sorting, the first page shows the same rows.

If you still need help then please post a link to your page or test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

phillipkoneswaran

"If the first data set and the second contain some of the same data its possible, due to Datatables sorting, the first page shows the same rows."

That is exactly what is happening .

kthorngren

If you aren't expecting the two datasets to have some of the same data then you will need to debug your server script queries.

Kevin

phillipkoneswaran

I think there is something wrong with this part:

                    columns: [
                         { data: "id" },
                         { data: "eui" },
                         { data: "callerid" },
                         { data: "date_called" },
                         { data: "type" },
                         { data: "billing_item_id" },
                         { data: "action" },
                    ]

Reason I think that is onchange, the table does properly update result quantities, pagination is updated etc. Just the table fields are simply empty.

kthorngren

Its hard to say without seeing the problem. Using the browser's network inspector compare the differences between the JSON responses. Do you see anything different? You can post the working and non-working responses here.

I think there is something wrong with this part:

If your columns.data definition is wrong then you would get errors, something like DataTables warning: table id={id} - Requested unknown parameter....

I built this example loosely based on what you are doing:
https://live.datatables.net/havavemu/1/edit

The environment doesn't have code to supply ajax data parameters as filters so the fetched data is the same each time. There is a flag that splits the data and alternates between the first half and second half. Its simply to show the technique you are using works.

Kevin

phillipkoneswaran

How could I have missed this? I knew something was missing. All I needed to add was

dataType: "json",

Thank you very much! Grateful for your help.

phillipkoneswaran

Seems I might have a new issue. So when the table reloads, which now works perfectly, only one page with 10 results are displayed. Pagination only shows 1 page. Results only say 10. However I know there should be hundreds if not thousands.

The server side processing page returns the results as follows:

$response = array(
  "draw" => intval($draw),
  "iTotalRecords" => $totalRecords,
  "iTotalDisplayRecords" => $totalRecordwithFilter,
  "aaData" => $data
);
echo json_encode($response);

What could be wrong?

phillipkoneswaran

here is the console log

{draw: 0, iTotalRecords: 8648, iTotalDisplayRecords: 1073, aaData: Array(10)}

phillipkoneswaran

Further update on this.

If I change this to

data: data.data,

and I remove the following line completely

dataType: "json",

I get pagination info, correct qty etc properly. But no actual data. Table is empty.

If I do

data: data.aaData,

and add back the

dataType: "json",

Then table populates first page, but pagination is broken. Meaning only 1st page with 10 results.

kthorngren

Your above code is not using server side processing however the response does provide the server side response. You are using jQuery ajax() to fetch the data. If you want server side processing then you will need to use ajax and serverSide.

This example shows how to send ajax.data parameters using server side processing.

Your server script is returning legacy server side processing parameters:

$response = array(
  "draw" => intval($draw),
  "iTotalRecords" => $totalRecords,
  "iTotalDisplayRecords" => $totalRecordwithFilter,
  "aaData" => $data
);

You may need to use the current parameter names for DT 2.0 as described in the Server Side Processing protocol. For example:

$response = array(
  "draw" => intval($draw),
  "recordsTotal" => $totalRecords,
  "recordsFiltered" => $totalRecordwithFilter,
  "data" => $data
);

Kevin