columns: [
{data: 'debit_1', name: 'debit_1'},
{data: 'credit_1', name: 'credit_1'},
{data: 'debit_2', name: 'debit_2'},
{data: 'credit_2', name: 'credit_2'},
{data: 'debit_3', name: 'debit_3'},
{data: 'credit_3', name: 'credit_3'},
],
columnDefs: [
{width: 300, targets: 2},
{
"targets": [0,1,2,3,4,5],
render: function (data, type, row){
if(data === null){
return '<th style="display:none;"></th>';
}
}
},
],
when there is data is null I want to hide the columns in the datatable. can anyone help me ?
You can do it in multiple ways, I'm writing down some of them.
columnDefs: [
{ width: 300, targets: 2},
{
"targets": [0,1,2,3,4,5],
render: function (data, type, row) {
if(data == null) {
table.columns([column_number]).visible(false);
}
else {
'<text>' + data + '</text>';
}
}
},
],
OR
"initComplete": function(settings, json) {
if (json.column_name == null) {
table.column([column_number]).visible(false);
}
}
Note : These are just hints, you need to edit code in according to your need.
Related
I have a datatable view that shows some post from user, I want to create a datatable with a button that can show all user post. But, when moving from all post lists to user post lists I cant get user_id from the URL.
I want to get the user_id using $request->route.
Here is my controller:-
public function index(Request $request)
{
if ($request->ajax()) {
$request->route('detail');
$data = Post::where('user_id', $this->route('detail'))->latest()->get();
return Datatables::of($data)
->addIndexColumn()
->addColumn('action', function ($row) {
$btn = ' <span class="fas fa-info"></span>';
return $btn;
})
->rawColumns(['action'])
->make(true);
}
return view('detail');
}
Here is my route:-
Route::resource('detail', DetailController::class);
datatable code
var table = $('.data-table').DataTable({
paging: true,
info: true,
autoWidth: false,
responsive: true,
columnDefs: [{
"targets": [0, 2, 3, 4, 5, 6], // your case first column
"className": "text-center",
},
],
language: {
paginate: {
next: '<span class="fas fa-arrow-right"></span>', // or '→'
previous: '<span class="fas fa-arrow-left"></span>' // or '←'
}
},
oLanguage: {
"oPaginate": {
next: '→', // or '→'
previous: '←' // or '←'
},
"sLengthMenu": "Tampilkan _MENU_ Item",
"sEmptyTable": "Tidak ada data",
"sInfoEmpty": "Tidak ditemukan",
"sLoadingRecords": "Sedang memproses - loading...",
"sInfo": "Menampilkan _START_ - _END_ dari _TOTAL_ Item",
"sSearch": "Cari:",
},
processing: true,
serverSide: true,
ajax: "{{ route('detail.index') }}",
columns: [{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false,
},
{
data: 'title',
name: 'title',
orderable: false,
},
{
data: 'content',
name: 'content',
orderable: false,
visible: false,
},
{
data: 'progress',
name: 'progress'
},
{
data: 'status',
name: 'status'
},
{
data: 'target_selesai',
name: 'target_selesai'
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
If I change the $this->route('detail') into user_id value, the program will work as expected. Is there something wrong with my code? thanks in advance
Change this:-
$this->route('detail')
To:-
$request->get('details')
And your ajax method should be like this:
"ajax": {
'type': 'POST',
'url': '{{ route('detail.index') }}',
'data': {
detilas: 'your id',
},
}
your roure:
Route::post('detail', DetailController::class);
Laravel datatable using server side pagination, when doing any action on the datatable the indexing changes not in the correct order.
The controller code is below
return Datatables::of($newsletters)
->editColumn('created_at', function($row) {
return Carbon::parse($row->created_at)->format('d-m-Y');
})
->rawColumns(['created_at'])
->make(true);
}
JS code :
if($('#admin_news_letters_view').length > 0) {
$(document).ready(function () {
var i = 1;
$('#admin_news_letters_view').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('admin.news_letters.view') }}",
columns: [
{
"render": function (data, type, full, meta) {
return i++;
}
},
{data: 'name'},
{data: 'email'},
{data: 'created_at'},
]
});
});
}
Add an index colum in the controller.
Controller :
return Datatables::of($newsletters)
->addIndexColumn()
->editColumn('created_at', function($row) {
return Carbon::parse($row->created_at)->format('d-m-Y');
})
->rawColumns(['created_at'])
->make(true);
}
Js :
if($('#admin_news_letters_view').length > 0) {
$(document).ready(function () {
$('#admin_news_letters_view').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('admin.news_letters.view') }}",
columns: [
{
data: 'DT_RowIndex', name: 'DT_RowIndex'
},
{data: 'name'},
{data: 'email'},
{data: 'created_at'},
]
});
});
}
I am creating a datatable using Laravel's Yajra plugin. I am using the query builder form.(Like this Click here)
I wanna add buttons CSV,PDF to the datatable.
I know as per the documentation it can be done Like this
The problem is I have already done using query builder. Now I cannot change my code.
Kindly help me.
My jquery code is as follows:
<script type="text/javascript">
$(document).ready(function(){
$('body').addClass('sidebar-collapse');
var cat = "{{$cat}}";
$('#unreconcil_datatable').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('get_datatable',array('cat'=>$cat)) !!}',
columns: [
{ data: 'unrelines_uniq_num', name: 'unrelines_uniq_num' },
{ data: 'unrelines_bank_accno', name: 'unrelines_bank_accno' },
{ data:'unrelines_rficreated',name:'unrelines_rficreated'},
{ data: 'unrelines_roicreated', name: 'unrelines_roicreated' },
{ data: 'unrelines_bank_name', name: 'unrelines_bank_name' },
{ data: 'unrelines_line_number', name: 'unrelines_line_number' },
{ data: 'unrelines_state_date', name: 'unrelines_state_date' },
{ data: 'unrelines_trans_date', name: 'unrelines_trans_date' },
{ data: 'unrelines_trans_amount', name: 'unrelines_trans_amount' },
{ data: 'unrelines_unrec_amt', name: 'unrelines_unrec_amt' },
{ data: 'unrelines_desc', name: 'unrelines_desc' },
{ data: 'unrelines_variance', name: 'unrelines_variance' },
{ data: 'unrelines_cstatus', name: 'unrelines_cstatus' },
{ data: 'unrelines_assigned', name: 'unrelines_assigned' },
{ data: 'unrelines_created_date', name: 'unrelines_created_date' },
{data: 'tat', name: 'tat', orderable: false, searchable: false},
{data: 'action', name: 'action', orderable: false, searchable: false}
]
});
});
</script>
My controller method is as follows:
public function getdatatable($cat){
$list = AvailableStatementLines::select([DB::raw(" '$cat' AS cat"),'unrelines_id','unrelines_uniq_num','unrelines_bank_accno','unrelines_rficreated','unrelines_roicreated','unrelines_bank_name','unrelines_line_number','unrelines_state_date','unrelines_trans_date','unrelines_trans_amount','unrelines_unrec_amt','unrelines_desc','unrelines_variance','unrelines_cstatus','unrelines_assigned','unrelines_created_date','unrelines_trans_type','unrelines_currency','unrelines_created_by_name','unrelines_ustatus',DB::raw("IF(unrelines_cstatus='closed', '',
ROUND(ABS(TIMESTAMPDIFF(MINUTE, date(unrelines_lastupdate), curdate()))/1440 - ABS(DATEDIFF(ADDDATE(curdate(), INTERVAL 1 -DAYOFWEEK(curdate()) DAY), ADDDATE(date(unrelines_lastupdate), INTERVAL 1 -DAYOFWEEK(date(unrelines_lastupdate)) DAY))) / 7 * 2 - (DAYOFWEEK(IF(date(unrelines_lastupdate) < curdate(), date(unrelines_lastupdate), curdate())) = 1) - (DAYOFWEEK(IF(date(unrelines_lastupdate) > curdate(), date(unrelines_lastupdate), curdate())) = 7),0)
) AS tat")])->where('unrelines_ucountry',Session::get('country'))->where('unrelines_display',1);
switch($cat){
case 'rfi':
$list1 = $list->where('unrelines_cstatus','Assigned');
break;
case 'roi':
$list1 = $list->where('unrelines_cstatus','Solution Provided');
break;
case 'closed':
$list1 = $list->where('unrelines_cstatus','Closed');
break;
default:
$list1 = $list->whereNotIn('unrelines_cstatus',['Closed','Assigned','Solution Provided']);
break;
}
return Datatables::of($list1)
->addColumn('unrelines_uniq_num',function($list1){
return "<input type='checkbox' class='uniqnums' name='uniquenum[]' value='".$list1->unrelines_id."'>".$list1->unrelines_uniq_num;
})
->addColumn('action',function($list1){
return "<button type='button' class='btn btn-xs btn-info viewLine' category=".$list1->cat." unrelines=".$list1->unrelines_id.">View</button>";
})
->setRowClass(function ($list1) {
return $list1->tat > 7 ? 'orange' : ($list1->tat > 5 ? 'red' : ' ');
})
->make(true);
}
You should apply this method in your controller.
public function html()
{
return $this->builder()
->columns([
'id',
'name',
'email',
'created_at',
'updated_at',
])
->parameters([
'dom' => 'Bfrtip',
'buttons' => ['csv', 'excel', 'pdf', 'print', 'reset', 'reload'],
]);
}
Here is my existing JS code:
var CategoriesTablewithFilter = function(){
var table = $('#catDatatable');
var url = $('#url').val();
var tableObj = table.DataTable( {
"serverSide": true,
"responsive": true,
"aoColumnDefs": [
{ "bSearchable": true, "aTargets": [ 1 ] },
],
ajax:
{
url: url,
dataSrc: 'data',
},
columns: [
{ data: 'id'},
{ data: 'name'},
{ data: 'status'},
],
} );
}
Status is a Boolean field which returns 1 or 0.
Is there anyway I can change 1, 0 to Strings - Active/InActive
You should use render function for column:
var CategoriesTablewithFilter = function () {
var table = $('#catDatatable');
var url = $('#url').val();
var tableObj = table.DataTable({
"serverSide": true,
"responsive": true,
"aoColumnDefs": [
{"bSearchable": true, "aTargets": [1]},
],
ajax:
{
url: url,
dataSrc: 'data',
},
columns: [
{data: 'id'},
{data: 'name'},
{data: 'status', render: function (data, type, row, meta) {
return data == 1 ? 'Active' : 'InActive';
}}
],
});
}
Try debugging you ajax response using console.log(data) output to fetch status's value and use render function to display render the final output.
columns: [
{ data: 'id'},
{ data: 'name'},
{
data: 'status',
render: function (data, type, full, meta) {
return full.status == true ? 'Active' : 'Inactive';
}
}
]
Or you could use
columns: [
{ data: 'id'},
{ data: 'name'},
{
data: 'status',
render: function (data, type, full, meta) {
return data === '1' ? 'Active' : 'Inactive';
}
}
]
This is my view
Ext.define('view.OrdersGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ordersgrid',
store: 'TicketOrders',
features:[
{
ftype: 'groupingsummary',
groupHeaderTpl: [
'{[values.rows[0].data.EventName]} — <small class="muted">{[values.rows[0].data.EventDate]}</small>',
],
//hideGroupedHeader: true,
//collapsible: false,
remoteRoot: 'record',
//showSummaryRow: true,
}
],
initComponent: function () {
var me = this;
me.on('edit', function (editor, e) {
me.getSelectionModel().select(e.record);
me.fireEvent('onEdit', e.record);
});
me.selModel.on('select', function (t, record, index, eOpts) {
me.fireEvent('onRecordSelected', record);
});
me.selModel.on('deselect', function (t, record, index, eOpts) {
me.fireEvent('onRecordSelected', record);
});
me.columns =
[
{
id: 'order',
text: "Order Id",
sortable: true,
dataIndex: 'TOId',
hidden: true
},
{
text: "Order Number",
flex: 1.5,
sortable: true,
dataIndex: 'OrderNumber',
renderer: function (value, metadata, record) {
if (record.get('OrderStatus') == 3) { // error orders
return value + " <img src='images/icons/icon_question_mark.gif' title='" + record.get('Description') + "'/>";
}
else {
return value;
}
}
},
{
text: "Event",
flex: 3,
sortable: true,
dataIndex: 'EventName',
hidden: true,
//summaryType: 'sum',
renderer: function (value, metadata, record) {
return value + " ( " + record.get('TicketCount') + " )";
}
},
{
text: "Price",
flex: 1,
sortable: true,
dataIndex: 'TotalCharges',
//summaryType: 'sum',
//renderer: function (value, summaryData, dataIndex) {
// debugger;
// return parseInt(value);
// }
summaryRenderer: function (value, metadata, record) {
debugger;
return Ext.String.format(
"Total: {0}",
Ext.Number.toFixed(value)
);
}
}
];
this.callParent(arguments);
}, // end init function
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
})
], //end plugins
}
);
This is my model
Ext.define('model.TicketOrder', {
extend: 'Ext.data.Model',
fields: [
'TOId',
'OrderNumber',
'EventName',
'TicketCount',
{
name: 'TotalCharges',
type: 'int'
}
],
idProperty: 'TOId',
proxy: {
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
type: 'ajax',
disableCaching: true,
url: 'WebService.asmx/GetTicketOrdersByUserId?userId=' + Utilities.UserId,
reader: {
root: 'orders',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
}
});
This is my store
Ext.define('store.TicketOrders', {
extend: 'Ext.data.Store',
model: 'model.TicketOrder',
autoLoad: false,
remoteSort: false,
pageSize: 50,
groupField: 'EventOriginalId'
});
I am using MVC architecture, I have put a debugger in summaryRenderer in view but it is not executing and not showing any summary row, need help please. Also tell me what the remoteRoot should be set..enter code here
Un-comment out 'showSummaryRow: true" you will need this. Then for each column you define that you want a summary on you will need to define the summaryRenderer: function() {...} and SummaryType: 'sum'. EXTJS can be a real pain, especially when you want to do something custom. Watch out for extra commas (looks like you've got a couple in the features portion). Try to keep it as simple as possible. Best of luck!
features:[
{
ftype: 'groupingsummary',
groupHeaderTpl: [
'{[values.rows[0].data.EventName]} — <small class="muted">{[values.rows[0].data.EventDate]}</small>',
],
//hideGroupedHeader: true,
//collapsible: false,
remoteRoot: 'record',
showSummaryRow: true
}
],