jquery dataTables 不显示数据显示 ajax 错误
Posted
技术标签:
【中文标题】jquery dataTables 不显示数据显示 ajax 错误【英文标题】：jquery dataTables don't show data show an ajax error 【发布时间】：2018-03-02 01:27:54 【问题描述】：我想使用带有 ajax 的 jquery 数据表来显示 mysql 表数据。但它显示一条错误消息。 show this image
我的代码有什么问题吗？ 这是我的控制器。
public function fetch_data()
$this->load->model('base_model');
$fetch_data=$this->base_model->make_datatables();
$data=array();
foreach($fetch_data as $row)
$sub_array=array();
$sub_array[]=$row->id;
$sub_array[]=$row->firstName;
$sub_array[]=$row->lastName;
$sub_array[]=$row->gender;
$sub_array[]=$row->address;
$sub_array[]=$row->dob;
$sub_array='<button type="button" name="update" id="'.$row->id.'" class="btn btn-warning">Update</button>';
$sub_array='<button type="button" name="delete" id="'.$row->id.'" class="btn btn-danger">Delete</button>';
$data[]=$sub_array;
$output=array(
'draw'=>intval($_POST["draw"]),
'recordsTotal'=>$this->base_model->get_all_data(),
"recordsFiltered" => $this->crud_model->get_filtered_data(),
"data" => $data
);
echo json_encode($output);
这是我的视图代码
$(document).ready(function()
var dataTable=$('#user_data').dataTable(
"processing":true,
"serverSide":true,
"order":[],
"ajax":
url:"<?php echo base_url().'base/fetch_data'?>",
type:"POST",
dataType:"json"
,
"columnDefs":[
"target":[0,3,4],
"orderable":false
]
);
);
【问题讨论】：
您是否访问过警报对话框中的the link？遵循页面诊断部分中的建议。 你想只使用带有 ajax 的 jquerydatatable 还是带有 ajax 和服务器端的 jquerydatatable。 其实你用的是服务端数据表datatables.net/examples/data_sources/server_side.html 在你的控制器中，在 jsonencode header('Content-Type: application/json'); 您可以在浏览器中使用开发人员工具检查并发布响应吗？ 【参考方案1】：使用 jquerydatabale 和 ajax
控制器：
public function ajax_get_records() //jquerydatatable for static columns and rows
$arrayCount = 3;
$json = [
[
"Tiger Nixon",
"System Architect",
"Edinburgh",
"5421",
"2011/04/25",
"$320,800"
],
[
"Garrett Winters",
"Accountant",
"Tokyo",
"8422",
"2011/07/25",
"$170,750"
],
];
$columns = [
"Name",
"Position",
"Office",
"Extn",
"Start date",
"Salary"
];
$ajax_data['total'] = intval(3);
$ajax_data['recordsFiltered'] = intval(3);
$ajax_data['columns'] = $columns;
$ajax_data['data'] = $json;
header('Content-Type: application/json');
echo json_encode($ajax_data);
查看：
<html>
<title>Details</title>
<head></head>
<body>
<br>
<table id="example" class="display" cellspacing="0" >
<thead>
<tr>
<td colspan="11" align="center">
<div style="float:left">
<a title="uploads" href="<?php echo base_url();?>xlsimport/uploads">
<img src="<?php echo base_url();?>images/insert.png" ></a>
</div>
</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</body>
</html>
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>datatable/jquery.dataTables.min.css">
<script src="<?php echo base_url();?>datatable/jquery-1.12.4.js"></script>
<script src="<?php echo base_url();?>datatable/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function()
$('#example').DataTable(
"ajax": "<?php echo base_url() ?>xlsimport/ajax_get_records"
);
);
</script>
【讨论】：
【参考方案2】：请为您的问题尝试此解决方案：
<html>
<title>Details</title>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script type="text/javascript">
base_url = '<?=base_url()?>';
</script>
</head>
<body>
<table id="user_data" class="display" cellspacing="0" >
<thead>
<tr>
<td colspan="6" align="center">
<div style="float:left">
<a title="uploads" href="<?php echo base_url();?>xlsimport/uploads">
<img src="<?php echo base_url();?>images/insert.png" ></a>
</div>
</td>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody></tbody>
</table>
</body>
</html>
数据表脚本：
<script lang="text/javascript">
$(document).ready(function()
$('#user_data').dataTable(
"ordering":false,
'bProcessing': true,
"bServerSide": true,
"sAjaxSource": base_url + "xlsimport/ajax_get_records",
"sPaginationType": "full_numbers",
"sDom": "t<'row'<'col-sm-4'i><'col-sm-8'p>>",
"fnServerData": function (sSource, aoData, fnCallback)
$.ajax
(
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'beforeSend':function()
if(!$('.se-pre-con').is(':visible'))
,
'success': fnCallback,
'complete':function()
);
,
"oLanguage":
"sLengthMenu": "_MENU_ records per page",
"sZeroRecords": "No data available",
"sProcessing": "<img src='images/loading.gif'>"
,
);
);
</script>
注意：请访问此 JSfiddle 以供参考 http://jsfiddle.net/bababalcksheep/ntcwust8/
【讨论】：
以上是关于jquery dataTables 不显示数据显示 ajax 错误的主要内容，如果未能解决你的问题，请参考以下文章
使用 jQuery DataTable Buttons Plugin 不显示导出按钮