我想用Yajra Datatables在Laravel中显示数据,但问题是数据还不能同步。
如果我做Dump and Diedd($orders),显示的数据数是4,但是如果我在Yajra数据表中显示它,显示的数据将是5。在这种情况下,正确的数据是数字4。
如何解决这个问题?下面是我创建的代码。
控制器
public function index(Request $request) {
if (request()->ajax()) {
// Query Builder
$startDate = Carbon::parse(request()->startDate)->format('Y-m-d H:i:s');
$endDate = Carbon::parse(request()->endDate)->format('Y-m-d H:i:s');
$orders = DB::connection('database_marketplace')->table('category')
->join('product', 'category.id', '=', 'product.category_id')
->join('order_summary', 'product.id', '=', 'order_summary.product_id')
->join('order', 'order_summary.order_id', '=', 'order.id')
->where('category.id', 6)
->where('order.order_status', 2)
->when(request()->startDate || request()->endDate, function($q) use ($startDate, $endDate) {
$q->whereBetween('order.created_at', [$startDate, $endDate]);
})
->select('product.id', 'product.name', 'product.price', 'product.description', 'product.created_at', 'product.updated_at', DB::raw('sum(order_summary.quantity) as quantity'))
->groupBy('product.id')
->get();
// End Query Builder
// dd($orders);
return DataTables::of($orders)
->addIndexColumn()
->editColumn('name', function($item) {
return $item->name;
})
->editColumn('order_count', function ($item) {
return $item->quantity;
})
->editColumn('ingredient', function($item) {
$data = \Str::between($item->description, 'Bahan-bahan:', 'Cara Membuat');
return nl2br($data);
})
->rawColumns(['name', 'order_count', 'ingredient'])
->make(true);
}
return view('admin.marketplace.shoppingList.index', [
'title' => 'Belanja',
'subtitle' => 'Daftar Belanja',
'date' => $request->date ?? null,
'startDate' => $request->startDate ?? null,
'endDate' => $request->endDate ?? null,
]);
}
刀片视图
@extends('layouts.app')
@section('title', "{$title}")
@section('styles')
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
table thead th {
font-family: 'Nunito Sans';
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 18px;
/* stroke */
color: #676767;
}
table tbody tr td {
font-family: 'Nunito Sans', sans-serif;
font-style: normal;
font-weight: 600;
font-size: 13px;
line-height: 18px;
color: #676767;
}
.toolbar {
float: right;
}
.date-filter {
float: left;
}
</style>
@endsection
@section('content')
<div class="card">
<div class="card-header d-flex justify-content-between">
<h4 class="text-dark">
{{ $subtitle }}
</h4>
{{--
<div class="d-flex">
--}}
<form class="form-inline" action="{{ route('marketplace.shoppingList.index') }}" method="GET">
<div class="form-group mx-sm-3 mb-2">
<label for="dateFilter" class="sr-only">Filter</label>
<input type="text" id="dateFilter" max="{{ date('Y-m-d') }}" class="form-control rounded mr-2" value="{{ old('date') ? old('date') : $date }}">
<input type="hidden" name="startDate" id="startDate" value="{{ old('startDate') ? old('startDate') : $startDate }}">
<input type="hidden" name="endDate" id="endDate" value="{{ old('endDate') ? old('endDate') : $endDate }}">
</div>
<button type="submit" class="btn btn-primary w-100 rounded">
Submit
</button>
</form>
{{-- <a href="#" id="export" class="btn btn-primary w-100 rounded">Download PDF</a> --}}
{{--
</div>
--}}
</div>
<div class="card-body">
<div class="table-responsive">
<table id="table-order" class="table table-striped table-bordered" style="width: 100%">
</table>
</div>
</div>
<div class="card-footer bg-whitesmoke">
Panen-panen Admin
</div>
</div>
@endsection
@section('modal')
<script type="text/javascript">
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$(function() {
oTable = $('#table-order').DataTable({
"columnDefs": [{
"defaultContent": "-",
"targets": "_all"
}],
processing: true,
serverSide: true,
ajax: {
url: '{{url()->current()}}'
},
columns: [
{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
title: 'No',
width: '5%',
},
{
data: 'name',
name: 'name',
title: 'Nama Produk',
width: '45%'
},
{
data: 'order_count',
name: 'order_count',
title: 'Jumah Pesanan',
width: '10%'
},
{
data: 'ingredient',
name: 'ingredient',
title: 'Bahan-bahan',
width: '40%'
},
],
});
});
</script>
{{-- Date time Range Picker --}}
<script>
$(function() {
$('#dateFilter').daterangepicker({
opens: 'left',
autoUpdateInput: false,
minDate: '2021-01-01 00:00:00',
timePicker: true,
timePicker24Hour: true,
locale: {
cancelLabel: 'Clear',
format: 'YYYY-MM-DD HH:mm:ss',
},
});
$('#dateFilter').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' - ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
$('#startDate').val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
$('#endDate').val(picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
});
$('#dateFilter').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
@endsection
2条答案
按热度按时间xxls0lw81#
你可以这样做:
叶片视图
控制器端-发送数据的方法
xmd2e60i2#
已解决
blade.php