Why the table content it's not changed ?

ghesarbu · October 2023

Link to test case: 86.127.36.60/spotter/app_viz/spot_1624.php
After the month it's selected (from select box), the content table and chart need to be changed. But the content table not changed.
My select:

`<select class="form-control dropdown" id="dd" name="dd" onchange="selectSpecie()" style="width:200px;margin-left:20px;">

                                                   <option value="1">January</option>
                                                   <option value="2">February</option>
                                                   <option value="3">March</option>
                                                   <option value="4">April</option>
                                                   <option value="5">May</option>
                                                    <option value="8">August</option>
                                                   <option value="9">September</option>

                                                  </select>

`

`
function selectSpecie() {
    var x1 = document.getElementById('dd').value;

    $.ajax({
        url:"showResults.php",
        method: "POST",
        data:{id1 : x1},
        success:function(data){
            //Replace the table content with the data received through ajax
                $("#ans").html(data);
            //Initialize DataTables with the required options

           var table = new DataTable('#myTable', {
            destroy: true,
     dom: 'Bfrtip',
             buttons: [
            {
        extend: 'excel',
        text: 'Excel',
        exportOptions: {
          rows: function(idx, data, node) {
            let found = false;
            if ($("#exportSelected").is(":checked")) {
              let selectedRowIndexes = table.rows('.selected').indexes();
              for (let index = 0; index < selectedRowIndexes.length; index++) {
                if (idx == selectedRowIndexes[index]) {
                  found = true;
                  break;
                }
              }
              return found;
            } else {
              return true;
            }
          }
        }
      }
        ],
        columnDefs: [
        {
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }
    ],
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    order: [[1, 'asc']]
   });
        }
    });
   }
`

allan · October 2023

DataTables retains a cache to all initialised DataTables, so you need to destroy the old table first. Otherwise, it things you already have a table with that ID, and since you have destroy: true it will be reinstating the old table over the one you created with $("#ans").html(data);.

Use:

DataTable
    .tables( { visible: true, api: true } )
    .destroy();

Before you set the HTML, and that should do it.

Allan

ghesarbu · October 2023

Thank you very much !
Now, the table content it's changed, but the table options are not loaded

function selectSpecie() {
    var x1 = document.getElementById("dd").value;

    $.ajax({
        url:"showResults.php",
        method: "POST",
        data:{id1 : x1},
        success:function(data){

            //Initialize DataTables with the required options

           var table = new DataTable('#myTable', {

     dom: 'Bfrtip',
             buttons: [
            {
        extend: 'excel',
        text: 'Excel',
        exportOptions: {
          rows: function(idx, data, node) {
            let found = false;
            if ($("#exportSelected").is(":checked")) {
              let selectedRowIndexes = table.rows('.selected').indexes();
              for (let index = 0; index < selectedRowIndexes.length; index++) {
                if (idx == selectedRowIndexes[index]) {
                  found = true;
                  break;
                }
              }
              return found;
            } else {
              return true;
            }
          }
        }
      }
        ],
        columnDefs: [
        {
            orderable: false,
            className: 'select-checkbox',
            targets: 0
        }
    ],
    select: {
        style: 'multi',
        selector: 'td:first-child'
    },
    order: [[1, 'asc']]
});
   // Make the table visible and expose the DataTables API.
table.tables({visible: true, api: true});

// Destroy the DataTables object.
table.destroy();
   //Replace the table content with the data received through ajax
                $("#ans").html(data);
        }
    });
}

allan · October 2023

If I reformat your code to correct the indentation it looks like:

function selectSpecie() {
  var x1 = document.getElementById("dd").value;

  $.ajax({
    url: "showResults.php",
    method: "POST",
    data: { id1: x1 },
    success: function (data) {
      //Initialize DataTables with the required options

      var table = new DataTable("#myTable", {
        dom: "Bfrtip",
        buttons: [
          {
            extend: "excel",
            text: "Excel",
            exportOptions: {
              rows: function (idx, data, node) {
                let found = false;
                if ($("#exportSelected").is(":checked")) {
                  let selectedRowIndexes = table.rows(".selected").indexes();
                  for (
                    let index = 0;
                    index < selectedRowIndexes.length;
                    index++
                  ) {
                    if (idx == selectedRowIndexes[index]) {
                      found = true;
                      break;
                    }
                  }
                  return found;
                } else {
                  return true;
                }
              },
            },
          },
        ],
        columnDefs: [
          {
            orderable: false,
            className: "select-checkbox",
            targets: 0,
          },
        ],
        select: {
          style: "multi",
          selector: "td:first-child",
        },
        order: [[1, "asc"]],
      });
      // Make the table visible and expose the DataTables API.
      table.tables({ visible: true, api: true });

      // Destroy the DataTables object.
      table.destroy();
      //Replace the table content with the data received through ajax
      $("#ans").html(data);
    },
  });
}

You are immediately destroying the DataTable you create...

Your original code was fine. Just put the code I suggested before $("#ans").html(data);.

The sequence needs to be:

Destroy any existing DataTable
Write to the HTML
Initialise the DataTable.

Allan

ghesarbu · October 2023

I appreciate your help.
I updated the code, but the result is the same:
the options are not loading for the table (e.g.: limiting the number of rows, checkboxes for each row)

allan · October 2023

If you link to the page showing the issue, I'd be happy to take a look at the issue. If you can't link to the page, please use JSFiddle, https://live.datatables.net or something similar to provide a test case so we can debug it and offer some help.

Allan

ghesarbu · October 2023

86.127.36.60/spotter/app_viz/spot_1624.php

kthorngren · October 2023

I see a graph not a table when I open that link. Please provide the steps needed to see the issue you are trying to solve.

Kevin

ghesarbu · October 2023

You must first select the month, and then the table will appear.

kthorngren · October 2023

You are calling this function each time the month is selected:

function selectSpecie() {
    var x1 = document.getElementById("dd").value;

    $.ajax({
        url: "showResults.php",
        method: "POST",
        data: { id1: x1 },
        success: function (data) {
            //Initialize DataTables with the required options

            var table = new DataTable("#myTable", {
                dom: "Bfrtip",
                buttons: [
                    {
                        extend: "excel",
                        text: "Excel",
                        exportOptions: {
                            rows: function (idx, data, node) {
                                let found = false;
                                if ($("#exportSelected").is(":checked")) {
                                    let selectedRowIndexes = table.rows(".selected").indexes();
                                    for (
                                        let index = 0;
                                        index < selectedRowIndexes.length;
                                        index++
                                    ) {
                                        if (idx == selectedRowIndexes[index]) {
                                            found = true;
                                            break;
                                        }
                                    }
                                    return found;
                                } else {
                                    return true;
                                }
                            },
                        },
                    },
                ],
                columnDefs: [
                    {
                        orderable: false,
                        className: "select-checkbox",
                        targets: 0,
                    },
                ],
                select: {
                    style: "multi",
                    selector: "td:first-child",
                },
                order: [[1, "asc"]],
            });
            // Make the table visible and expose the DataTables API.
            table.tables({ visible: true, api: true });

            // Destroy the DataTables object.
            table.destroy();
            //Replace the table content with the data received through ajax
            $("#ans").html(data);
        },
    });
}

You are initializing the Datatable then immediately destroying it. This is why the Datatables features aren't shown. Also you are updating the HTML table after the Datatables initialization. You need to change the order of operations as Allan described. Also use the code exactly as Allan provided:

DataTable
    .tables( { visible: true, api: true } )
    .destroy();

This uses the DataTable.tables() API. You will need something like this:

function selectSpecie() {
    var x1 = document.getElementById("dd").value;

    $.ajax({
        url: "showResults.php",
        method: "POST",
        data: { id1: x1 },
        success: function (data) {
            DataTable
                .tables( { visible: true, api: true } )
                .destroy();

            //Replace the table content with the data received through ajax
            $("#ans").html(data);

            //Initialize DataTables with the required options

            var table = new DataTable("#myTable", {
                dom: "Bfrtip",
                buttons: [
                    {
                        extend: "excel",
                        text: "Excel",
                        exportOptions: {
                            rows: function (idx, data, node) {
                                let found = false;
                                if ($("#exportSelected").is(":checked")) {
                                    let selectedRowIndexes = table.rows(".selected").indexes();
                                    for (
                                        let index = 0;
                                        index < selectedRowIndexes.length;
                                        index++
                                    ) {
                                        if (idx == selectedRowIndexes[index]) {
                                            found = true;
                                            break;
                                        }
                                    }
                                    return found;
                                } else {
                                    return true;
                                }
                            },
                        },
                    },
                ],
                columnDefs: [
                    {
                        orderable: false,
                        className: "select-checkbox",
                        targets: 0,
                    },
                ],
                select: {
                    style: "multi",
                    selector: "td:first-child",
                },
                order: [[1, "asc"]],
            });
        },
    });
}

Kevin

ghesarbu · October 2023

OK, Kevin, now works great
Thank you very much !

Why the table content it's not changed ?

Why the table content it's not changed ?

Answers

Howdy, Stranger!

Categories

DataTables

Why the table content it's not changed ?

Why the table content it's not changed ?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables