Reload on change function

phillipkoneswaran · February 29

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 · March 1

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 · March 1

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 · March 1

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

kthorngren · March 1

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

Kevin

phillipkoneswaran · March 1

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

phillipkoneswaran · March 1

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 · March 1

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 · March 1

"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 · March 1

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 · March 1

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 · March 1

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 · March 1

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 · March 1

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 · March 1

here is the console log

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

phillipkoneswaran · March 1

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 · March 2

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

Reload on change function

Reload on change function

Answers

Howdy, Stranger!

Categories

DataTables

Reload on change function

Reload on change function

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables