Php 显示JSON数据但未绘制表（使用数据表-服务器端处理）
我正在使用Yajra的DataTables服务器端处理。我可以看到JSON数据，但没有填充该表 我设法让DataTables与客户端处理一起工作，但由于最终会有超过50000行的数据，我决定尝试通过下载Yajra的DataTables for Laravel 5.8来实现服务器端处理 当我调用我的路由时，我看到了JSON格式的数据，但我根本看不到表。上面写着“draw:0”，所以我猜绘制表格有问题 我尝试过stack overflow和官方DataTables网站上提到的各种解决方案，但似乎没有一种适合我。例如Php 显示JSON数据但未绘制表（使用数据表-服务器端处理）,php,jquery,laravel,datatables,yajra-datatable,Php,Jquery,Laravel,Datatables,Yajra Datatable,我正在使用Yajra的DataTables服务器端处理。我可以看到JSON数据，但没有填充该表 我设法让DataTables与客户端处理一起工作，但由于最终会有超过50000行的数据，我决定尝试通过下载Yajra的DataTables for Laravel 5.8来实现服务器端处理 当我调用我的路由时，我看到了JSON格式的数据，但我根本看不到表。上面写着“draw:0”，所以我猜绘制表格有问题 我尝试过stack overflow和官方DataTables网站上提到的各种解决方案，但似乎没有
-
-
- 我在调用我的路由时看到的JSON数据如下：
{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"customerNr": "98764",
"orderNr": "23478",
"pallet_id": "66788",
"status_id": "2",
"created_by": "Sara",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-09 07:23:20"
},
{
"id": "2",
"customerNr": "99999",
"orderNr": "22222",
"pallet_id": "22335",
"status_id": "1",
"created_by": "Sophie",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-04 08:26:28"
},
{
"id": "3",
"customerNr": "54657",
"orderNr": "89856",
"pallet_id": "11228",
"status_id": "1",
"created_by": "Markus",
"created_at": "08 Jul 2019",
"updated_at": "2019-07-08 06:59:42"
},
],
"input": []
}
Route::get('returned-shipment', ['uses'=>'ReturnedShipmentController@index', 'as'=>'returned-shipment.index']);
public function index(
{
return DataTables::of(ReturnedShipment::all())->make();
}
<div class="row">
<div id="tbl" class="col-sm-12">
<table id="overview" class="cell-border display">
<thead class="tbl-top">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
</tr>
</thead>
<tfoot class="tbl-bottom">
<tr>
<th>Retourennummer</th>
<th>Auftragsnummer</th>
<th>Datum</th>
<th>Zustand</th>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function () {
var startingStatus = 'angelegt';
var table = $('#overview').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{ route('returned-shipment.index') }}",
"columns": [
{data: 'id'},
{data: 'orderNr'},
{data: 'created_at'},
{data: 'status_id'}
],
"search": {
"search": "angelegt"
},
"dom": "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-6'i><'col-sm-6'p>>",
"paging": true,
"info": true,
"searching": true,
"autoWidth": true,
"language": {
"paginate": {
"previous": "Vorherige Seite",
"next": "Nächste Seite"
},
"search": "Suche:",
"info": "Zeige _START_ - _END_ von insgesamt _TOTAL_ Einträgen",
"lengthMenu": 'Einträge pro Seite' + '<br>' +
'<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">' +
'<option selected value="10">10</option>' +
'<option value="20">20</option>' +
'<option value="30">30</option>' +
'<option value="40">40</option>' +
'<option value="50">50</option>' +
'<option value="-1">Alle</option>' +
'</select>'
},
initComplete: function () {
/**
* Drop-down filter is created for the 4th column "status" in the header and populates it with
* the different status values
*/
this.api().columns([3]).every(function () {
var column = this;
var select = $('<select><option value="">alle</option></select>')
.appendTo($(column.header()))
.on('change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
/**
* When clicking on drop-down next to status, the sorting function is not activated
*/
$(select).click(function (e) {
e.stopPropagation();
});
/**
* Once an option in the drop-down next to status has been selected, you can read the text in
* the drop-down
*/
column.data().unique().sort().each(function (d, j) {
if (startingStatus === d) {
select.append('<option SELECTED value="' + d + '">' + d + '</option>')
} else {
select.append('<option value="' + d + '">' + d + '</option>')
}
});
/**
* When drop-down is clicked on, search field is cleared. Otherwise search field must be
* manually cleared before using the drop-down.
*/
$(select).on('click', function () {
table.search(" ").draw();
});
});
}
});
});
</script>
再通宵
奥夫特拉斯努默
资料
祖斯坦
再通宵
奥夫特拉斯努默
资料
祖斯坦
$（文档）.ready（函数（）{
var startingStatus='angelegt'；
变量表=$（“#概述”）.DataTable({
“处理”：对，
“服务器端”：正确，
“ajax”：“{route（'returned-shipping.index'）}”，
“栏目”：[
{data:'id'}，
{data:'orderNr'}，
{数据：'在'}创建_，
{数据：'状态\ id'}
],
“搜索”：{
“搜索”：“angelegt”
},
“dom”：”+
"" +
"",
“分页”：正确，
“信息”：正确，
“搜索”：没错，
“自动宽度”：正确，
“语言”：{
“分页”：{
“先前”：“Vorherige Seite”，
“下一步”：“Nächste Seite”
},
“搜索”：“Suche:”，
“信息”：“开始和结束”是一个完整的信息，
“长度菜单”：“工程进度”+“
”+
'' +
'10' +
'20' +
'30' +
'40' +
'50' +
“Alle”+
''
},
initComplete:函数（）{
/**
*为标题中的第4列“状态”创建下拉筛选器，并用
*不同的状态值
*/
this.api（）.columns（[3]）.every（函数（）{
var列=此；
变量选择=$（'alle'）
.appendTo（$（column.header（）））
.on（'change'，function（）{
var val=$.fn.dataTable.util.escapeRegex(
$（this.val（）
);
柱
.search（val？“^”+val+“$”：“”，true，false）
.draw（）；
});
/**
*单击状态旁边的下拉列表时，排序功能未激活
*/
$（选择）。单击（功能（e）{
e、 停止传播（）；
});
/**
*选择状态旁边下拉列表中的选项后，您可以在中读取文本
*下拉列表
*/
column.data（）.unique（）.sort（）.each（函数（d，j）{
如果（启动状态===d）{
选择。追加（“”+d+“”）
}否则{
选择。追加（“”+d+“”）
}
});
/**
*单击下拉列表时，搜索字段将被清除。否则，搜索字段必须为空
*在使用下拉列表之前手动清除。
*/
$（选择）.on（'单击'，函数（）{
table.search（“”.draw（）；
});
});
}
});
});
提前感谢！：） 我已经检查了您当前的代码和JSON。您的JSON文件似乎无效
{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"customerNr": "98764",
"orderNr": "23478",
"pallet_id": "66788",
"status_id": "2",
"created_by": "Sara",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-09 07:23:20"
},
{
"id": "2",
"customerNr": "99999",
"orderNr": "22222",
"pallet_id": "22335",
"status_id": "1",
"created_by": "Sophie",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-04 08:26:28"
},
{
"id": "3",
"customerNr": "54657",
"orderNr": "89856",
"pallet_id": "11228",
"status_id": "1",
"created_by": "Markus",
"created_at": "08 Jul 2019",
"updated_at": "2019-07-08 06:59:42"
}
],
"input": []
}
这是正确的格式。需要删除数据数组中最后一个对象后的逗号。你能确认这解决了你的问题吗？我让datatables在没有这个逗号的情况下工作。我已经检查了您当前的代码和JSON。您的JSON文件似乎无效
{
"draw": 0,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
{
"id": "1",
"customerNr": "98764",
"orderNr": "23478",
"pallet_id": "66788",
"status_id": "2",
"created_by": "Sara",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-09 07:23:20"
},
{
"id": "2",
"customerNr": "99999",
"orderNr": "22222",
"pallet_id": "22335",
"status_id": "1",
"created_by": "Sophie",
"created_at": "04 Jul 2019",
"updated_at": "2019-07-04 08:26:28"
},
{
"id": "3",
"customerNr": "54657",
"orderNr": "89856",
"pallet_id": "11228",
"status_id": "1",
"created_by": "Markus",
"created_at": "08 Jul 2019",
"updated_at": "2019-07-08 06:59:42"
}
],
"input": []
}
这是正确的格式。需要删除数据数组中最后一个对象后的逗号。你能确认这解决了你的问题吗？我让数据表在没有这个逗号的情况下工作。尽量提供最少的代码。如果可能的话，尝试使用代码片段。javascript中可能有一些错误。请尝试在开发人员工具中查看控制台。@ObitoUchiha感谢您的反馈。我提供了我认为需要查看的代码。我想我可以减少JSON输出，也许可以减少一些Javascript，但我认为所有的JS都是相关的，因为可能是更深层次的东西导致了这个问题。你能验证脚本运行调用以获取inf吗