im working with datatables (yajra) and laravel.
i have working the datatables but i have error when i try to search.
"sqlstate 42s22 column not found 1054 unknown column 'customer.' in where clause'"
my controller:
$query = DB::table('customer')->orderBy('id');
return DataTables::queryBuilder($query)->toJson();
My view:
if (dtUserTable.length) {
dtUserTable.DataTable({
pageLength: 10,
stateSave: true,
processing: true,
serverSide: true,
ajax:{url:"customer-list"},
columns: [
// columns according to JSON
{ data: 'id' },
{ data: 'fullname' },
{ data: 'num_doc'},
{ data: 'mobile' },
{ data: 'email' },
{ data: 'class' },
{ data: '' }
],
columnDefs: [
{
// For Responsive
className: 'control',
orderable: false,
responsivePriority: 2,
targets: 0
},
extra: if i use this:
$customers = DB::table('customer')->get();
return json_decode($customers,true);
it work, but not work the server side!
Any can help me to make it work with server side and search? i try some configs and only can make work serverside OR search
I think issue is for mentioning null for data in column array
{ data: '' }
so you can remove that row or you can set defaultContent
{ data: 'column_name', "defaultContent": "" }
Also you can disable searching
{ data: 'column_name', "searchable": false , "defaultContent": "" }
Ref:https://datatables.net/forums/discussion/50823/handling-null-values
Related
I am adding rows to a Datatable with the following code :
for (var key in itm) {
t.row.add([
null,
itm[key].itemcode,
itm[key].itemdesc,
itm[key].batch,
itm[key].expiry,
itm[key].qty,
itm[key].unit,
itm[key].rate,
itm[key].total,
itm[key].discper,
itm[key].discamt,
itm[key].staxper,
itm[key].staxamt,
itm[key].amount,
itm[key].netprate,
itm[key].salerate,
itm[key].page,
itm[key].sub1,
itm[key].sub2,
'<i class="fa fa-edit"></i>',
'<i class="fa fa-trash"></i>'
]).draw(false);
}
This is working fine except for the large data. When I try to add around 750 rows its too slow even the page hangs-up some times.
I tried to add the data using rows.add() API but its not working, the table is blank. Here is the code i am using to add bulk data.
var t = $('#productTable').DataTable();
t.rows.add(itm);
My datatable definition is as under :
$('#productTable').DataTable({
"paging": false,
"ordering": false,
"searching": false,
"info": false,
"rowHeight": '100px',
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"columns": [
{ data: null },
{ data: 'itemcode' },
{ data: 'itemdesc' },
{ data: 'batch' },
{ data: 'expiry' },
{ data: 'qty' },
{ data: 'unit' },
{ data: 'rate' },
{ data: 'total' },
{ data: 'discper' },
{ data: 'discamt' },
{ data: 'staxper' },
{ data: 'staxamt' },
{ data: 'amount' },
{ data: 'netprate' },
{ data: 'salerate' },
{ data: 'page' },
{ data: 'sub1' },
{ data: 'sub2' },
{ data: null },
{ data: null },],
"columnDefs": [
{ className: "dt-right", "targets": [7,8,9,10,11,12,13] },
{ "targets": varbatchcol, visible: false },
{ "targets": vardisccol, visible: false },
{ "targets": vartaxcol, visible: false },
{ "targets": vartotcol, visible: false },
{ "targets": [17,18], visible: false },
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
}
});
and the data coming from server is :
Found the problem.
t.rows.add(itm);
should be
t.rows.add(itm).draw();
And this also solved the slow populating issue.
I am using data tables in laravel here I am trying to fetch data with relationships some times relationship id is not present so it gives null value in laravel blade I can handle it by checking if it is null. but in the data table, I can't use it.
returning values to data table
return [
'delivery_run_id' => $run_sheet->delivery_runs->name:
];
when i put before return statement then it work fine but i think that approach is not good
if(empty($run_sheet->delivery_runs->name))
{
$delivery_run = '';
}
else
{
$delivery_run = $run_sheet->delivery_runs->name;
}
I try to set default value for data table column but its not working
var table = $(tablename).DataTable({
responsive: true,
"order": [],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}],
buttons: [
'print',
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5',
],
processing: true,
serverSide: true,
ajax: {
url: url,
type: 'get',
data: filters
},
columns: columns,
"language": {
processing: "<img src='https://thumbs.gfycat.com/WatchfulSnarlingBettong-max-1mb.gif'>"
},
"columnDefs": [
{
"data": null,
"defaultContent": "<button>Edit</button>",
"targets": -1
}
]
});
use a ternary operator to check is set or not.
$delivery_run = $run_sheet->delivery_runs->name ?? "";
return [
'delivery_run_id' => $run_sheet->delivery_runs->name ?? "";
];
i have problem with yajra datatables to make row group in server side. I want row group show all employee in companies.name. and my current code like this:
public function index(DataTablesBuilderService $builder)
{
$columns = [
'name' => [
'title' => "company",
'name' => 'companies.name'
];
$dataTables = $builder
->setUrl(route('api.employee_details.data_tables', request()->all()))
->withIndex()
->setColumns($columns);
return view('employee_details.index')->with([
'dataTables' => $dataTables,
]);
}
and in blade i just call datatable like this
{!! $dataTables->table(['class' => 'table table-bordered','style' => 'width:100%', 'cellspacing' => '0']) !!}
and the script like this
{!! $dataTables->scripts() !!}
If i following the tutorial on https://datatables.yajrabox.com/eloquent/master, its possible to make row group but i dont know how to implement in server side. But is so different with my code in blade. Tutorial call datatable like this.
var template = Handlebars.compile($("#details-template").html());
var table = $('#users-table').DataTable({
processing: true,
serverSide: true,
ajax: 'https://datatables.yajrabox.com/eloquent/master-data',
columns: [
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'created_at', name: 'created_at'},
{data: 'updated_at', name: 'updated_at'}
],
order: [[1, 'asc']]
});
// Add event listener for opening and closing details
$('#users-table tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var tableId = 'posts-' + row.data().id;
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
// Open this row
row.child(template(row.data())).show();
initTable(tableId, row.data());
tr.addClass('shown');
tr.next().find('td').addClass('no-padding bg-gray');
}
});
function initTable(tableId, data) {
$('#' + tableId).DataTable({
processing: true,
serverSide: true,
ajax: data.details_url,
columns: [
{ data: 'id', name: 'id' },
{ data: 'title', name: 'title' }
]
})
}
and the result like this and i expected like this to but in datatables server side
Thank you if you can help to help me and explain how to solve the problem code
Injecting this in your DataTable options may help you (I've tried and it's working in my case)
$(selector).DataTable({
startRender: function (rows, group) {
var grpName = rows.data().pluck('company')
.reduce(function (a, b) {
return (b === null ? '' : b);
}, '');
return $('<tr/>')
.append('<td colspan="' + columns.length + '" class="text-left"><span class="ml-10px">' + grpName + '</span></td>');
},
endRender: null,
dataSrc: 'company'
})
Here is my code. I tried to alert the data in a particular row, but I keep getting undefined error.
I tried to print aData using aData.toString(), I'm getting [object] [object] as response. how do I debug the contents of aData?
My Code:
$(document).ready(function() {
var table = $('#datatable').DataTable({
processing: true,
serverSide: false,
order: [[1, 'asc']],
"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ], visible: false } ], // first column in visible columns array gets class "hide_me"
ajax: {
url: "/getData",
dataSrc: "list"
},
columns: [
{ data : "_id"},
{ data : "user.name" },
{ data : "student.name" },
{ data : "class" },
{ data : "status" },
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
alert(aData.[4]);
if ( aData[4] == true )
{
$('td:eq(4)', nRow).html( '<b>On</b>' );
}
else {
$('td:eq(4)', nRow).html( '<b>Off</b>' );
}
},
responsive: true
});
});
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';
}
}
]