I'm using Laravel Datatables 7, but my table is not rendering HTML code. It was rendering HTML before, but when I updated to new Laravel DataTables to 7 from 6, it stopped rendering HTML in column.
http://prntscr.com/e11n84
This is with Laravel DataTables 6 - http://prntscr.com/e11ph0
$(function() {
$('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: {
url: '{{ route("admin.access.user.get") }}',
type: 'post',
data: {status: 1, trashed: false}
},
columns: [
{data: 'id', name: '{{config('access.users_table')}}.id'},
{data: 'name', name: '{{config('access.users_table')}}.name', render: $.fn.dataTable.render.text()},
{data: 'email', name: '{{config('access.users_table')}}.email', render: $.fn.dataTable.render.text()},
{data: 'confirmed', name: '{{config('access.users_table')}}.confirmed'},
{data: 'roles', name: '{{config('access.roles_table')}}.name', sortable: false},
{data: 'created_at', name: '{{config('access.users_table')}}.created_at'},
{data: 'updated_at', name: '{{config('access.users_table')}}.updated_at'},
{data: 'actions', name: 'actions', searchable: false, sortable: false}
],
order: [[0, "asc"]],
searchDelay: 500
});
});
Add the column with html as shown on other answers and after all add this ->rawColumns(['html_column', 'another_html_column']) before ->toJson() to render all the html column as sent by the server
Try to feed data as JSON from the controller by using toJson() method.
$data= User::all();
return datatables()->of($data)
->addColumn('action', function ($row) {
$html = 'Edit ';
$html .= '<button data-rowid="'.$row->id.'">Del</button>';
return $html;
})->toJson();
Ref: https://laravelarticle.com/laravel-yajra-datatables
//im also using yajra data tables..
//it's easy to render html from controller...
example:
$query = Appointment::all();
$table = Datatables::of($query);
$table->editColumn('user_id', function ($row) {
return $row->user_id ? '<span style="color: green;">ACCEPTED</span>' :
'<span style="color: red;">PENDING</span>';
});
//then you need to add the column you want to render html
$table->rawColumns(['user_id']);
Related
I'm trying to sorting the column named agency_name. But its not working. The full_name is perfectly working while the agency_name column is not working. So basically I trying to access the data which in the user_work_experiences table, so the way I access them is through user table and get current user work experiences. Im using yajra/datatables package. So here my table structure looks: -
Student Hostels
user_id
Users:
id
User Work Experiences
user_id
agency_name
Here the example code:
Controller:
public function getHostels()
{
$hostels = StudentHostel::with('user', 'user.userProfile', 'user.currentWorkExperience', 'status')->limit(100)->select('student_hostels.*');
return Datatables::of($hostels)
->addIndexColumn()
->editColumn('user.full_name', function (StudentHostel $hostel) {
return $hostel->user->full_name;
})
->editColumn('user.userProfile.address_1', function(StudentHostel $hostel) {
return $hostel->user->userProfile ? $hostel->user->userProfile->address_1 . " " . $hostel->user->userProfile->address_2 : null;
})
->addColumn('action', 'backEnd.hostel.datatables_action')
->orderColumn('user.full_name', function ($query, $order) {
$query->whereHas('user', function ($q) use($order) {
$q->orderBy('full_name', $order);
});
})
->orderColumn('user.current_work_experience.agency_name', function ($query, $order) {
$query->whereHas('user', function ($q) use ($order) {
$q->whereHas('currentWorkExperience', function ($q) use ($order) {
$q->orderBy('agency_name', $order);
});
});
})
->orderByNullsLast()
->make(true);
}
Views:
$('#hostel_datatable').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('hostel.application.list') }}",
columns: [
{data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false},
{data: 'user.full_name', name: 'user.full_name'},
{data: 'user.current_work_experience.agency_name', name: 'user.current_work_experience.agency_name'},
{data: 'user.userProfile.address_1', name: 'user.userProfile.address_1', orderable: false, searchable: false},
{data: 'status.base_setup_name', name: 'status.base_setup_name', orderable: false, searchable: false},
{
data: 'action',
name: 'action',
orderable: true,
searchable: true
},
]
});
I hope you guys can help me out. Thank you so much :)
OrderColumn not working for sorting the list according to updated_at but not working.
This is my code you can see
$product = Product::query()->get();
return Datatables::of($product )
->orderColumn('updated_at', 'DESC')
->make(true);
Javascript code
<script>
$(document).ready(function(){
var columns = [
{
data: 'name',
name: 'name',
searchable: true
},
columns.push({
data: 'action',
name: 'action',
orderable: false,
searchable: "false",
className: "text-center"
});
$('#product-table').DataTable({
pageLength: 25,
processing: true,
serverSide: true,
ajax: {
url: '{{ route('products.dt') }}',
},
columns: columns,
});
});
</script>
The problem is that JQuery Datatables is performing its own sort after receiving the data.
So the sort on the server is ignored.
I have run into the same issue, but have not yet found a solution.
I am thinking about adding an extra hidden column to sort the data, but this is not a great solution either.
This is my table
Controller code
public function index(Datatables $datatables,Request $request)
{
$model=Customer::whereIn('group_id',[1,4]);
return $datatables->eloquent($model)->editColumn('name',function($customer){
return $customer->name.' '.$customer->last_name;
})->editColumn('type',function($customer){
return $customer->customergroup?$customer->customergroup->customer_group:'';
})->editColumn('member_since',function($customer){
return $customer->created_at->format('d-m-Y');
})->editColumn('booking_made',function($customer){
return $customer->bookings?$customer->bookings->count():0;
})->editColumn('status',function($customer){
return '<span class="label label-sm '.($customer->status?"label-green-jungle":"btn red").'">'.($customer->status?"Active":"Inactive").'</span>';
})->rawColumns(['status'])->make(true);
}
Data table script code
$(function () {
table= $('#customer-table').DataTable({
serverSide: true,
processing: true,
bFilter: false,
ajax:"{{route('admin.customer.index') }}",
columns: [
{data: 'id',name:'id'},
{data: 'name',name:'name'},
{data: 'type',name:'group_id'},
{data: 'member_since',name:'created_at'},
{data: 'booking_made',name:'booking_made'},
{data: 'status',name:'status'},
{data: 'view',searchable:false},
],
"order": [[ 0,'desc' ]],
columnDefs: [{
targets: [6,8],
orderable: false
}]
});
});
From the table(image) You can see a column Bookings Made it is the count of total booking by each customer. So the problem is that how can i sort the table according to count.I can sort customer name,and status.
I'm using Laravel 5.4 and Yajra datatable, below is my code working properly but in the 2nd action I've created, The button is not displaying but instead it display the text itself "Add Price" What am I missing ?
public function getProductDatatable()
{
$Product = Product::query();
return Datatables::eloquent($Product)
->addColumn('action', function($row) {
return 'Edit';
})
->addColumn('add_price', function($row) {
return 'Add Price';
})
->make(true);
}
Frontend Part
<script type="text/javascript">
$(function() {
$('#product-table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('product/get_product_datatable') }}',
columns : [
{data: 'id', name: 'id'},
{data: 'product_code', name: 'product_code'},
{data: 'action', searchable: false, orderable: false},
{data: 'add_price', searchable: false, orderable: false},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'}
]
});
});
</script>
You need to define rawColumns :
public function getProductDatatable()
{
$Product = Product::query();
return Datatables::eloquent($Product)
->addColumn('action', function($row) {
return 'Edit';
})
->addColumn('add_price', function($row) {
return 'Add Price';
})
->rawColumns(['add_price', 'action'])
->make(true);
}
I found this issue on github, try adding rawColumns
Datatables::eloquent($Product)
->addColumn(..)
->rawColumns(['add_price']);
I have huge records stored in database which is taking time to load (sometime more than a minute).
so i thought about using yajra laravel datatable (https://github.com/yajra/laravel-datatables)
Question: only 10 records has to come from database on click of next button next 10 record has to come.
here is my files:
web.php
Route::get('datatable', ['uses'=>'PostController#datatable']);
Route::get('datatable/getposts', ['as'=>'datatable.getposts','uses'=>'PostController#getPosts']);
controller => PostController.php
public function datatable()
{
return view('datatable');
}
public function getPosts()
{
$users = DB::table('data')->select('*');
return Datatables::of($users)->make(true);
}
view => datatable.blade.php
<script type="text/javascript">
$(document).ready(function() {
oTable = $('#users').DataTable({
"processing": true,
"serverSide": true,
"ajax": "{{ route('datatable.getposts') }}",
"columns": [
{data: 'id', name: 'id'},
{data: 'username', name: 'username'},
{data: 'about', name: 'about'},
{data: 'created_at', name: 'created_at'}
]
});
});
</script>
please help me thanks in advance!!!!!!
<script type="text/javascript">
$(document).ready(function() {
$('#users').DataTable({
"pageLength": 20,
"processing": true,
"serverSide": true,
"ajax": "{{ route('datatable.getposts') }}",
"columns": [
{data: 'id', name: 'id'},
{data: 'username', name: 'username'},
{data: 'about', name: 'about'},
{data: 'created_at', name: 'created_at'}
]
});
});
</script>
try this