I am trying to implement datatable fixed colum example coping from there side inside my code but it simply dopesn't work. I created a jsfiddle with the same code but columns are not fixed.
site:
https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html
JS sample:
http://jsfiddle.net/jsf6cg6L/229/
var table = $('#example').DataTable( {
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
} );
Your fiddle is missing a dependency:
https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js
Adding it as an external resource makes it work.
Related
I am trying to combine 2 JavaScript code blocks in in my footer but when I use both it gives an error. How do I combine 2 JavaScript code blocks?
FIRST
$(document).ready(function() {
$('#mydata').DataTable( {
"order": [[ 0, "desc" ]],
scrollY: 400,
scrollCollapse: true,
paging: true
} );
} );
SECOND
$(document).ready(function() {
$('#mydata').DataTable( {
"oLanguage": {
"sUrl": "js/dil/English.json",
}
} );
} );
Error message: DataTables warning: table id=mydata - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
They are just JavaScript initialisation objects. Just combine the objects:
$(document).ready(function() {
$('#mydata').DataTable({
"order": [
[0, "desc"]
],
scrollY: 400,
scrollCollapse: true,
paging: true,
"oLanguage": {
"sUrl": "js/dil/English.json",
}
});
});
This should be working. You need to clearly tell what's the error coming up.
I am using Datatables (http://www.datatables.net) at one of my projects. The datatable opens in a Bootstrap Modal and I set the option that only 5 rows are visible on one page. That is working as it should.
Now I wanted to hide the dropdown box for display records and therefore I found the solution on this thread: StackoverFlow - Solution for hiding "Display Records"
My code looks like this now:
$(document).ready(function() {
$('#readnews').dataTable({
"iDisplayLength": 5,
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false });
My Problem is now that this code is not working! If I use this code:
$(document).ready(function() {
$('#readnews').dataTable({
"iDisplayLength": 5 });
I can only see 5 rows at a page that is good. If I use this code:
$(document).ready(function() {
$('#readnews').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false });
});
I can see that the "Display Records" is hidden but I am not able to use both options (hide "Display Records" and only show 5 recors per page) at once.
Can someone tell me what I am doing wrong? What should my code look like? I do not know what I am doing wrong.
Thanks in advance,
Chris
I Means
$(document).ready(function () {
$('#readnews').DataTable({
"fnDrawCallback": function (oSettings) {
if ($('#readnews tr').length < 5) {
$('.dataTables_paginate').hide();
}
},
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
"iDisplayLength": 5,
});
});
I'm trying to sort a table by a particular column with DataTables, but I receive this warning:
DataTables warning: table id=DataTables_Table_0 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3
I put these scripts but maybe I'm doing something wrong:
jQuery('.sp-template-league-table table').DataTable({ paging: false, searching: false, info: false, retrieve: true });
jQuery('.sp-template-league-table table').DataTable().column('.data-tot').order('asc').draw();
You can see the table in this page: http://www.quartuleague.com/goldcup-2015-girone-gold/
under the "Fair Play" Tab, i want to sort table by "TOT"
If you want to sort the data by default you can also pass along additional parameters on the initialization instead of using .draw():
Example: Ascending sorting of the 4th column (indices start at 0)
$('#example_table').DataTable( {
"order": [[ 3, "asc" ]]
} );
In your case you need to add the column number of your data-tot column (8 or -1) like so:
jQuery('.sp-template-league-table table').DataTable({
order: [[ 8, "asc" ]],
paging: false,
searching: false,
info: false,
retrieve: true
});
I am using jQuery DataTables with Grouping and Filtering on data. But both can't work together. Only one can work.
oTable = $('#schedule').dataTable({
'bLengthChange': false,
'bPaginate': false,
'bJQueryUI': true,
'processing': true,
"aoColumnDefs": [
{ "bSortable": false, "aTargets": ["no-sort"] }
]
}).columnFilter({
sPlaceHolder:"head:before"
}).rowGrouping({
sGroupingColumnSortDirection: "desc",
bExpandableGrouping: true,
bExpandSingleGroup: false,
iExpandGroupOffset: -1,
asExpandedGroups: ['Pending Action', 'In Operation']
});
Please give me advice on how to work with both and I want to add the filter field in different div.
It doesnt work because you are using chaining. You are accidently trying to initialise rowGrouping on whatever columnFilter() returns :
dataTable().columnFilter().rowGrouping()
< dataTable < columnFilter
Use another approach to initialise the plugins, for example in the initComplete callback (fnInitComplete if you are using 1.9.x) :
var table = $('#example').dataTable({
initComplete : function() {
this.columnFilter();
this.rowGrouping({
bExpandableGrouping: true,
asExpandedGroups: ["Other Browsers", "Trident"],
fnOnGrouped: function() { alert('Rows are regrouped!'); }
});
}
})
demo -> http://jsfiddle.net/y2s2b0an/
I'm using the DataTables jquery plugin to build an HTML scrolling table with fixed headers and fixed columns.
Everything was working fine with 1 fixed column, but there seems to be a bug if I set more than one fixed column. The first fixed column works normally, but for the others, only the header stay fixed.
This is the javascript I'm using to initialize the DataTable :
_$grid.dataTable({
colReorder: {
fixedColumnsLeft: 1
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false,
fixedColumns: {
leftColumns: 1 // If leftColumns is set to 2 (or more) the bug appears
}
});
I've tried to initialize the FixedColumns extension this way, same effect :
_dataTable = _$grid.dataTable({
colReorder: {
fixedColumnsLeft: 2
},
dom: 'Rlfrtip',
info: false,
ordering:false,
paging: false,
scrollCollapse: true,
scrollY: scrollYSize(), // A function that compute the height of the table wrapper
scrollX: '100%',
searching: false
});
new $.fn.dataTable.FixedColumns(_dataTable, {
leftColumns: 2 // If leftColumns is set to 2 (or more) the bug appears
})
Did you ever facing this problem ?
EDIT : (screenshot)