Question

我正在使用datatables插件为我的网页绘制表格。我有一个选择标签来选择具有动态买家列表的买家。当我选择一个买家时，它将该买家的相应数据加载到数据表中，并且工作正常。但是，如果我更改买方，表上的数据将保持不变。

这是选择标记代码-

<!--=====================================
=            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>

当我们选择买方时，地址的下一个输入标签也会更新。

这是我的JavaScript代码-

/*=============================================
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
    });

})

这是我的Ajax代码-

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

我进行了搜索，但没有找到与我的问题相关的解决方案。问题是，如果我是第一次选择买家，地址输入将被更新，并且blocks表也正确加载，那么如果我更改买家，地址将被更新，但表保持原样。

Answer 1

当前，您是在点击时对数据表进行多次初始化。将该初始化置于事件处理程序之外。然后点击，用ajax.url()和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();
})

Answer 2

按照iArcadia的建议，我更改了我的javascript文件中的代码，如下所示

    /*=============================================
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();

})

并在初始化时从ajax网址中删除了“？selectedBuyer =” + selectedBuyer“。现在工作正常。感谢iArcadia的帮助。

Answer 3

先前的答案又创建了1个问题，一旦我登录到网站，在测试代码后才知道。以下代码在多次测试并重新登录后可以正常工作

    /*=============================================
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();   

})

数据更改时，DataTable不更新

3 个答案: