我是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)
暂无答案!
目前还没有任何答案,快来回答吧!