I use DataTables in Laravel and after creating 50000 records I have this error:
DataTables warning: table id=employee_table - Ajax error. For more information about this error, please see http://datatables.net/tn/7
It used to work fine when I had 200 records, but now it throws this error. How can it be fixed?
My script:
$(document).ready(function() {
var table = $('.employee_datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('admin.employees.index') }}",
columns: [
{data: 'image_path', name: 'image_path', orderable: false, searchable: false},
{data: 'name', name: 'name'},
{data: 'position', name: 'position'},
{data: 'recruitment_date', name: 'recruitment_date'},
{data: 'phone_number', name: 'phone_number'},
{data: 'email', name: 'email'},
{data: 'payment', name: 'payment', render: $.fn.dataTable.render.number( ',', '.', 3, '$')},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
Index function to call the DataTable:
public function index(Request $request)
{
if ($request->ajax()) {
$data = Employee::with('position')->select('id','name','email', 'position_id', 'image_path', 'recruitment_date',
'phone_number', 'payment')->get();
return Datatables::of($data)->addIndexColumn()
->addColumn('position', function (Employee $employee) {
return $employee->position->name;
})->addColumn('image_path', function ($data) { $url=asset("images/$data->image_path");
return '<img src='.$url.' class="rounded-circle" width="40" align="center" />'; })
->addColumn('action', function($data){
$button = ' <i class="fas fa-fw fa-edit"></i>Edit';
$button .= ' <button type="button" name="edit" id="'.$data->id.'" class="delete btn btn-danger btn-sm"">
<i class="fas fa-fw fa-trash"></i> Delete</button>';
return $button;
})->rawColumns(['image_path', 'action'])
->make(true);
}
return view('admin.employees.index');
}
It was indeed because of get() so now my index function looks like this:
$data = Employee::with('position')->select('id','name','email', 'position_id', 'image_path', 'recruitment_date',
'phone_number', 'payment');
Thanks to Manjeet Barnala.
Related
I use this component in my project: yajra/laravel-datatables
I have controller:
public function dataTable(Request $request)
{
if ($request->ajax()) {
return Datatables::of($this->model->all())
->addIndexColumn()
->editColumn('enable', function ($row) {
if ($row->enable == 1)
return '<span class="label font-weight-bold label-lg label-light-success label-inline">aktywny</span>';
else return '<span class="label font-weight-bold label-lg label-light-danger label-inline">nieaktywny</span>';
})
->editColumn('name', function ($row) {
return Str::limit($row->name, 80, '...');
})
->addColumn('action', function ($row) {
$btn = '<i class="far fa-edit"></i> ';
$btn .= '<i class="removeItem far fa-trash-alt"></i> ';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
}
and html:
<table class="table table-bordered data-table ">
<thead>
<tr class="resources">
<th>ID</th>
<th>Nazwa produktu</th>
<th>Status</th>
<th width="100px" class="text-center">Akcja</th>
</tr>
</thead>
<tbody class="data-table-center">
</tbody>
</table>
</div>
<div class="datatable datatable-bordered datatable-head-custom" id="kt_datatable"></div>
$(function () {
var table = $('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('product.dataTable') }}",
language: {
url: "{{ asset('js/lang/Polish.json') }}"
},
iDisplayLength: 50,
render: function (data, type, row) {
return data;
},
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex'},
// {data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'enable', name: 'enable'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
});
In the status (enable) column I see this html instead of the final string. As if a blade would replace such html badly.
My result:
<span class="label font-weight-bold label-lg label-light-success label-inline">aktywny</span>
Prview: https://ibb.co/6tXdH65
How can I fix it?
just add enable in your action in dataTable function
->rawColumns(['action','enable'])
->make(true);
i try to use yajra datatables laravel
i have problem in searching
when i search data already exits in datatables it no working
me already try example in documentation but it not working for me
can someone please help me?
teach me how to do like i mean
example data
example searching
** this is my javascript datatables**
let oTable = $("#example1").DataTable({
responsive: true,
autoWidth: false,
processing: true,
serverSide: true,
ajax:
{
url: '{{ route("data.user.datatables") }}',
type: 'GET',
data: function (d) {
d.filter = $('select[name=filter]').val();
}
},
columns: [
{ data: 'id'},
{ data: function(data, type, row){
return 'Username : ' + data.username +
'<br> Email : ' + data.email +
'<br> Ponsel : ' + data.contact_number;
},
name: 'username'
},
{
data: function(data, type, row){
return 'Register Date : ' + data.created_at +
'<br> Last Login : ' + data.last_login +
'<br> App By : '+ data.app_admin +' / '+ data.date_admin_app +
'<br> App By : '+ data.login +' || '+ data.status_member;
},
name: 'created_at'
},
{ data: function(data, type, row){
return 'Saldo : ' + data.saldo +
'<br> Bank Name : ' + data.bank_name +
'<br> Account Name : '+ data.account_name +
'<br> Account Number : '+ data.account_number;
},
name:'saldo'
},
{ data: 'action', orderable: false, searchable: false}
],
order:[[0,'desc']],
});
this in my Laravel CONTROLLER
if($request->ajax()):
$request->validate([
'filter' => ['string','nullable','alpha'],
]);
if($request->filled('filter')):
$users = User::query()->where('status_member', $request->filter);
else:
$users = User::query();
endif;
$data = Datatables::of($users);
$data->addIndexColumn();
$data->addColumn('action', function ($user) {
return '<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<div class="btn-group" role="group">
<button id="btnGroupDrop1" type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Action</button>
<div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<a class="dropdown-item modal-edit-user" data-toggle="modal" data-target="#modalEditUser" href="javascript:void(0)" data-id="' . $user->id . '" data-username="' . $user->username . '" >Edit</a>
<a class="dropdown-item" href="#">Dropdown link</a>
</div>
</div>
</div>';
});
$data->rawColumns(['action']);
return $data->make();
endif;
You are forwarding nothing at all to user query.
Instead of
$users = User::query()->where('status_member', $request->filter);
...
$users = User::query();
try doing
$users = User::where('status_member', $request->filter)->get();
...
$users = User::all();
EDIT:
update your code:
{ data: 'action', orderable: false, searchable: false}
to
{ data: 'action', orderable: false, searchable: true}
I was using from a Laravel project well, But today, this error appears on one of the pages:
Error: DataTables warning: table id=DataTables_table_0 - Ajax error.
For more information about this error, please see
http://datatables.net/tn/7
The recourses codes:
#extends('admin.layouts.app')
#section('title', getOption('app_name') . ' - Orders')
#section('content')
#php
$status = $status ?? false;
$dataURL = $status ? "/admin/orders-filter-ajax/$status/data" : "/admin/orders-ajax/data";
#endphp
<div class="row">
<div class="col-md-12" style="margin-bottom: 5px;">
<div class="btn-group">
<button type="button" class="btn btn-info btn-sm hide" id="apply-all">Apply</button>
</div>
<div class="btn-group">
ALL
Pending
In Progress
Completed
Partial
Refunded
Cancelled
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-body">
<form id="frm-apply-all" action="{{ url('/admin/orders-bulk-update') }}" method="post">
{{ csrf_field() }}
</form>
<div class="table-responsive">
<table class="table table-bordered mydatatable table-hover" style="width: 99.9%">
<thead>
<tr>
<th><input type="checkbox" class="input-sm checkbox-all"></th>
<th>#lang('general.order_id')</th>
<th>Api #lang('general.order_id')</th>
<th>#lang('general.user')</th>
<th>#lang('general.service')</th>
<th>#lang('general.package')</th>
<th>#lang('general.link')</th>
<th>#lang('general.amount')</th>
<th>#lang('general.quantity')</th>
<th>#lang('general.start_counter')</th>
<th>#lang('general.remains')</th>
<th>#lang('general.status')</th>
<th>#lang('general.date')</th>
<th class="text-center" width="5%">#lang('general.action')</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
#endsection
#push('scripts')
<script>
$(function () {
$('.mydatatable').DataTable({
processing: true,
serverSide: true,
pageLength: 25,
order: [[1, 'desc']],
ajax:'{!! url($dataURL) !!}',
columns: [
{data: 'bulk', name: 'bulk', orderable: false, searchable: false},
{data: 'id', name: 'id'},
{data: 'api_order_id', name: 'api_order_id'},
{data: 'user.name', name: 'user.name'},
{data: 'package.service.name', name: 'package.service.name'},
{data: 'package.name', name: 'package.name'},
{data: 'link', name: 'link'},
{data: 'price', name: 'price', sortable: false, searchable: false},
{data: 'quantity', name: 'quantity', sortable: false, searchable: false},
{data: 'start_counter', name: 'start_counter', sortable: false, searchable: false},
{data: 'remains', name: 'remains', sortable: false, searchable: false},
{data: 'status', name: 'status'},
{data: 'created_at', name: 'created_at'},
{data: 'action', name: 'action', orderable: false, searchable: false},
]
});
$(document).on('click', '.checkbox-all', function () {
$('.row-checkbox').trigger('click');
$('#apply-all').removeClass('hide');
});
$(document).on('click', '.row-checkbox', function () {
$('#apply-all').removeClass('hide');
var t = $(this);
if (t.is(':checked')) {
t.parents('tr').find('.row-edit').removeAttr('readonly');
t.parents('tr').attr('style', 'background-color:#dedede');
} else {
t.parents('tr').find('.row-edit').attr('readonly', 'readonly');
t.parents('tr').removeAttr('style');
}
});
$('#apply-all').on('click', function (e) {
var form = $('#frm-apply-all');
var isAnyRowSelected = false; // check if it shouldn't submit empty form
bootbox.confirm({
message: "Confirm to apply bulk update?",
buttons: {
cancel: {
label: 'Cancel',
className: 'btn-default'
},
confirm: {
label: 'Confirm',
className: 'btn-primary'
},
},
callback: function (result) {
if (result) {
// Iterate over all checkboxes in the table
$('.row-checkbox').each(function () {
var t = $(this);
if (t.is(':checked')) {
isAnyRowSelected = true; // Row selected
// Order id
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', t.attr('name'))
.val(t.val())
);
// start count
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'start_counter[' + t.val() + ']')
.val($('input[name="start_counter[' + t.val() + ']"]').val())
);
// remains
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'remains[' + t.val() + ']')
.val($('input[name="remains[' + t.val() + ']"]').val())
);
// status
$(form).append(
$('<input>')
.attr('type', 'hidden')
.attr('name', 'status[' + t.val() + ']')
.val($('select[name="status[' + t.val() + ']"]').find(':selected').text())
);
}
});
if (isAnyRowSelected) {
form.submit();
}
}
}
});
});
});
</script>
#endpush
I didn't change any thing in my project today
It worked yesterday well:(
I'm having an issue with the laravel's datatables plugin, when I'm trying to delete an element from my datatables list it calls a show method, making the delete impossible. Can someone explain me why it behaves like that and how to fix it ? Here is my code.
Controller :
public function destroy($project) {
$project = Project::find($project);
$project->delete();
session()->flash('message', 'projet supprimé');
return redirect()->back();
}
public function ajaxListing() {
$projects = Project::select(['id', 'title']);
return Datatables::of($projects)
->addColumn('action', function ($project) {
return '<a class="data-action" href="'.route('projects.edit', $project->id).'">
<i class="fa fa-pencil-square-o fa-2x" aria-hidden="true"></i></a>
<a class="data-action" href="'.route('projects.destroy', $project->id).'">
<i class="fa fa-times fa-2x" aria-hidden="true"></i></a>';
})
->make(true);
}
View :
<table class="table table-bordered table-striped dataTable" id="listingProjects">
<thead>
<th>ID</th>
<th>Titre</th>
<th>Actions</th>
</thead>
</table>
#push('scripts')
<script>
$(document).ready(function () {
$('#listingProjects').DataTable({
processing: true,
serverSide: true,
ordering: true,
language: {
processing: "Traitement en cours...",
search: 'Recherche : ',
lengthMenu: "Afficher _MENU_ éléments",
info: "Affichage de l'élement _START_ à _END_ sur _TOTAL_ éléments",
paginate : {
first : '<i class="fa fa-fast-backward" aria-hidden="true"></i>',
previous : '<i class="fa fa-chevron-circle-left" aria-hidden="true"></i>',
next : '<i class="fa fa-chevron-circle-right" aria-hidden="true"></i>',
last: '<i class="fa fa-fast-forward" aria-hidden="true"></i>',
}
},
ajax: '{!! route('datatables.projectData') !!}',
columns: [
{data: 'id', name: 'id'},
{data: 'title', name: 'title'},
{data: 'action', name: 'action', orderable: false, searchable: false}
]
});
});
</script>
#endpush
Routes :
Route::any('project-data', 'Admin\ProjectsController#ajaxListing')->name('datatables.projectData');
Route::resource('projects', 'Admin\ProjectsController');
I finally found the answer, the problem was in the route, we need to add an except to the resource route and create our own delete route, like that :
Route::get('projects/{project}/delete', 'Admin\ProjectsController#destroy')->name('projects.destroy');
Route::resource('projects', 'Admin\ProjectsController', ['except' => 'destroy']);
That way we just need to call the route on the link in the view.
I'm using Yajra datatable, I had an issue as what title said.
here's my controller so far :
public function makeActionButtonsForDatatable($model)
{
if ($model->employed_type == DriverEmployedType::PARTTIME) {
return '<a href="' . route('parttimeavailable.create', ['driver' => $model->id]) . '"
class="btn btn-default btn-xs"></span>Set Parttime
</a>
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>';
}
switch ($model->status) {
default:
return'
<a href="' . route('driver.edit', ['driver' => $model->id]) . '"
class="btn btn-primary btn-xs"><span class="fa fa-pencil"></span> Edit
</a>
<a id="delBtn" data-url="'.route('driver.destroy', ['driver' => $model->id]).'"
data-toggle="modal" data-target=" #modalDelete" data-title="Confirmation" data-table-name="#datatable" data-message="Do you want to delete this record?"
class="btn btn-danger btn-xs delete" >
<span class="fa fa-trash-o"></span> Delete
</a>
';
break;
}
}
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return '<a href="' . route('driver.edit', ['driver' => $model->full_name]) . '"</a>';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
and here's my datatable code so far :
$(document).ready(function(){
var datatable = $('#datatable').DataTable(
{
dom: "lrtip",
responsive: true,
processing: true,
serverSide: true,
bSortCellsTop: true,
ajax: {
url: "{{ route('driver.list') }}",
data: { '_token' : '{{csrf_token() }}'},
type: 'POST',
},
columns: [
{ data: 'full_name', name: 'full_name', className: 'text-center', },
{ data: 'mobile', name: 'mobile', className: 'text-center', },
{ data: 'nric', name: 'nric', className: 'text-center', },
{ data: 'license', name: 'license', className: 'text-center', },
{ data: 'employed_type', name: 'employed_type', className: 'text-center', },
{ data: 'action', name: 'action', className: 'text-center', orderable: false, searchable: false },
],
});
});
It didn't works, and didn't display my fullname column. I want is once I click the name it goes to edit form with that driver Id.
any idea ?
I think you missed to close <a> for fullName column, try below code:
public function makeDatatable($obj) {
return Datatables::of($obj)
->addColumn('action', function ($model) {
return $this->makeActionButtonsForDatatable($model);
})
->editColumn('full_name', function($model) {
return ''. $model->full_name .'';
})
->editColumn('employed_type', function($model){
return DriverEmployedType::getString($model->employed_type);
})
->make(true);
}
Let me know if you still facing the same!