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.
Related
How can i render component that is sent from controller via an ajax request? For example i want to dynamically filter product using this method:
Load the index URL
Fetch the products based on the filter category or return all the products using ajax
My ajax Code:
$(document).ready(function () {
filterData();
// Filter data function
function filterData() {
// Initializing loader
$('#product-listing-row').html('<div id="loading" style="" ></div>');
var action = 'fetchData';
var subCategory = getFilter('sub-category');
/* LARAVEL META CSRF REQUIREMENT */
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
// Ajax Call
$.ajax({
url: "/shop/filter",
method: "POST",
data: {action: action, subCategory: subCategory},
success: function (data) {
$('#product-listing-row').html(data);
}
});
}
// Get Filter by class name function
function getFilter(className) {
var filter = [];
$('.' + className + ':checked').each(function () {
filter.push($(this).val());
});
//console.log(filter);
return filter;
}
$('.common-selector').click(function () {
filterData();
});
});
I am getting all the filters from ProductController
Instead of manually writing html in controller I want to return the specific component from the controller
ProductController:
public function productFilter() {
if (!request()->action) abort('500');
// Starting the query for products which are active
$products = Product::where('is_active', '1');
//dump(request()->subCategory);
/* Checking the filters */
// sub category exists
if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
// Completing the query
$products = $products->orderBy('created_at', 'DESC')->paginate(15);
// Adding reviews and total review
$products = Product::setProductReviewTotalReviewsAttr($products);
foreach ($products as $product)
//view('components.shop-product', ['product' => $product])->render();
echo '<x-shop-product :product="$product"></x-shop-product>';
}
Instead of getting the components rendered, I am receiving the whole string echoed out. Is there any way i can just get the components rendered?
Thanks in advance
Actually now I found a way to do it myself
I applied the following to the ProductController
return View::make("components.shop-product")
->with("product", $product)
->render();
Updated Code:
public function productFilter() {
if (!request()->action) abort('500');
// Starting the query for products which are active
$products = Product::where('is_active', '1');
//dump(request()->subCategory);
/* Checking the filters */
// sub category exists
if (request()->subCategory) $products = $products->where('sub_category_id', request()->subCategory);
// Completing the query
$products = $products->orderBy('created_at', 'DESC')->paginate(15);
// Adding reviews and total review
$products = Product::setProductReviewTotalReviewsAttr($products);
$output = '';
foreach ($products as $product) {
$output .= View::make("components.shop-product")
->with("product", $product)
->render();
}
if (count($products) > 0)
echo $output;
else
echo '<div class="col">No Data</div>';
}
with laravel > 8 you can use \Blade::render directly in your controller to render even anonymouse components, here I'm rendering a table component with a lot of properties:
class componentController extends Controller {
public function index(){
$table = [
:tableid => "table"
:thead => ["id","name","job"]
:data => [
["1","marcoh","captain"],
["2","sanji","cook"]
],
tfoot => false
];
// Renders component table.blade.php
return \Blade::render('
<x-table
:tableid="$tableid"
:thead="$thead"
:data="$data"
tfoot
/>
', $table);
...
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;
}
}
});
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
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
I am unable to load select box value when I want to update the value. The same code perfectly working when I am going to save value.
My controller code is:
public function listwardByCircle($category = "") {
$this->layout = 'ajax';
$this->beforeRender();
$this->autoRender = false;
$ward=$this->Ward->find('list',array(
"fields" => 'id, wardname',
"conditions" => array('Ward.circle_id' => $category)
));
//$this->set('ward',$ward);
print_r($ward);
foreach($ward as $key => $val) {
echo "<option value=$key>$val</option>";
}
}
And this is my js code :
$("#AreaCircleId").change(function() {
alert("testing....");
$.post('../Admins/listwardByCircle/' + $(this).val(), function(data) {
alert( data);
$("#AreaWardId").empty().append(data);
}, 'html');
});
In js file
Url in Controller Like
`\../../Admins\/listwardByCircle`
You may need to update your URL post location in the ajax from:
$.post('../Admins/listwardByCircle/'
to
$.post('/admins/listwardByCircle/'
This is if the controller name is admins.