Javascript Laravel DatatableJs无效的JSON响应
我正在从事拉威尔项目。。我面临此Datatable的问题，它一直给我“DataTables警告：table id=customer table-无效JSON响应。有关此错误的更多信息，请参阅，我尝试在controller中添加（$items），但没有任何问题。我认为它没有看到函数。您能帮助我吗Javascript Laravel DatatableJs无效的JSON响应,javascript,laravel,datatable,Javascript,Laravel,Datatable,我正在从事拉威尔项目。。我面临此Datatable的问题，它一直给我“DataTables警告：table id=customer table-无效JSON响应。有关此错误的更多信息，请参阅，我尝试在controller中添加（$items），但没有任何问题。我认为它没有看到函数。您能帮助我吗 my controller is: public function getBasicData(Request $request){ $items = Customers::join('u
my controller is:
public function getBasicData(Request $request){
$items = Customers::join('users', 'users.id', '=', 'customers.user_id')
->select('customers.*', 'users.username','users.active')
->orderBy('id', 'DESC');
return Datatables::of($items)
->editColumn('vehicle', function ($item) {
return '<a href="'.route("customers.showvehicles", $item->id).'">Vehicle</a>';
})
->editColumn('email_notification', function ($item) {
dd($item);
$template = 'emails.customer_notification';
return '<a href="'.route("customer.mail", array($item->user_id, $template) ).'">Send</a>';
})
->editColumn('created_at', function ($item) {
return date('Y-m-d', strtotime($item->created_at));
})
->editColumn('active', function ($item) {
if($item->active == 0)
{
return 'Inactive';
}
else
{
return 'Active';
}
})
->addColumn('action', function ($item) {
$customer_name = ucfirst($item->name);
return '<a href="'.route("customers.edit", $item->id).'" class="btn btn-icon btn-flat" data-toggle="tooltip" data-placement="top" title="Edit"><i class="far fa-edit text-dark"></i></a>
<form action="'.route("customers.destroy", $item->id).'" method="post" style="display:inline-block; vertical-align: middle; margin: 0;">
<input type="hidden" name="_token" value="'.csrf_token().'">
<input type="hidden" name="_method" value="DELETE">
<button type="button" data-toggle="modal" data-target="#modal_confirm_cus_del" data-title="Delete Customer" data-message="Are you sure you want to delete this customer '.$customer_name.' ?"
class="btn bg-transparent btn-clean btn-icon btn-flat btnCustomerDelete" data-toggle="tooltip" data-placement="top" data-cus_del_url="'.route("customers.destroy", $item->id).'" data-remove_button_id="'.$item->id.'" id="cus_del_'.$item->id.'"
style="margin-top: 5px;height:22px;width:60px;"title="Delete"><i class="far fa-trash-alt text-danger"></i></button>
</form>
';
})
->filter(function ($query) use ($request) {
if ($request->has('email') && $request->has('email') != '') {
$query->where('customers.email', '=', "{$request->get('email')}");
}
if ($request->has('active') && $request->has('active') != '') {
$query->where('users.active', '=', "{$request->get('active')}");
}
if ($request->has('mobile') && $request->has('mobile') != '') {
$mob_num = "%".trim(preg_replace('/[^0-9]/', '', $request->get('mobile')))."%";
$query->whereRaw("(replace(replace(replace(replace(replace(customers.mobile, '+', ''), '-', ''),'(',''),')',''),' ','') LIKE ? )",[$mob_num]);
}
if ($request->has('telephone') && $request->has('telephone') != '') {
$telephone = "%".trim(preg_replace('/[^0-9]/', '', $request->get('telephone')))."%";
$query->whereRaw("(replace(replace(replace(replace(replace(customers.telephone, '+', ''), '-', ''),'(',''),')',''),' ','') LIKE ? )",[$telephone]);
}
if ($request->has('name') && $request->has('name') != '') {
$query->where('customers.name', 'like', "%{$request->get('name')}%");
}
if($request->has('plate') && $request->has('plate') != '') {
$query->join('vehicles', 'vehicles.customer_id', '=', 'customers.id');
//$query->where('vehicles.plate','=' ,'GJ12323');
$query->groupby('customers.id');
$query->where('vehicles.plate', 'like', "%{$request->get('plate')}%");
}
})
->rawColumns(['action', 'vehicle','created_at','email_notification','active'])
->make(true);
}
my blade is:
@extends('layouts.blank') @push('stylesheets')
<!-- Example -->
<!--<link href=" <link href="{{ asset("css/myFile.min.css") }}" rel="stylesheet">" rel="stylesheet">-->
@endpush @section('main_container')
<!-- Start right Content here -->
<!-- ============================================================== -->
<div class="content-page">
<!-- Start content -->
<div class="content">
<div class="container-fluid">
<!-- end row -->
<div class="row">
<div class="col-12">
<div class="card-box">
<div class="row">
<div class="col-sm-12 col-xs-12 col-md-12 col-lg-12">
<p>@include('partials._flash')</p>
<div class="">
<table id="customer-table" class="table table-bordered dt-responsive nowrap"
style="border-collapse: collapse; border-spacing: 0; width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Mobile</th>
<th>Tel</th>
<th>Vehicles</th>
<th>Created Date</th>
<th>Status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- end row -->
</div>
</div>
<!-- end col-->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
</div>
<!-- End content-page -->
<!-- ============================================================== -->
<!-- End Right content here -->
<!-- ============================================================== -->
{{-- @include('includes.delete') --}}
@endsection @push('scripts')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.1/js/buttons.print.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.close_search').click(function() {
$('body').find("input,select").val('').end();
});
$.extend(true, $.fn.dataTable.defaults, {
"searching": false
});
var oTable = $('#customer-table').DataTable({
// dom: 'Blrtip',
// buttons: ['copy', 'csv', 'excel'],
// lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
order: [
[0, 'desc']
],
responsive: true,
processing: true,
serverSide: true,
filter: true,
ajax: {
// url: "{{ url('customers/getBasicData')}}",
url: "{{route('customers.getBasicData')}}",
data: function(d) {
console.log(d);
d.plate = $('input[name=plate]').val();
d.name = $('input[name=name]').val();
d.email = $('input[name=email]').val();
d.mobile = $('input[name=mobile]').val();
d.telephone = $('input[name=telephone').val();
d.active = $('#active').val();
}
},
displayLength: 10,
lengthMenu: [10, 25, 50, 75, 100],
columns: [{
data: 'id',
name: 'id',
visible: false
},
{
data: 'name',
name: 'name'
},
{
data: 'email',
name: 'email'
},
{
data: 'mobile',
name: 'mobile'
},
{
data: 'telephone',
name: 'telephone'
},
{
data: 'vehicle',
name: 'vehicle',
orderable: false,
searchable: false
},
{
data: 'created_at',
name: 'created_at'
},
{
data: 'active',
name: 'active'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false,
className: 'text-center',
width: '100px'
},
],
columnDefs: [{
targets: 0,
orderable: false,
responsivePriority: 1,
},
{
targets: -1,
responsivePriority: 3,
}
],
language: {
"decimal": "",
"emptyTable": "No data available in table",
"info": "Showing _START_ to _END_ of _TOTAL_ entries",
"infoEmpty": "Showing 0 to 0 of 0 entries",
"infoFiltered": "(filtered from _MAX_ total entries)",
"infoPostFix": "",
"thousands": ",",
"lengthMenu": "Show _MENU_ entries",
"loadingRecords": "Loading...",
"processing": "<div class='text-blue'><i class='fa fa-cog fa-5x fa-spin'></i><p>Working, Please wait ..</p></div>",
"search": "Search:",
"zeroRecords": "No matching records found",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
"aria": {
"sortAscending": ": activate to sort column ascending",
"sortDescending": ": activate to sort column descending"
}
},
});
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
$('#search-form').on('submit', function(e) {
oTable.draw();
//$('.bs-example-modal-sm').hide();
$('.bs-example-modal-sm').modal('hide');
e.preventDefault();
});
$('#modal_confirm_cus_del').on('show.bs.modal', function(e) {
$message = $(e.relatedTarget).attr('data-message');
del_url = $(e.relatedTarget).attr('data-cus_del_url');
remove_button_id = $(e.relatedTarget).attr('data-remove_button_id');
$(this).find('.modal-body p').text($message);
$title = $(e.relatedTarget).attr('data-title');
$(this).find('.modal-title').text($title);
$('#modal_confirm_cus_del').find('.modal-footer #confirm_delete_customer').attr('data-cus_del_url', del_url);
$('#modal_confirm_cus_del').find('.modal-footer #confirm_delete_customer').attr('data-remove_button_id', remove_button_id);
// Pass form reference to modal for submission on yes/ok
// var form = $(e.relatedTarget).closest('form');
//$(this).find('.modal-footer #confirm').data('form', form);
});
$('#modal_confirm_cus_del').find('.modal-footer #confirm_delete_customer').on('click', function() {
//$(this).data('form').submit();
var that = $(this);
that.prop('disabled', true);
del_url = that.data('cus_del_url');
remove_button_id = that.data('remove_button_id');
$.ajax({
url: del_url,
type: 'POST',
data: {
_token: '{{ csrf_token() }}',
_method: 'delete'
},
success: function(result) {
$('#modal_confirm_cus_del').modal('hide');
$('#cus_del_' + remove_button_id).closest('tr').remove();
that.prop('disabled', false);
location.reload();
},
complete: function() {
that.prop('disabled', false);
}
});
});
$(function() {
$('[data-toggle="tooltip"]').tooltip()
});
});
</script>
@endpush
我的控制器是：
公共函数getBasicATA（请求$Request）{
$items=Customers:：join（'users'，'users.id'，'='，'Customers.user_id'））
->选择（'customers.*'、'users.username'、'users.active'）
->orderBy（'id'，'DESC'）；
返回数据表：：of（$items）
->编辑栏（“车辆”，功能（$item）{
返回“”；
})
->editColumn（'email_notification'，函数（$item）{
dd（项目）；
$template='emails.customer_notification'；
返回“”；
})
->editColumn（'创建时间'，函数（$item）{
返回日期（'Y-m-d'，strottime（$item->created_at））；
})
->editColumn（'active'，函数（$item）{
如果（$item->active==0）
{
返回“不活动”；
}
其他的
{
返回“活动”；
}
})
->addColumn（'action'，函数（$item）{
$customer\u name=ucfirst（$item->name）；
返回'
';
})
->过滤器（函数（$query）使用（$request）{
如果（$request->has（'email'）&&（$request->has（'email'）！=“”）{
$query->where（'customers.email'，'='，“{$request->get（'email'））；
}
如果（$request->has（'active'）&&$request->has（'active'）！=“”）{
$query->where（'users.active'，'='，“{$request->get（'active'）}”）；
}
如果（$request->has（'mobile'）&&&$request->has（'mobile'）！=“”）{
$mob_num=“%”。trim（preg_replace（'/[^0-9]/'），'$request->get（'mobile'））。“%”；
$query->WHERRAW（“（替换（替换）（替换（替换）（替换（customers.mobile，“+”，“-”，“，”），“（”，“，”），“，”），“，”）类似？，[$mob_num]）；
}
如果（$request->has（'telephone'）&&&$request->has（'telephone'）！=“”）{
$telephone=“%”。修剪（preg_replace（“/[^0-9]/”，“$request->get（'telephone'））。“%”；
$query->whereRaw（“（替换（替换）（替换（替换）（替换（customers.telephone，“+”，“-”，“，”），“（”，“，”），”，“，”）类似？，[$telephone]）；
}
如果（$request->has（'name'）&&$request->has（'name'）！=“”）{
$query->where（'customers.name'，'like'，“%{$request->get（'name'）}%”；
}
如果（$request->has（'plate'）&&（$request->has（'plate'）！=“”）{
$query->join（'vehicles'，'vehicles.customer_id'，'='，'customers.id'）；
//$query->where（'vehicles.plate'，'='，'GJ12323'）；
$query->groupby（'customers.id'）；
$query->where（'vehicles.plate'，'like'，“%{$request->get（'plate'）}%”；
}
})
->RAW列（['action'、'vehicle'、'created_at'、'email_notification'、'active']））
->使（真实）；
}
我的刀是：
@扩展（'layouts.blank'）@push（'stylesheets'））
@endpush@section（'主容器'）
@包括（'partials.\u flash'）
身份证件
名称
电子邮件
可移动的
电话
车辆
创建日期
地位
行动
{{--@include（'includes.delete'）--}
@endsection@push（'脚本'）
$（文档）.ready（函数（）{
$（'.close_search'）。单击（函数（）{
$（'body'）.find（“输入，选择”）.val（“”）.end（）；
});
$.extend（true，$.fn.dataTable.defaults{
“搜索”：错误
});
var oTable=$（“#客户表”）.DataTable({
//dom:'Blrtip'，
//按钮：[“复制”、“csv”、“excel”]，
//长度菜单：[[10,25,50，-1]，[10,25,50，“全部”]，
订单：[
[0，‘描述’]
],
回答：是的，
处理：对，
服务器端：是的，
过滤器：对，
阿贾克斯：{
//url:“{url（'customers/getBasicData'）}}”，
url:“{route（'customers.getBasicData'）}}”，
数据：功能（d）{
控制台日志（d）；
d、 plate=$（'input[name=plate]'）。val（）；
d、 name=$（'input[name=name]'）。val（）；
d、 email=$（'input[name=email]'）。val（）；
d、 mobile=$（'input[name=mobile]'）.val（）；
d、 电话=$（'input[name=telephone'）.val（）；
d、 active=$（'#active'）.val（）；
}
},
显示长度：10，
长度菜单：[10,25,50,75,100]，
栏目：[{
数据：“id”，
姓名：“id”