It there a way to sort date by Year -> Month -> Day i tried to do "order": [[ 0, "asc" ]], It works fine but how can I do it like Year -> Month -> Day
var lead_birth_dt = $('#lead-birthday-table').DataTable({
processing: true,
language: {
processing: '<div class="loading-chart" style="background: #ececec00l; margin-bottom: 10px;"><img src="{{asset('assets/images/chart-loading.webp')}}"></div>',
},
serverSide: true,
select: true,
responsive: true,
"order": [[ 0, "asc" ]],
ajax: '{{ url("/date") }}',
columns: [
{ data: 'birthdate', name: 'birthdate', className: 'text-center',
render: function(data){
return ( moment(data, 'DD/MM/YYYY').format('ll') );
},
},
],
});
E.g data
Related
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
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.
How can i set fixed right column(action) in laravel datatables like this simple example - not work in laravel). Thanks
tableWatches = $('.datatable-watches').DataTable({
orderCellsTop: true,
fixedHeader: false,
dom: "Bfrtip",
"pageLength": 50,
"processing": true,
"serverSide": true,
scrollY: true,
scrollX: true,
scrollCollapse: true,
paging:false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
"ajax": {
url: "/admin/watches/all-watches",
data: {
condition: condition,
}
},
"searchCols": [
.................
],
columns: [
..................
],
});
Method, which created table content
And this part (
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
not worked, without errors and warnings, columns still arent fixed.
Need more explanation!
Totally there is no difference between plain js datatable and yajra/laravel-datatables-oracle.
If you wanna use it locally, just need a 100% with table:
<table id="users" class="table responsive" width="100%"></table>
And a js script to feed datatable by jso data:
$('#users').DataTable({
responsive: true,
"data": [
{
"first_name": "the first name1",
"last_name": "the last name1"
},
{
"first_name": "the first name2",
"last_name": "the last name2"
},
]
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
});
Also for server side feeding datatables, Just use ajax:
$('#users').DataTable({
responsive: true,
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
ajax: {
url: your_post_url_returning_datatable_object_json,
type: 'POST'
},
});
As i mentioned, you can define each column of table or make horizontally scrollable:
scrollX: '100%',
I have this in my datatable, and in my query, i order it by latest creation date, and in datatable i also sort with the date column which is the 16th column in my datatable, but it does not sort according my need.
may i know how to sort the date so that it populate correct information for me?
$(document).ready(function() {
var asInitVals = new Array();
var oTable = $('.datatable').DataTable({
"bProcessing": true,
"oLanguage": {
"sProcessing": "Loading data..."
},
"bSortCellsTop": true,
"iDisplayLength": 10,
"bLengthChange" : false,
"aLengthMenu": {{ Config::get('crud.aLengthMenu') }},
"bServerSide": true,
"bFilter": false,
"aaSorting": [[16, 'desc']],
"sAjaxSource": "{{ url('someurl.ajax') }}",
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}]
});
When i use date_format, it returns invalid sql query
$this->load->library('Datatables');
$this->datatables->from('events');
$this->datatables-select('id,event_name,event_location,DATE_FORMAT(event_start_date,"%b %d %Y, %h:%i %p") as evs,event_type_id,event_status'); echo
$this->datatables->generate();
It returns
SELECT `id`, `event_name`, `event_location`, DATE_FORMAT(event_start_date, `"%b` %d %Y, `%h:%i` %p") as evs, `event_type_id`, `event_status` FROM (`events`) ORDER BY `event_name` asc LIMIT 10
$this->datatables-select('id,event_name,event_location,DATE_FORMAT(event_start_date,"%b %d %Y, %h:%i %p") as evs,event_type_id,event_status',FALSE);
Looking ate the github Library, he added a second parameter
The second parameter are optional whether to add backticks or not. Set it to false so that backticks ` are disabled.
There is another problem in this,
var oTable = $('#dTableEvents').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/" + PROJECT_NAME + "events/get_all_events",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ": 20,
"bAutoWidth": false,
"oLanguage": {
"sProcessing": "<img src='/" + PROJECT_NAME + "public/images/ajax-loader.gif'>",
"sLengthMenu": "Show _MENU_ Entries per Page",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ Entries per Page",
"sInfoEmpty": "Showing 0 to 0 of 0 Entries per Page",
"sInfoFiltered": "(filterred from _MAX_ total Entries per Page)"
},
"aoColumns": [
{
"mDataProp": "name",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "start_date",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "location",
"bSearchable": true,
"bSortable": true,
},
{
"mDataProp": "type",
"bSearchable": true,
"bSortable": true,
},
{
"fnRender": function (oObj) {
return '<img alt="" src="/' + PROJECT_NAME + 'public/images/seven-rating.png">';
},
"mDataProp": "status",
"bSearchable": false,
"bSortable": true,
},
{
"fnRender": function (oObj) {
return '<input type="button" value="Edit" class="edit-btn" onclick="location=\'/'+PROJECT_NAME+'events/edit/' + oObj.aData['id'] + '\'"> <input type="button" value="View" class="edit-btn" onclick="location=\'/'+PROJECT_NAME+'events/view/' + oObj.aData['id'] + '\'">';
},
"mDataProp": "__action",
"bSearchable": false,
"bSortable": false,
}
],
"fnInitComplete": function () {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function (sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
},
"fnDrawCallback": function()
{
$('#dTableEvents tbody td:not(:nth-last-child(-n+1))').addClass('cont-grid bdr-rt-white');
$('#dTableEvents tbody td:nth-last-child(-n+1)').addClass('cont-grid');
}
});
When i use aoColumns in this, then searching and sorting gets disabled, when i remove aaColumns, then it again starts working.