DataTable doesn't update when the data changes

datatables
datatable not working
datatable is not a function
datatable is not working properly
bootstrap datatable not working
datatables documentation
datatable example
datatable dependencies

I'm using datatables plugin to draw tables for my web page. I have a select tag to select buyer with dynamic list of buyers. when i select a buyer it loads respective data of that buyer to the datatable and it works fine. But if i change the buyer the data on the table remains unchanged.

This is the select tag code -

<!--=====================================
=            Buyer INPUT           =
======================================-->

                <div class="form-group">

                  <div class="input-group">

                    <span class="input-group-addon"><i class="fa fa-industry text-aqua"></i></span>

                    <select class="form-control selectBuyer" style="width: 369px" name="selectBuyer" id="selectBuyer" required>

                      <option name="selectBuyer">Select Buyer</option>

                      <?php 

                        $item = null;
                        $value = null;

                        $buyers = ControllerBuyers::ctrShowBuyers($item, $value);

                        foreach ($buyers as $key => $value) {
                          echo '<option value="'.$value["name"].'">'.$value["name"].'</option>';  

                        }

                        echo '</select>';

                      ?>                        

                    <span class="input-group-addon" style="width: 39px"><i class="fa fa-map-marker text-aqua"></i></span>

                    <input class="form-control sAdd" style="width: 370px" type="text" name="sAdd" id="sAdd" readonly required>

                  </div>

                </div>

And also the next input tag for address get updated when we select buyer.

this is my javascript code -

/*=============================================
ADDING Buyer Address
=============================================*/

$(".piForm").on("change", "select.selectBuyer", function(){

    var name = $(this).val();
    var buyerAddress = $(this).parent().children(".sAdd");  

    var datum = new FormData();
    datum.append("name", name);


    $.ajax({

        url:"ajax/buyers.ajax.php",
        method: "POST",
        data: datum,
        cache: false,
        contentType: false,
        processData: false,
        dataType:"json",
        success:function(answer){

            $(buyerAddress).val(answer["address"]);

        }

    })

})

/*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/
$(".piForm").on("change", "select.selectBuyer", function(){

    var selectedBuyer = $('#selectBuyer').val();

    $('.blocksTable').DataTable({
        "ajax": "ajax/datatable-pi.ajax.php?selectedBuyer="+selectedBuyer, 
        "deferRender": true,
        "retrieve": true,
        "processing": true
    });

})

this is my ajax code -

    <?php

require_once "../controllers/mark.controller.php";
require_once "../models/mark.model.php";

class eblocksTablePI{

    /*=============================================
     SHOW Blocks TABLE
    =============================================*/ 

    public function showBlocksTablePI(){        

            $item = null;
            $value = null;

            $answer = ControllerMark::ctrShowMark($item, $value);           

        if(count($answer) == 0){

            $jsonData = '{"data":[]}';

            echo $jsonData;

            return;
        }

        $jsonData = '{

            "data":[';

                foreach ($answer as $key => $value) {

                    if (($value["buyer"] == $_GET["selectedBuyer"]) && ($value["netL"] != 0)) {

                        $blockNo = "$value[blockNo]";

                        $netCUM = "$value[netCUM]";

                        $grossCUM = "$value[grossCUM]";

                        $buttons =  "<button class= 'btn btn-primary addBlock recoverButton' idMark='".$value["id"]."'>Add</button>";

                    $jsonData .='[
                        "'.$blockNo.'",
                        "'.$netCUM.'",
                        "'.$grossCUM.'",
                        "'.$buttons.'"
                    ],';
                }

            }

                $jsonData = substr($jsonData, 0, -1);
                $jsonData .= '] 

            }';

        echo $jsonData;
    }

}


/*=============================================
ACTIVATE PRODUCTS TABLE
=============================================*/ 
$activateBlocksPI = new blocksTablePI();
$activateBlocksPI -> showBlocksTablePI();

I have searched but didn't find solutions that are relevant to my problem. the problem is if i select the buyer for the first time the address input gets updated and the blocks table also loads correctly then if i change the buyer the address gets updated but the table remains as is.

Currently, you are multi-initializing your datatable on click. Put that initialization outside your event handler. And on click, update your data with ajax.url() and ajax.load().

// Initializes
let selectedBuyer = $('#selectBuyer').val();

let myDatatable = $('.blocksTable').DataTable({
    "ajax": "ajax/datatable-pi.ajax.php?selectedBuyer="+selectedBuyer, 
    "deferRender": true,
    "retrieve": true,
    "processing": true
});

$(".piForm").on("change", "select.selectBuyer", function(){
    selectedBuyer = $(this).val();

    // Updates on click
    myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" + selectedBuyer).load();
})

DataTable doesn't work — DataTables forums, button a table that reads data from a database is built, I have added the script to activate paging but it does not work, you can help me with this. DataTable doesn't work (jQuery) Ask Question Asked 5 years, 5 months ago. Active 9 months ago. Viewed 20k times 3. I have made a simple table to show

As suggested by iArcadia i changed the code in my javascript file which is as below

    /*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/

let myDatatable = $('.blocksTable').DataTable({
        "ajax": "ajax/datatable-pi.ajax.php", 
        "deferRender": true,
        "retrieve": true,
        "processing": true
    });

$(".piForm").on("change", "select.selectBuyer", function(){

    var selectedBuyer = $('#selectBuyer').val();

    myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" + selectedBuyer).load();

})

and removed the "?selectedBuyer=" + selectedBuyer" from the ajax url in initialization. now it is working fine. Thanks iArcadia for your help.

draw(), The page option is provided when you wish the table to be updated but for these actions not to occur (for example, a page change does not require a full� Merge the specified DataTable with the current DataTable, indicating whether to preserve changes and how to handle missing schema in the current DataTable. NewRow() Creates a new DataRow with the same schema as the table.

The Previous answer had created 1 more issue which i came to know after testing the code once i re logged in to the website. The below code is working after multiple tests & relogins

    /*=============================================
LOAD DYNAMIC PRODUCTS TABLE
=============================================*/

$(".piForm").on("change", "select.selectBuyer", function(){

    var selectedBuyer = $('#selectBuyer').val();

    let myDatatable = $('.blocksTable').DataTable({
        "ajax": "ajax/datatable-pi.ajax.php", 
        "deferRender": true,
        "retrieve": true,
        "processing": true
    });

    myDatatable.ajax.url("ajax/datatable-pi.ajax.php?selectedBuyer=" + selectedBuyer).load();   

})

Frequently Asked Questions, The issue here is that DataTables doesn't know about your manipulation of the DOM structure - i.e. it doesn't know that you've added a new row, and when it does� Dash DataTable is an interactive table component designed for viewing, editing, and exploring large datasets. DataTable is rendered with standard, semantic HTML &lt;table&gt; markup, which makes it accessible, responsive, and easy to style. This component was written from scratch in React.js specifically for the Dash community.

Manual, DataTables 1.10+ and its extensions require with jQuery 1.7 or newer. This documentation doesn't detail how that interface can be used by end users, under � ColumnName, ColumnType: These arguments define the schema of the table.; ScalarValue: A constant scalar value to insert into the table.The number of values must be an integer multiple of the columns in the table.

DataTables scrolling and tabs, The reason this requires special consideration, is that when DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements� Object doesn't support property or method 'dataTable' in Internet Explorer. Ask Question Asked 4 years, 5 months ago. Active 4 years, 5 months ago.

Scrolling and Bootstrap tabs, The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with � The first example shows how to return the primary key columns for a DataTable displayed in a DataGrid. The second example demonstrates how to set the primary key columns for a DataTable. private void GetPrimaryKeys(DataTable table) { // Create the array for the columns.

Comments
  • sorry i mistakenly added code which is for edit form. now I've corrected it in the question
  • Can you clarify which parts of all this code are not running, and why? If you perform updates using AJAX, is the proper data sent to the backend? Does the answer contain the expected data?
  • yes the answer contains updated data when the buyer is changed i have console.logged it and checked.
  • I changed the code but getting error selectedBuyer is not defined.
  • Your variable selectedBuyed have to be defined before the initialization.
  • Thanks for the help I just removed the last part of the ajax url "?selectedBuyer="+selectedBuyer" now it is working as expected.