Summary of problem or feature request
The reply o load datatable is very slow, betwen 3-5seg
How can I optimize the data load?
when I did not use server inside it was much faster..
first of all, Thanks
Code snippet of problem
Controller
public function list_user(){
$users = User::all();
$users->each(function ($users)
{
$users->role;
});
return datatables()->collection($users)->toJson();
}
Js
function activar_tabla_users() {
$('#DataTableUser').DataTable({
"processing" : true,
"serverSide" : true,
"searchDelay" : 500,
"responsive": {
orthogonal: 'responsive'
},
"language": {
"url": '{!! asset('/plugins/datatables.net/latino.json') !!}'
} ,
"lengthMenu": [5,10, 25, 50, 75 ],
"ajax":'{!! url('admin/list_user') !!}',
columns: [
{data: 'id' },
{data: 'username'},
{data: 'name',
render: function (data, type, row, meta) {
return row.name + ' ' + row.lastname;
}
},
{data: 'email'},
{data: 'role.name',
render: function(data, type, row, meta) {
var html = ''
if ( row.role.name == 'Administrador' )
{
html = '<span class="label label-danger" > <label style="width:80px;"> '+row.role.name+' </label></span>';
}else {
html = '<span class="label label-primary" > <label style="width:80px;"> '+row.role.name+' </label></span>';
}
return html;
}
}
}],
});
}
activar_tabla_users();
You are using server side to get table data. Don't call all() as it will get all.
Replace:
$users = User::all();
With:
$users = User::query();
This only renders the required data in data-table page.
And, don't use loop to get role. Use eager loading using with();
$users = User::query()->with('role');
$users = User::all();
$users->each(function ($users)
{
$users->role;
});
with this the following?
$users = User::with('role');
Datatable adds pagination options automatically. if you use all() it calls all the data from the table.
Another thing is did you checked that it takes 2/3sec to get data from the server or does it takes this time to format the data in the view?
replace
$users = User::all();
$users->each(function ($users)
{
$users->role;
});
with this:
$users = User::with('role')->get();
This will use one db request instead of over 1k requests (you were making a call for each user to get their role). If you display all 1300 users at once, only request the "page" you need with laravels built in pagination, https://laravel.com/docs/5.6/pagination#paginating-eloquent-results
Related
I have datatables column as such:
var showMasterUserTable = function () {
masterIcon = $('#master_user_table').DataTable({
processing: true,
serverSide: true,
responsive: true,
ajax: {
url: ROOT + 'master-voucher-bit-x/data',
},
columns: [
{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
searchable: false,
orderable: false
},
{
data: 'voucher_code',
name: 'voucher_code',
},
{
data: 'status',
name: 'status',
},
{
data: 'track',
name: 'track',
},
{
data: 'user_use',
name: 'user_use',
orderable: true
},
{
data: 'progress',
name: 'progress',
},
{
data: 'quiz_score',
name: 'quiz_score',
},
{
data: 'urlQr',
name: 'urlQr',
}
]
});
};
As long as i know from the yajra and datatables docs that searchable and orderable is default to be true when it remains unwritten, i have encounter the issue where searchable only search for voucher_code column no matter if i set all the searchable to true. I want to search for user_use column instead. If i set all the searchable to false, the table data cannot be loaded. How should i overcome it? Here's my controller code:
{
$model = VoucherBitX::select('voucher_bit_x.*', 'users.email')
->join('users', 'voucher_bit_x.user_id', '=', 'users.id')
->orderBy("voucher_bit_x.redeem_at","DESC");
return DataTables::of($model)
->addColumn('status', function ($data) {
if($data->status > 0)
$status = '<div><span class="badge badge-success"> Available </span></div>';
else
$status = '<div><span class="badge badge-danger"> Not Available </span></div>';
return $status;
})
->addColumn('urlQr', function ($data) {
$user = UserApp::find($data->user_id);
$a = "";
if(!empty($user) && isset($user->ref_id)){
$quiz = QuizScore::where("track_id",$data->track_id)->where("user_id",$data->user_id)->first();
if($quiz && $quiz->status){
$track = Track::find($data->track_id);
$urlQr = 'https://xxx.id/api/certificate/'.base64_encode(json_encode(["user_id"=>$user->id,"slug"=>$track->slug,"track_id"=>$track->id]));
$a = 'Download Certificate';
}
}
return $a;
})
->addColumn('quiz_score', function ($data) {
$score = 0;
$quiz = QuizScore::where("track_id",$data->track_id)->where("user_id",$data->user_id)->first();
if($quiz){
$score = $quiz->score;
}
return $score;
})
->addColumn('progress', function ($data) {
$progress = 0;
$solve = Track::userProgress($data->user_id,$data->track_id);
if(!empty($solve)){
$progress = $solve;
}
return $progress."%";
})
->addColumn('user_use', function ($data) {
$user = UserApp::find($data->user_id);
if(!empty($user))
return $user->name." (".$user->email.")";
return '-';
})
->addColumn('track', function ($data) {
$track = Track::find($data->track_id);
return isset($track->title)?$track->title:"";
})->rawColumns(['quiz_score','status','user_use','track','urlQr'])
->addIndexColumn()->make(true);
}
*Edit:
I have realized that datatables returned a response that included used query like this:
New question: just where the hell that query json field configuration? On my eloquent query above there is no such thing as where and like query. Haven't found that things both in yajra and datatables documentation. What i want is to modify the where field to users.email instead voucher_bit_x.voucher_code
use columns.searchable
Using this parameter, you can define if DataTables should include this column in the filterable data in the table. You may want to use this option to disable search on generated columns such as 'Edit' and 'Delete' buttons for example.
$('#example').dataTable( {
"columnDefs":
[
{ "searchable": false, "targets": 0 }
]
});
This will disable the search of multiple columns as specified n the target. If you want multiple columns then try using
{ "searchable": false, "targets": [0,1,2] }
Where targets 0 1 and 2 are number of columns starting index from 0
I did a multiselect input dropdown using select2. However, I dont really sure how to fetch the data that I call from database in the dropdown so that I can view it in datatable. Here are my codes:
Script for input dropdown select2:
$('.ethnicity').select2({
placeholder: 'Select..',
ajax: {
url: '/select2-autocomplete-ajax_ethnicity',
dataType: 'json',
delay: 250,
processResults: function ($ethnicity) {
return {
results: $.map($ethnicity, function (item) {
return {
text: item.Bangsa_updated,
id: item.id,
}
})
};
Controller for input dropdown so it will select the input typed:
public function ethnicity(Request $request)
{
$ethnicity = [];
if($request->has('q')){
$search = $request->q;
$ethnicity = DB::table("user")
->select("id","ethnic")
->where('ethnic','LIKE',"%$search%")
->get();
}
return response()->json($ethnicity);
}
The above code only to select the data from database without fetch data to datatable.
The controller below to catch data into datatable (I used this for simple dropdown, however dont know how to change so it is useful for above input dropdown.
public function fnFilter(Request $request)
{
if(request()->ajax())
{
if(!empty($request->dataGender))
{
$data = DB::table('user')
->select('id', 'Fn', 'Ln')
->where('ethnic', $request->ethnicity)
->get();
}
else
{
$data = DB::table('user')
->select('id', 'Fn', 'Ln', 'Umur', 'Phone', 'Dob','St', 'Country','Zip','Ct','Jantina')
->get();
}
return datatables()->of($data)->make(true);
}
$dataName = DB::table('modified_dpprs')
->select('ethnic','Jantina')
->groupBy('ethnic')
->orderBy('ethnic', 'ASC')
->get();
return response()->json($dataName);
Blade is:
<select id="ethnicity" class=" ethnicity form-control select2-allow-clear" style="width:200px;" name="namaDUN" multiple >
<option value="">Select</option>
My idea is to put the result from controller function ethnicity into function fnFilters. But I dont know how can do it.
you can return response in select2 (controller function) required format
like
$final_array = [];
$ethnicity = DB::table("user")
->select("id","ethnic");
if ($request->search != '') {
$search = $request->search ;
$ethnicity=$ethnicity->where('ethnic','LIKE',"%$search%");
}
// loop the results to make response
foreach($ethnicity->get() as $key => $value):
$final_array[$key]['id'] = $value->id;
$final_array[$key]['text'] = $value->ethnic;
endforeach;
return ['results' => $final_array];
// function ends here
and select 2 tag in blade file like this
$('.ethnicity').select2({
placeholder: 'Select..',
ajax: {
url: '/select2-autocomplete-ajax_ethnicity',
minimumInputLength: 3,
data: function (params) {
var query = {
search: params.term,
page: params.page || 1
}
return query;
}
}
});
Currently, i am on the show page that is i am running the function show as in my controller so my url is showing like dashboard/1/people in the url address bar. Now, when i click on a person, it routes to a different page and that is where getPeople is called.
How can i get the id of the person i clicked which is 1 from the ajax request in the scripts and pass to my controller?
PS: At the moment, i have hardcoded 1 in the ajax request but i want it to be dynamic please
How do i get this done?
Script
datatable = $('#table').DataTable({
"ajax": "{{ route('dashboard/1/people') }}",
"columns": [
{data: 'check', name: 'check'},
],
Controller
public function show($id)
{
$class = Class::whereId($id)->first();
return view('show');
}
public function getPeople($id)
{
$get_id = $id;
$class = Class::whereId($get_id)->first();
$people = $class->peoples()->get();
return Datatables::of($people)->addColumn('action', function ($ppl) {
//return
})->make(true);
}
This should work:
In your getPeople method store the id in a session variable:
public function getPeople($id)
{
$get_id = $id;
//using session helper method
session(['show_id' => $id]);
$class = Class::whereId($get_id)->first();
$people = $class->peoples()->get();
return Datatables::of($people)->addColumn('action', function ($ppl) {
//return
})->make(true);
}
and then access it in you ajax code:
datatable = $('#table').DataTable({
"ajax": "{{ route('dashboard/'.session('show_id').'/people') }}",
"columns": [
{data: 'check', name: 'check'},
],
DataTable ajax allows yo to pass extra parameters in object format just like this:
datatable = $('#table').DataTable({
"ajax": {
"type": "GET",
data:{id: my_id_var},
"url": "my_route"
}
}
And in your function just get the Request var
public function getPeople(Request $request){
$get_id = $request->id;
$class = Class::whereId($get_id)->first();
$people = $class->peoples()->get();
return Datatables::of($people)->addColumn('action', function ($ppl) {
//return
})->make(true);
}
More Information in Sorce Page
I am using laravel 5.0
I am also using datatable jquery plugin to display grid.
Controller mehtod
public function index() {
$jobs = \App\Job::orderBy('created_at', 'DESC')->limit(1000)->get();
return View::make('jobs.index', ['jobs' => $jobs]);
}
The issue:
Right now I hard-coded the ->limit(1000) to 1000 jobs in datatable grid to display
it but i have more then 1000 records to display.
What I want?
I want to display 500 records with grid and then 500 records.
I am not sure if there is any call back data-table plugin function available?
I need a dynamic way to load next 500
NOTE:
I am not willing to us this solution of scrolling
https://datatables.net/extensions/scroller/examples/initialisation/server-side_processing.html
You can user ajax data source:
please visit : https://datatables.net/examples/ajax/objects.html
Example PHP Script:
// function will process the ajax request
public function getMembers(Request $request) {
$draw = $request->get('draw');
$start = $request->get('start');
$length = $request->get('length');
$search = (isset($filter['value']))? $filter['value'] : false;
$total_members = 1000; // get your total no of data;
$members = $this->methodToGetMembers($start, $length); //supply start and length of the table data
$data = array(
'draw' => $draw,
'recordsTotal' => $total_members,
'recordsFiltered' => $total_members,
'data' => $members,
);
echo json_encode($data);
}
Example JavaScript :
$('#all-member-table').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
url: base_url+"ajax/members"
},
"columns": [
{ data: '1' },
{ data: '2' },
{ data: '3' },
{ data: '4' },
{ data: '5' },
]
} );
Example HTML:
<table id="all-member-table">
<thead>
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
<th>Column4</th>
<th>Column5</th>
</tr>
</thead>
</table>
I think above answer should be extended with search feature.
Update the answer;
$filter = $request->get('search');
$search = (isset($filter['value']))? $filter['value'] : false;
where('somecolumnonyourdb','like', '%'.$search.'%')
This works for me
You can use standard pagination:
$jobs = \App\Job::latest()->paginate(500);
Or create it manually.
So in this app Drawing belongsTo Customer. I have datatable
<table id='drawing-table' class="table table-bordered table-hover">
<thead>
<tr>
<th>Drawing number</th>
<th>Customer</th>
</tr>
</thead>
</table>
which indicates $darwing->number and $customer->title. To load info I use yajra\Datatables\Datatables;.
Data is loaded with this JS method:
$(function () {
$('#drawing-table').DataTable({
processing: true,
serverSide: true,
ajax: '{{route('drawings.datatable')}}',
columns: [
{ data: 'number', name: 'number' },
{ data: 'customer.title', name: 'customer' },
]
});
});
And this Laravel method:
public function datatable()
{
$drawings = Drawing::select(array('drawings.id','drawings.number'));
return Datatables::of(Drawing::with('customer')->select('*'))->make(true);
}
QUESTIONS
How do I make datatable search window to work with $customer->title?
How do I display drawing number and customer title as link?
public function datatable()
{
//reference customer table
$drawings = DB::table('customers')
// join it with drawing table
->join('drawings', 'drawings.customer_id', '=', 'customers.id')
//select columns for new virtual table. ID columns must be renamed, because they have the same title
->select(['drawings.id AS drawing_id', 'drawings.number', 'customers.title', 'customers.id AS customer_id']);
// feed new virtual table to datatables and let it preform rest of the query (like, limit, skip, order etc.)
return Datatables::of($drawings)
->editColumn('title', function($drawings) {
return '' . $drawings->title . '';
})
->editColumn('number', function($drawings) {
return '' . $drawings->number . '';
})
->make(true);
}
Spent many hours trying to figure it out, hope it saves someone time.
http://datatables.yajrabox.com/fluent/joins
I'm not really sure about your first question. Datatables search window will search all the content. Do you want to make it specific to just 1 column?
To answer your second question, you can edit the column output. Try this
$drawings = Drawing::select(array('drawings.id','drawings.number'));
return Datatables::of(Drawing::with('customer')->select('*'))
->editColumn('customer', function($drawings) {
return '' . $drawings->customer . '';
})
->make(true);
Edit
To achieve the search that you want, You'll want to do something like this:
public function datatable(Request $request)
{
$drawings = Drawing::select(array('drawings.id','drawings.number'));
return Datatables::of(Drawing::with('customer')->select('*'))
->filter(function ($query) use ($request) {
if ($request->has('name')) {
$query->where('customer.customer_name', 'like', "%{$request->get('name')}%");
}
})
->editColumn('customer', function($drawings) {
return '' . $drawings->customer->customer_name . '';
})
->make(true);
}
Then, in your JS
$(function () {
$('#drawing-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{route('drawings.datatable')}}',
data: function (d) {
d.name = $('input[name=name]').val();
}
},
columns: [
{ data: 'number', name: 'number' },
{ data: 'customer.title', name: 'customer' },
]
});
});
This is untested, but should achieve what you want.
you may also use elequent relationships with yajra here is the example code.
$sub_sectors = Sector::where('parent_id', '>', 0)->with('parent')->latest()->get();
$sub_sectors->each(function($sub_sectors){
$sub_sectors->sector = $sub_sectors->parent->title['en'];
});
in this example you can get sector against sub sector with each method you can get sector name and now you can display sector in your yajra table