我是jquery新手，希望在jquery datatable中显示数据。因此，在我的scriptd.js文件中，我编写了jquery，如下所示。

$(function() {
        $("#start_date").datepicker({
            "dateFormat": "yy-mm-dd"
        });
        $("#end_date").datepicker({
            "dateFormat": "yy-mm-dd"
        });
    });

    function fetch(start_date, end_date) {
        $.ajax({
            url: "../../controller/search.php",
            type: "POST",
            data: {
                start_date: start_date,
                end_date: end_date,

            },
            dataType: "json",

            success: function(data) {
                $("#records").DataTable({
                    "data": data,
                    "responsive": true,
                    "columns": [
                        { "data": "don_team_name" },
                        { "data": "national_id" },
                        { "data": "type_code" },
                        { "data": "item_name" },
                        { "data": "item_qty" },
                        { "data": "item_description" },
                        { "data": "receive_date" }
                    ]

                });
            }
        });
     }
     fetch();

在my search.php文件中

require_once('../model/DBController.php');
require_once('../model/Donation/DonationAdd.php');

$db_handle = new DBController(); //connection object
$con = $db_handle->connectDB();
$itemlist = new DonationAdd();
$result_list = $itemlist->getDonItems();
echo json_encode($result_list);  //I tried this previously

//also this
$post = json_encode(array("data"=>$result_list, JSON_FORCE_OBJECT));
echo $post;

当我尝试这个echo json_encode（$result_list）时；我所有的数据都显示在网络>响应中，如下所示
[{“don_团队名称”：“aaa”，“国家id”：“2356652222222”，“类型代码”：“gi”，“项目名称”：“gg”，“项目数量”：“0”，“项目说明”：“接收日期”：“2021-07-13”}]
当我尝试这个$post=json_编码（数组（“数据”=>$result_列表，json_force_对象））；{数据“：[{”堂队名称“：”aaa“，”国家id“：”2356652222222“，”类型代码“：”gi“，”项目名称“：”gg“，”项目数量“：”0“，”项目描述“：”接收日期“：”2021-07-13”}]
在my generation.php文件中创建了表。还包括相关的jquery库和引导程序

<link rel="stylesheet" href="../../assets/css/bootstrap.css"> <!--bootstrap css-->
    <link rel="stylesheet" href="../../assets/DataTables/dataTables.min.css"> <!--datatables css for datepicker-->
    <link rel="stylesheet" href="../../assets/css/jquery-ui.min.css">
<div class="container" >

        <div class="row">
            <div class="col-md-12">
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-info text-white" id="basic-addon1"><i
                                        class="fas fa-calendar-alt"></i></span>
                            </div>
                            <input type="text" class="form-control" id="start_date" placeholder="Start Date" readonly>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text bg-info text-white" id="basic-addon1"><i
                                        class="fas fa-calendar-alt"></i></span>
                            </div>
                            <input type="text" class="form-control" id="end_date" placeholder="End Date" readonly>
                        </div>
                    </div>
                </div>
                <div>
                    <button id="filter" class="btn btn-outline-info btn-sm">Filter</button>
                    <button id="reset" class="btn btn-outline-warning btn-sm">Reset</button>
                </div>

                <div class="row mt-3">
                    <div class="col-md-12">
                        <!-- Table -->
                        <div class="table-responsive">
                            <table class="table table-borderless display nowrap" id="records" style="width:100%">
                <thead>
                  <tr>
                     <!-- <th>#</th> -->
                    <th>Donor </th>
                    <th>NIC </th>
                    <th>Item Code</th>
                    <th>Item Name</th>
                    <th>Item Qty</th>
                    <th>Description</th>
                    <th>Date</th>
                    <!-- <th colspan="3">Action</th>     -->
                </tr> 
         </thead>
         <tbody></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="../../assets/js/jquery-1.12.0.min.js" type="text/javascript"></script>  <!--jquery min js-->
    <script src="../../assets/js/bootstrap.js"></script> <!--bootstrap js-->
  <!--jquery ui min js for datepicker-->
  <script src="../../assets/js/jquery-ui.min.js"></script>  
  <!--datatables js-->
    <script src="../../assets/DataTables/datatables.min.js"></script>  
  <script src="../../assets/js/pdfmake.min.js"></script> 
  <script src="../../assets/js/vfs_fonts.js"></script>
<script src="../../assets/js/scriptD.js"></script>
``` but nothing is displayed in the table and there is no errors displayed.I tried many things when i search this question and nothing works for me.also since I'm new i don't know whether i'm doing any mistakes.please help me with this.Thanks in advance.
[![this is how it looks][1]][1]

  [1]: https://i.stack.imgur.com/G02qP.png![enter image description here](https://i.stack.imgur.com/EqGmg.jpg)