DataTable在数据更改时不会更新

Question

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.

Answer 1

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();
})