I'm using JQuery Datatable and I ran into a problem when I used fixed column.
It has been showing two times my fixed column
I'm using serverside processing and that's my code:
dataTable = table.dataTable({
fixedColumns: {
leftColumns: 0,
rightColumns: 1
},
scrollX:true,
scrollCollapse: true,
"fnDrawCallback":function(oSettings) {
$('div.choosePage select').val(dataTable.DataTable().page());
},
"pagingType":"bootstrap_full_number",
"processing": true,
"serverSide": true,
"ajax": {
"data":GETDATA,
"dataSrc":SETAJAXDATA
},
"fnInitComplete":completeProcess,
"colReorder": true,
"order": [
[0, 'asc']
],
"dom": "<'row' <'col-md-12'>><'row'<'col-md-6 col-sm-12'f>r><'table-scrollable't><'row'<'col-md-4 col-sm-12'i><'col-md-5 col-sm-12 toolbar'p><'col-md-push-1 col-md-3 col-sm-12 toolbar choosePage'>>", // horizobtal scrollable datatable
})
Ajax is working good and there is no problem when I used fixed column on left side,but when I used it on right side i'm running into this problem.
Thanks.
I believe it is a bug in Jquery Datatable if you haven't setup scrollY from the options, make sure you set some value.
Because when you inspect the element you can see scroll-y overflow is auto. If you set it as hidden or not setup a value from the options, there you go, you see the space at the right side.
Incase you do not want to use scroll-y at all, then you need to make your hands dirty with some css code by giving some minor margin which is an ugly solution. But I cannot see any other option for you.
It's a shame for Jquery datatable plugin.
Below shows an example option list from the plugin website.
$(document).ready(function() {
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 0,
rightColumns: 1
}
} );
} );
Related
I have a DataTable and I would like to display data over several pages. I would like pages with 100 elements on each. In addition I would like to have some of my columns sortable.
In my Database I have more than 100 elements and my DataTable is only showing the first 100...
I've noticed some things :
1) When I put "bServerSide": false my columns are sortable BUT my number of rows is limited to 100 (one page with 100 elements).
2) When I put "bServerSide": true my number of rows is now correct (several pages with 100 elements on each) BUT my columns are not sortable anymore (I mean the sort function doesn't work when I click on the sort button).
$('#tableSupervisionElecteur').DataTable({
"bLengthChange" : false,
"bFilter" : false,
"bProcessing": false,
"searching": false,
"ordering": true,
"order": [[1, 'asc']],
"bStateSave": false,
"pageLength": 100,
"iDisplayStart": 0,
"bServerSide": true,
"initComplete": function(settings, json) {
},
"fnDrawCallback": function () {
},
"sAjaxSource": "sourcesDataTables",
"aoColumns": [
...
],
columnDefs: [
{
orderable: false,
targets: 0
},
{
orderable: false,
targets: 7
},
{
orderable: false,
targets: 8
},
]
});
I would like to have BOTH features working together (sorting and displaying) and not one or the other.
Furthermore my DataTable needs to be able to handle approximately 30 000 rows.
Remove orderable: false for the columns which you need ordering and also specify the order(asc or desc) in "order" option
Its depending on your server side, as order is processed on server. Server must check if any request for asc or desc and build your database query, each column field sorted base on that.
I am working with js datatables. I have a table in modal and I am trying to make make left most column fixed. Below is my script for datatables.
$('#table1').DataTable({
"dom": 'Bfrtip',
"bPaginate": false,
"bLengthChange": false,
"bInfo": false,
"bFilter": false,
"buttons": [{
extend: 'excelHtml5',
title: 'Excel1',
sheetName: 'Sheet1'
}],
scrollY: 300,
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: true
"ordering": false
});
Everything working fine except fixed columns. I have included fixed column css and Js.
The actual problem is, the table gets shrinks when I apply fixed columns.
Give this a try:
$('#modal_ID').on('shown.bs.modal', function (e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();});
you must have explicitly ' style="width:100%" in table attibute (not in css)
I've recently added the 'KeyTable' extension to datatable, to navigate through my table with the arrowkeys.
First, I added the following code to get the first record of my table selected:
gruposDispTab.cell(':eq(0)').focus();
But I get the last record selected:
Then, with the KeyTable function added, the up arrow key selects the lower row, and the down arrow key selects the upper row; even with that, the inner scroll of my table works fine (up arrow key - scroll goes up, down arrow key, scroll goes down).
I don't know what datatable configuration I need to change to fix this.
P.D.: In case this is needed, this is how I initialized my datatable:
gruposDispTab = $('#gruposSelect').DataTable({
//deferRender: true,
scrollY: 215,
scrollX: false,
scrollCollapse: true,
scroller: true,
dom: 't',
sScrollInner: 702,
bPaginate: false,
info: false,
"destroy": true,
"keys": true,
searching: true,
//orderCellsTop: true,
"language": {
"search": "Buscar: ",
"zeroRecords": "No se encontraron coincidencias",
"info": "Mostrando página _PAGE_ de _PAGES_"
}
});
Try disabled the ordering in your DataTable.
$('#example').dataTable( {
"ordering": false
} );
source: https://datatables.net/reference/option/ordering
('#instant-quotes').DataTable({
"data": dataSet,
"scrollY": yscroll,
/*"initComplete": function(settings, json) {
$('#instant-quotes thead tr:first').remove();
},*/
"dom": "lfrti",
"scrollCollapse": false,
"bSortCellsTop": false,
"info": false,
"processing": true,
"bLengthChange": false,
"searching": false,
"pageLength": 7,
"order": [ 0, "desc" ]...
})
When i use the datatable with the scrollX property it always append a blank <thead> with a <tr>.I dont why this occurs but its always doing this,however i removed by using jquery
$('#instant-quotes thead tr:first').remove()
But i dont think so its a good solution because when i sort or redraw the table then this blank <thead> again appears, also when i change the layout (coz its responsive) then it appears again,
Kindly suggest a better and optimal solution.
I am trying to use the datatable column chooser as shown in Datatable Colvis as shown below
$('#tableId').dataTable({
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"aiExclude": [ 0,15 ]
},
"aaSorting": [],
"aaData":[],
"aoColumns": [],
"bScrollInfinite": true,
"sScrollY": "280px",
"sScrollX": "963px",
"bDestroy":true,
"iDisplayLength" : 10,
"fnInitComplete": function() {
// custom scroll bars
//$('#tableId').find('.dataTables_scrollBody').jScrollPane();
},
});
I have added 16 columns which I cant show up in the code here.
But the column chooser doesn't show up on the UI. Any mistake am doing here?
Sorry I had not added ColVis plugin JS to application, so it was not working. Thanks for your response.