DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Why the table content it's not changed ?

Why the table content it's not changed ?

ghesarbughesarbu Posts: 6Questions: 1Answers: 0
in Free community support

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']]
   });
        }
    });
   }
`

Answers

  • allanallan Posts: 63,497Questions: 1Answers: 10,470 Site admin

    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

  • ghesarbughesarbu Posts: 6Questions: 1Answers: 0

    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);
        }
    });
}
  • allanallan Posts: 63,497Questions: 1Answers: 10,470 Site admin

    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:

    1. Destroy any existing DataTable
    2. Write to the HTML
    3. Initialise the DataTable.

    Allan

  • ghesarbughesarbu Posts: 6Questions: 1Answers: 0

    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)

  • allanallan Posts: 63,497Questions: 1Answers: 10,470 Site admin

    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

  • ghesarbughesarbu Posts: 6Questions: 1Answers: 0

    86.127.36.60/spotter/app_viz/spot_1624.php

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949

    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

  • ghesarbughesarbu Posts: 6Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 21,325Questions: 26Answers: 4,949

    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

  • ghesarbughesarbu Posts: 6Questions: 1Answers: 0

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

Sign In or Register to comment.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.