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"
}
})
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) {
}
});
}
I just want to ask how can I add DATA ID on the buttons EDIT/DELETE here is my javascript for rendering datatable rows
I wanted to put Data ID on ROW_ID like for example delete?id=1 (CI: delete/1)
$('#data').dataTable({
"sScrollY": "400px",
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": "<?php echo base_url(); ?>pages/datatable",
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [[0, 'asc']],
"aoColumns": [ null, null, null,
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete',
}
]
}).fnSetFilteringDelay(700);
Assuming you're returning the ID value in your ajax, you can use mRender
...
"sClass": "center",
"mRender": function ( data, type, full ) {
return 'Edit / Delete';
}
full[0] is the data row with the ID parameter. If this is in a different column, obviously you'll to change the index accordingly
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.
I am working with struts2 and ajax . I am using jboss as application server, I am calling jsp page and there from i am calling action. Can i able to call action from my ajax source directly, without calling jsp page instead of.I am loading data in table My ajax code follows
oTable=$('#tblDisplay').dataTable( {
"bAutoWidth": false,
"oLanguage": {"sSearch": "Search all columns:"},
"bJQueryUI": true,
"aLengthMenu": [[-1,10, 25, 50, 100,250],["All",10, 25, 50, 100,250]],
"sPaginationType": "full_numbers",
"iCookieDuration": 60*60*24*10,
"sCookiePrefix": "SQLFly_admin_datatable_",
"aaSorting": [],
"aaSortingFixed": [],
"asStripClasses": [ "odd", "even"],
"sScrollY": "",
"bScrollCollapse": true,
"bSortCellsTop": false,
"bDeferRender": true,
"sScrollX": "",
"sScrollXInner": "",
"aoColumnDefs": [{ "bSearchable": false, "bVisible": false, "aTargets": [0] }],
"bProcessing": true,
"bServerSide": false,
"iDisplayStart": iStart,
"iDisplayLength": iDisplayLength,
"bStateSave": false,
"sAjaxSource": "sPermissonData.jsp",
"fnServerData": function ( sSource, aoData, fnCallback )
{
$.ajax({"dataType": 'json', "cache":false, "type": "GET", "url": sSource, "data": aoData , "success": fnCallback } );
},
Thank You
return JSON: http://struts.apache.org/2.2.3.1/docs/json-plugin.html
return String: http://struts.apache.org/2.0.11.1/docs/how-can-we-return-a-text-string-as-the-response.html