DataTables column width: small values not working - datatables

I'm trying to set the column width of my DataTables column to a small value (like 10px).
According to the docs, I should be able to use:
$('#mytable').dataTable( {
"columnDefs": [
{ "width": "10px", "targets": 0 }
]
} );
This seems to work for larger values (like 100px) but not for the smaller ones I'm trying to use.
My column header and cells in that column just contain so these shouldn't be defining the width.
I removed the sorting possibilities from the header so that's not eating up space either ("orderable": false).
Jsfiddle: https://jsfiddle.net/snoodaard/ak11heu4/
I also tried to set the width explicitly using <th width="5px"> </th>.
Any pointers on how to accomplish this?

SOLUTION
Use the following code to remove padding and content for the last column and color all cells in certain color.
JavaScript
$('#mytable').dataTable({
"order": [],
"paging": false,
"dom": 'T<"clear">lfrtip',
"columnDefs": [{
"className": "tag",
"orderable": false,
"width": "2px",
"targets": 2
}]
});
CSS
table.dataTable thead tr th.tag,
table.dataTable tbody tr td.tag {
padding:0;
text-indent:-9999px;
}
table.dataTable tbody tr td.tag,
table.dataTable tbody tr td.tag {
background-color:red;
}
You can use createdRow callback to set a class for a row based on the row data. Then you would be able to color each row differently based on that data.
DEMO
See updated jsFiddle for code and demonstration.

Related

dc.js dataTable Conditional formatting using jquery dataTable

I have a dashboard which is built using dc.js and i'm using the chart types dc.rowChart and dc.dataTables.
Working Scenario with without conditional formatting:
dc.rowChart - displays Top 50 Customers
dc.dataTable - displays all the fields required and filters the data based on the rowChart.
Working Scenario with conditional Formatting (on datatable rows)
In my HTML, i'm calling the jquery plugin for DataTable (for conditioanl formatting) and here is the code below:
<script>
$(document).ready(function() {
$("#Table").DataTable( {
/*
fnRowCallback: function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
if ($(nRow).find('td:eq(7)').text()<'0') {
$(nRow).find('td:eq(7)').addClass('color');
}
}
*/
columns : [
{ title : "Customer Name" },
{ title : "YoY Rank Change" ,
render: function ( data, type, row ) {
if (data > '0') {
return '<p class="positive">'+data+'</p>';
} else {
return '<p class="negative">'+data+'</p>';
} } },
{ title : "Jan'19 Qty" },
{ title : "Dec'18 Qty" },
{ title : "Nov'18 Qty" },
{ title : "Oct'18 Qty" },
{ title : "Sep'18 Qty" },
{ title : "Aug'18 Qty" }
]
} );
} );
$.extend( true, $.fn.dataTable.defaults, {
"searching": true,
"ordering": false,
"paging": false,
"info": false,
} );
</script>
CSS:
.negative {
background-color:rgba(255,0,0,1.00);
color: #fff;
text-align: center;
}
.positive {
background-color:rgba(50,205,50,1.00);
color: #fff;
text-align: center;
}
ISSUE HERE
When i render the page first time, everything with the datatable with conditional formatting works fine
But when i click on Row Chart to filter datatable based on Customer's, Conditional formatting is gone...
Any help is much appreciated to fix this.
I have tried almost all the stack answers but i'm not able to achieve it.
references used below:
1. How to color code rows in a table dc.datatable?
2. How do I apply conditional formatting using datatables.js?
3. Color code a data table in dc.js
4. How to color code rows in a table dc.datatable? ( This is opted out as i dont want to color code entire row)
#Gordon my survivor at all times.. Looking for your inputs please!!
I see that you are still on dc.js 2.0, so I didn't attempt to port this to dc.datatables.js or dc-tableview. I still think that would be more maintainable.
As I noted in the comments, $.DataTable is a one-way transformation: once you have done this, there is no way to update the table, because dc.dataTable doesn't recognize the DOM structure anymore, and DataTable doesn't have a way to reinitialize.
There might be some smart way to get DataTables to update the data (and this is what the libraries do). It's also madly inefficient to first build a table and then construct a DataTable using the DOM as a data source.
But whatever, let's just get this working by building the DataTable from scratch every time the dc.dataTable is drawn.
The way to do this is to listen for the table's pretransition event, remember if we've already initialized DataTable, and if we have, destroy the old instance:
var dt = null;
table.on('pretransition', function() {
if(dt)
dt.destroy();
dt = $("#dc-data-grid").DataTable( {
// as before
} );
});
Fork of your fiddle. I had to fix a few other things, but I won't go into the details.

Datatables responsive, set specific options

I am using DataTables with the responsive extension on our web application, but I have a question.
When the table is made responsive, it should hide the pagination option.
I tried this with "bLengthChange": false:
$(function () {
$("#table1").DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
},
"order": [[1, "asc"]],
"bAutoWidth": false,
responsive: {
details: {
type: 'column'
},
"bLengthChange": false
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 0
} ],
});
});
However, this does not work. My target is that I can see the pagination amount dropdown menu on fullscreen, but that option should be hidden if responsive.
Can I add options like bLengthChange specific to the "responsive" state?
Can I add options like bLengthChange specific to the "responsive"
state?
No, you cannot. Try inspect $.fn.dataTable.Responsive.defaults again, as I believe you already have done. It does not give so much sense either, the responsive extension is an extension while lengthMenu is a core feature. If you want to hide the lengthMenu you would need to reinitialise the table or do something hackish that may or may not conflict with other features or other extensions. But you can do the hack yourself. Hook into the responsive-resize event and hide or show the lengthMenu according to the responsive status :
table.on( 'responsive-resize', function ( e, datatable, columns ) {
var $lengthMenu = $('.dataTables_length')
var count = columns.reduce( function (a,b) {
return b === false ? a+1 : a;
}, 0 );
if (count>0 && $lengthMenu.is(':visible')) $lengthMenu.hide()
if (count<= 0 && !$lengthMenu.is(':visible')) $lengthMenu.show()
} );
demo -> http://jsfiddle.net/v1dnxLkg/
Thank you.
Fixed it with this CSS:
#media screen and (max-width: 767px){
div.dataTables_wrapper > div.row > div > div.dataTables_length{
display: none;
}
}

datatables header not aligned with columns when scrolling horizontally

I cannot figure out the way to solve this. Ive tried adding "table-layout:fixed" but it no longer works in dt's current version.
Thanks
var config = {
"bFilter": false,
"bInfo": false,
"bPaginate": true,
"scrollY": 200,
"table-layout":fixed,
"data": dataoMine,
"bAutoWidth": false,
"columns": columns,
"scroller": true,
"language": {
"emptyTable": "empty data"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
};
<table class="dataTable" style="width:80%; height:100%; margin-left:10%; margin-right:10%;}">
<thead><tr>
<th>a1</th>
<th>a2</th>
<th>a3</th>
<th>a4</th>
<th>a5</th>
<th>a6</th>
<th>a7</th>
<th>a8</th>
</tr></thead>
</table>
I don't quite have enough information to give you a firm answer, because you don't tell us what's in your columns variable and don't give us the structure of your dataoMine array. But, it seems pretty clear from your screen shot that you have four columns of data, and also have eight columns specified. That will show all the columns and whatever background you have for the missing data columns. Presumably, your "barbershop stripes" are the page background in whatever theme you are using.
Make sure that you have the same number of columns in your data that you have in your column specification, and see if that fixes your problem.
After researching it turns out that this problem is very common. It seems there is no definitive solution but this worked for me:
add this into dt's config:
scrollX: 100%
i fixed my problem by just adding
scrollX: true

place Processing language on top of DataTable

Is there a way to put the "Processing..." language on the top of the DataTable object instead of in the middle vertically? If I have a long table, it is hidden off the page because its default position is in the middle.
$('#example').dataTable( {
"language": {
"processing": "DataTables is currently busy"
}
} );
Use the following CSS rule and adjust top as you wish.
div.dataTables_wrapper div.dataTables_processing {
top: 5%;
}
See this jsFiddle for demonstration.

Datatables table header & column data misaligned when using "sScrollY"

Having problems with my table header becoming misaligned when I use "sScrollY". The header realigns itself only after I sort a certain column by clicking on one of the headers.
Misaligned.
Corrected only After I click on a sort header.
My Setting:
oTable = $('#userslist').dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"sScrollY": "150px",
"bAutoWidth" : true,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"sDom": '<"H"lfr>t<"F"<"useraccountbtn">>',
"aaData": datan,
"aoColumns": [
{ "mDataProp": "uid"},
{ "mDataProp": "fn" },
{ "mDataProp": "un" },
{ "mDataProp": "pw" },
{ "mDataProp": "em" },
{ "mDataProp": "ac" }
]
});
I've also tried fnAdjustColumnSizing() which every Google Search seems to be suggesting but it doesn't do anything for me.
I have fix this way;
wrap the table with div and
CSS
overflow:auto;
height: 400px;
position:relative;
Remove
“sScrollY”
"sScrollX"
I've had to delay when data is loaded because when page loads it does not see the scroll bar and table headers get misaligned. But if I delay it, it sees the scroll bar and the table header matches up perfect.
<button onclick="delayload('loadusers()')">Load Table</button>
function delayload(f){
setTimeout(f,50)
}
function loadusers() {
oTable = $('#userslist').dataTable({
"bJQueryUI": true,
"bRetrieve": true,
"sScrollY": "150px",
"bAutoWidth" : true,
"bPaginate": false,
"sScrollX": "100%",
"sScrollXInner": "100%",
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"sDom": '<"H"lfr>t<"F"<"useraccountbtn">>',
"aaData": datan,
"aoColumns": [
{ "mDataProp": "uid"},
{ "mDataProp": "fn" },
{ "mDataProp": "un" },
{ "mDataProp": "pw" },
{ "mDataProp": "em" },
{ "mDataProp": "ac" }
]
});
}
I had to remove the scrolling manually, because nothing else worked. Then I used #Suresh Kamrushi 's answer to make an external scrolling div
Here's the code if anyone needs it :)
//replace all scroll-related divs with their content (aka unwrap the content)
$('.table-responsive').replaceWith($('.table-responsive').html());
$('.dataTables_scroll').replaceWith($('.dataTables_scroll').html());
$('.dataTables_scrollHead').replaceWith($('.dataTables_scrollHead').html());
$('.dataTables_scrollBody').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_scrollHeadInner').replaceWith($('.dataTables_scrollBody').html());
$('.dataTables_sizing').each(function (index, value) {
$(this).replaceWith($(this).html());
});
//Re-size the header
$('#table_view_subs thead tr').attr("style","height:37.6px");
//add external scroll div
$("#table_view_subs").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
It's very hacky, but if you've lost a week and your patience trying to get the DataTable to behave, you're not gonna care
Well, whenever you sort or filter and the contents of the table change in some way, fnDraw gets called. If an extra fnDraw is working (via clicking your sorting header after the table has loaded), and it isn't tied to bServerSide then trying an extra call to oTable.fnDraw() couldn't hurt.
Using ScrollX or scrollY create such problems. there is a work around for it:
$('#userslist').DataTable({
"initComplete": function (settings, json) {
$("#reportDetails").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");
},
});
First remove ScrollX or scrollY if you have in your page and add above code to fix it.
Try this:
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
I also had problems with ScrollX.
With wide tables it is a very big help. With narrow tables, as in the problem case above, I also had the same problem.
The problem arises because 3 tables are also made in one table. One for the header, one for the data and one for the footer.
The data part has the correct width. The header and footer are too short, so I enlarged them using CSS:
// Scroll-X
DIV.dataTables_scrollHeadInner,
DIV.dataTables_scrollFootInner{
min-width: 100%;
}
DIV.dataTables_scrollHeadInner > TABLE,
DIV.dataTables_scrollFootInner > TABLE{
min-width: 100%;
}