I have a datatable loaded via ajax with the serverSide: true and processing: true.
If I set either one of those to false I either get 1 spinner or none (processing:false)
I need both serverSide: true (All the logic is serverside [PHP]) and processing: true (To give feedback to the user)
But I don't want 2 spinners doubling on top of each other
I've checked and only 1 call is made
This is the datatable options:
let dt_options = {
"language": {
"emptyTable": "No records found",
"zeroRecords": "No records found",
"loadingRecords": "Loading...",
"processing": '<i class="fal fa-spinner fa-spin fa-1x fa-fw"></i><span class="sr-only">Loading...</span>'
},
"responsive": true,
"processing": true,
"serverSide": true,
"cache": false,
"pageLength": dt_ajax_init_page_length,
"buttons": buttons,
"sDom":
This is what happens:
Related
I have below code
With this I see data gets loaded first time and scroll is displayed. But when i hit scroll bar ajax call does not go to server ?
Also once ajax call goes, how to display the json data retuned from server ? I did not get any good example on google related to scrolling with
server side processing ?
function(){
oTable= $('#customerTable').dataTable({
"bJQueryUI": true,
"iDisplayStart":0,
"iDisplayLength": 10,
"bRetrieve": true,
"bServerSide": true,
"bFilter": false,
"bInfo": false,
"bAutoWidth": false,
"aaSorting": [[1,'desc']],
"sScrollY": "600px",
"iScrollLoadGap": 50,
"sAjaxSource": "custom_url",
"ajax" : {
"url" : "custom_url"
"type" : "GET",
"data" : function(d) {
}
},
"aoColumns": [
{"aTargets": [0],"sName":"customer.fullName", "mData": function(response){
return response.customer.fullName;
}, "bSortable": false},
{"aTargets": [1],"sName":"updatedDate", "mData": function(response){
var updateDate = response.updatedDt;
return updateDate;
}, "bSortable": true},
]
"fnDrawCallback": function(oSettings) {
}
});
}
Used enableCellSelection: true but it doesn't work it out.
$scope.gridOptionss = { data: 'dashboard',enableGridMenu: true,enableCellSelection: true, enableRowSelection: false, enableRowHeaderSelection: false,
columnDefs: [
{field:'Name', displayName:'No Response',width:150},
{field:'age', displayName:'Part Response', width:150},
]
}
My table contains 25+ columns and rows are not limited.
All records come my client's daily usage.
Server side datatable is slowing down with only 100 rows.
Is there anything which can increase the speed of server side datatable or anything which can work better than datatable?
I am using CodeIgniter (php).
This is my current code:
var ETable = $('#example1').dataTable({
"infoEmpty": "No records available",
"sProcessing": "DataTables is currently busy",
"processing": true,
"bSort": false,
"bFilter": false,
"bAutoWidth": true,
"bLengthChange": true,
"serverSide": true,
"sAjaxSource": "URL",
"aLengthMenu": [[10, 25, 50,100], [10, 25, 50,100]],
"sSortAsc": [[1, 'desc']],
"iDisplayLength": 10,
"dom": 'Zlfrtip',
"bDeferRender": true,
"oLanguage": {
"sInfoFiltered": "",
"sProcessing": "img/loading.gif'>"
},
"tableTools": {
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
}
})
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
}]
});
I am using Datatable in my ruby on rails application. I follow the same one which is here..
https://github.com/rweng/jquery-datatables-rails
And My datatable sorting and searching working properly. But I can't see my table tool option (eg - copy, csv, excel, pdf, save ) in my table header.
I want to show my table just like this....
Please help.
i got this by adding ZeroClipboard.js
<script src="http://localhost/assets/js/ZeroClipboard.js"></script>
Update (2016):
Although they are retiring the TableTools for Buttons and Select extensions (source), this is a slightly more recent version of the dom option example:
var oTable = $('#my-table').dataTable({
autoWidth: false,
autoHeight: false,
paging: false,
dom: 'TCfrtip', // <-- Update letters for whichever extensions you want to use
responsive: false,
searching: true,
ordering: true,
stateSave: true,
scrollY: 550,
scrollX: true,
scrollCollapse: true,
fixedHeader: false,
buttons: [
'copyHtml5',
'csvHtml5',
'excelHtml5',
'pdfHtml5'
],
columnDefs: [{
targets: 'no-sort', // disable sorting on class="no-sort"
orderable: false
}],
drawCallback: function (settings) { }
});
Previous Answer (2013):
The solution is to add this:
"sDom": '<"H"TCfr>t<"F"ip>'
Inside your javascript. It will work with show/hide columns nicely as well. If you are not using show/hide columns you can remove the capital "C".
Example (with show/hide columns):
// Users
$("#users-datatable").dataTable({
"bStateSave": true,
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": $('#users-datatable').data('source'),
"bScrollInfinite": true,
"bScrollCollapse": true,
"iDisplayLength": 100,
"sScrollY": "500px",
"sScrollX": "100%",
"sDom": '<"H"TCfr>t<"F"ip>',
"oTableTools": {
"aButtons": [
"copy",
"csv",
"xls",
{
"sExtends": "pdf",
"sPdfOrientation": "landscape",
"sPdfMessage": "Your custom message would go here."
},
"print"
]
}
});
Hopefully this will help someone.