Reload on change function

Reload on change function

phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

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" },
                    ],
                });
            }
        })
    });
});

This question has an accepted answers - jump to answer

Answers

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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}]}
    
  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

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

    Kevin

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

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

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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" },
                        ],
                    });
                }
            })
        });
    });
    
    
  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    "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 :(.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932
    Answer ✓

    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

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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.

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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?

  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    here is the console log

    {draw: 0, iTotalRecords: 8648, iTotalDisplayRecords: 1073, aaData: Array(10)}
    
  • phillipkoneswaranphillipkoneswaran Posts: 11Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 21,260Questions: 26Answers: 4,932

    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

Sign In or Register to comment.