如何使用选择选项更改 DataTable 中的数据

Question

Front datatable

这是数据表的前端
我想从选择选项中更改数据表数据。更改为其他类别显示错误后第一次工作。

DataTables 警告：table id=tblviewstock - 无法重新初始化 DataTable

<table id="tblviewstock" class="table table-striped "  >
        <thead>
        <tr>
            <th>Batch ID</th>
            <th>Product ID</th>
            <th>selling price</th>
            <th>Quantity</th>
            <th>Receive Date</th>
        </tr>
        </thead>
        <tbody id="stockBody" style="font-size: 13px">

        </tbody>

    </table>

javascript

$("#stock_cat").change(function  () {
            var cat_id = $(this).val();              

            var dataTable = $("#tblviewstock").DataTable({
                "processing": true,
                "serverSide": true,

                "ajax": {
                    "url": "lib/mod_stock.php?type=viewStock&catid="+cat_id,
                    "type": "POST"
                },
                "columns": [
                    {"data": "0"},
                    {"data": "1"},
                    {"data": "2"},
                    {"data": "3"},
                    {"data": "4"},
                ]
            });

        });

mod_view.php - 函数 view_stock() 这个文件是 mod-view.php

function viewStock(){
     $catid =  $_GET['catid'];
    $table ='tbl_products';

    $primaryKey ='prod_id';
    $where = "cat_id='$catid'";

    $columns = array(

        array( 'db' => 'prod_id', 'dt'=> 0),
        array( 'db' => 'prod_img', 'dt'=> 1),
        array( 'db' => 'prod_name', 'dt'=> 2),
        array( 'db' => 'prod_modal', 'dt'=> 3),
        array( 'db' => 'prod_color', 'dt'=> 4),

    );
    require_once('config.php');
    $host = Config::$host ;
    $user = Config::$db_uname ;
    $pass = Config::$db_upass ;
    $db = Config::$db_name ;

    $sql_details = array(
        'user' => $user,
        'pass' => $pass,
        'db'   => $db,
        'host' => $host
    );

    require('ssp.class.php');

    echo json_encode(
        SSP::complex($_POST, $sql_details, $table, $primaryKey, $columns,null,$where )
    );
}

Answer 1

无法重新初始化数据表。 （即不能为同一张表设置两次选项）。您可以尝试销毁表并在选择新类别后重新创建它。也许试试：

var dataTable;
var i = 0;
$("#stock_cat").change(function  () {
  if(++i > 1) dataTable.destroy();
  var cat_id = $(this).val();   

    dataTable = $('#tblviewstock').DataTable( {
        "processing": true,
        "serverSide": true,

       "ajax": {
          "url": "lib/mod_stock.php?type=viewStock&catid="+cat_id,
           "type": "POST"
        },
        "columns": [
           {"data": "0"},
           {"data": "1"},
           {"data": "2"},
           {"data": "3"},
           {"data": "4"},
        ]
    });

});