如何在 jQuery 数据表中添加输入的数据？

如何解决如何在 jQuery 数据表中添加输入的数据？

jQuery Bootstrap 验证工作正常，但我不知道如何在 jQuery 数据表中添加我的数据。 详情如下：

There is where I input my data (jQuery Validation)

This is where I want my data to appear (jQuery Datatable)

这是我的代码：

JAVASCRIPT - JQUERY 验证

$(document).ready(function(){

$('#simple_form input,#simple_form textarea').jqBootstrapValidation({
 preventSubmit: true,submitSuccess: function($form,event){     
  event.preventDefault();
  $this = $('#send_button');
  $this.prop('disabled',true);
  var form_data = $("#simple_form").serialize();
  $.ajax({
   ajax:"item.PHP",table: "#example",method:"POST",data:form_data,success:function(){
    $('#success').html("<div class='alert alert-success'><strong>Your message has been sent. </strong></div>");
    $('#simple_form').trigger('reset');
   },error:function(){
    $('#success').html("<div class='alert alert-danger'>There is some error</div>");
    $('#simple_form').trigger('reset');
   },complete:function(){
    setTimeout(function(){
     $this.prop("disabled",false);
     $('#success').html('');
    },5000);
   }
  });
 }
});

});

HTML - JQUERY 验证

 <form id="simple_form" novalidate="novalidate">

<div class="control-group">
                <div class="form-group mb-0 pb-2">
                    <input type="number" name="ID" min="0" id="ID" class="form-control form-control-lg" placeholder="Product ID" required="required" data-validation-required-message="Product ID is required." />
                    <p class="text-danger help-block"></p>
                </div>
            </div>

            <div class="control-group">
                <div class="form-group">
                    <input type="text" name="name" id="name" class="form-control form-control-lg" placeholder="Product Name" required="required" data-validation-required-message="Product Name is required." />
                    <p class="text-danger help-block"></p>

                </div>
            </div>

            <div class="control-group">
                <div class="form-group">
                    <input type="category" name="category" id="category" class="form-control form-control-lg" placeholder="Product Category" required="required" data-validation-required-message="Product Category must be given." />
                    <p class="text-danger help-block"></p>

                </div>
            </div>

            <div class="control-group">
                <div class="form-group">
                    <input name="brand" type="text" id="brand" class="form-control form-control-lg" placeholder="Product Brand" required="required" data-validation-required-message="Product Brand must be given." />
                    <p class="text-danger help-block"></p>
                </div>
            </div>
   
            <div class="control-group">
                <div class="form-group">
                    <input type="text" name="stocks" id="stocks" class="form-control form-control-lg" placeholder="Available Stocks (Optional)" />
                    <p class="text-danger help-block"></p>

                </div>
            </div>
            <br>
            <div id="success"></div>
            <div class="form-group">
             <button type="submit" class="btn btn-primary" id="button">Send</button>
            </div>

PHP - 连接 JQUERY 验证和 JQUERY 数据表

      <?PHP
     $q = intval(filter_input_array(INPUT_GET)['q']);
     
     $con = MysqLi_connect('localhost','peter','abc123','my_db');
     if (!$con) {
       die('Could not connect: ' . MysqLi_error($con));
     }
     
     MysqLi_select_db($con,"ajax_demo");
     $sql="SELECT * FROM user WHERE id = '".$q."'";
     $result = MysqLi_query($con,$sql);
     
     echo "<table>
     <tr>
     <th>Product ID</th>
     <th>Product Name</th>
     <th>Product Category</th>
     <th>Product Brand</th>
     <th>Available Stocks</th>
     </tr>";
     while($row = MysqLi_fetch_array($result)) {
       echo "<tr>";
       echo "<td>" . $row['ID'] . "</td>";
       echo "<td>" . $row['name'] . "</td>";
       echo "<td>" . $row['category'] . "</td>";
       echo "<td>" . $row['brand'] . "</td>";
       echo "<td>" . $row['stocks'] . "</td>";
       echo "</tr>";
     }
     echo "</table>";
     MysqLi_close($con);
     ?>

HTML - 数据表

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="95%">
    <thead>
        <tr>
            <th>Product ID</th>
            <th>Product Name</th>
            <th>Product Category</th>
            <th>Product Brand</th>
            <th>Available Stocks</th>
        </tr>
    </thead>
         
</table>

LINKS FOR JS AND CSS

非常感谢至少能帮助我的人