Develop Reference

jQuery DataTables cell styling

I'm using jQuery DataTables, and I am able to look at the row data and colorize the row.
Here is the code that creates the datatable:
var $dataTable = $('#example1').DataTable({
"data": data,
"dataType": "json",
"iDisplayLength": 25,
"order": [[6, "desc"]],
"scrollY": 550,
"scrollX": true,
"bDestroy": true,
"stateSave": true,
// here is the part that styles the row
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull)
{
if (aData[12] == "Y"){$('td', nRow).css('background-color', '#EE6363');}
if (aData[9] == "Y"){$('td', nRow).css('font-weight', 'bold');}
}
});
So if you'll notice in the code above, the 1st if statement checks if the row data of the 12th column, which is called REJECTED, is "Y". If so, make the entire row red.
The 2nd if statement checks if the row data of the 9th column, which is called URGENT, is "Y". If so, make the text for that entire row bold.
What I would like to do is make the cell for that column red instead of the whole row, primarily for the 1st row.
How can I alter my code above to achieve this?

I can't test it....
But I would try something like this :
if (aData[12] == "Y"){$('td', nRow)[12].css('background-color', '#EE6363');}
Or this tricky thing:
if (aData[12] == "Y"){$('td', nRow).parent().children()[12].css('background-color', '#EE6363');}
If zero-based:
if (aData[12] == "Y"){$('td', nRow)[11].css('background-color', '#EE6363');}
Or:
if (aData[12] == "Y"){$('td', nRow).parent().children()[11].css('background-color', '#EE6363');}

Here is the code that will color the target cell:
if (aData[12] == "Y"){$('td', nRow).eq(1).css('background-color', '#BF5FFF');}
By adding eq(1), I can target and color the 2nd cell in the datatable. This is how I got it to work.

jquery datatable whole column background color

I have a datatable, I want to color code the column based value in the last row.
If the TYPE value is "O" then apply yellow color, otherwise nothing. My columns are dynamic.
expected result:
var dt= $(element).dataTable({
deferRender: true,
destroy: true,
"aaData": data, // data is coming from service
"aoColumns": columns // column is dynamic
});

SOLUTION
You can use drawCallback to handle table draw event and enumerate columns data with columns().every() to find columns containing required values and highlight them.
var table = $('#example').DataTable({
drawCallback: function(){
var api = this.api();
api.columns().every( function () {
var data = this.data();
if($.inArray('O', data) !== -1){
$(this.nodes()).addClass('highlight');
} else {
$(this.nodes()).removeClass('highlight');
}
});
}
});
Please note that the code above detects O in all rows. To handle only the last row you need to add more code.
DEMO
See this jsFiddle for code and demonstration.

Use the rowCallback
$(element).dataTable({
"rowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
switch(aData[0]){
case 'O':
$(nRow).css('backgroundColor', 'yellow');
//also style other rows here
break;
}
}
});
Simple demo: Fiddle

How to transpose a jQuery Datatable structure?

I have a datatable that is editable, and each row has a "child" datatable.
The problem is that the child datatable has so many fields, and I would like to transpose it to have a vertical orientation.
Meaning that the field headers are rows and the table data show as columns...
Please note that each child table has only one row of data, so the resulting transposed data table should consist of 2 columns, one for headers and the other for the data...
Also note that I have disabled pagination, filters and sorting for the child datatable, but I have initialized it to be support inline editing...
It is of the following structure:
$('#myDataTable tbody').on('click', 'tr.group + tr td.details-control', function () {
//console.log($(this).closest('tr'));
var tr = $(this).closest('tr');
var row = table.row(tr);
//console.log(table.row(tr).data());
if (row.child.isShown())
{
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
var batata= $('#myDataTablex').DataTable({
"info":false,
"bFilter": false,
"bSort": false,
"bPaginate":false
});
$('#myDataTablex').dataTable().makeEditable({
"aoColumns": [
......columnByColumnDefinitions here...]
});
}
});
});

Tablesorter JS with Tablescroller Widget, column freeze with multiple checkboxes in multiple columns

I am currently working with a project mainly dealing with database and I use Tablesorter JS Plugin to populate my table. What I want to achieve is a table with more than one fixed columns and have multiple checkboxes in multiple columns in the scrollable section. I am using Tablesorter Bootstrap Theme as the table styling. I followed this JSfiddle Dynamic checkbox sorting and Tablesorter Widget Scroller example.
The problem is, if I enable scroller_fixedColumns: <size>, select all checkbox (in <th>) is not working [column 4]. And how to make all the select all checkboxes working in multiple columns [column 4, 5, 6, ...] ?
And here is my DEMO
Your help is really appreciated! Thank you very much.

Answered in tablesorter issue #977 - demo
Relevant code below. Make sure to include the parser-input-select.js file:
$('table').tablesorter({
theme: "bootstrap",
resort: false,
widthFixed: true,
headerTemplate: '{content} {icon}',
widgets: ["uitheme", "filter", "zebra", "scroller"],
widgetOptions: {
filter_reset: ".reset",
filter_cssFilter: "form-control",
scroller_fixedColumns: 3,
},
headers: {
'.action': { sorter: 'checkbox' }
},
initialized: function (table) {
$(table).closest('.tablesorter-scroller').on('change', 'thead th.action input[type=checkbox]', function () {
var indx,
$this = $(this),
checkboxColumn = parseInt( $this.closest('th,td').attr('data-column'), 10 ),
isChecked = this.checked;
$cells = $(table)
.children('tbody')
.children('tr')
.children(':nth-child(' + (checkboxColumn + 1) + ')')
.find('input'),
len = $cells.length;
for ( indx = 0; indx < len; indx++ ) {
$cells.eq( indx )[0].checked = isChecked;
}
$(table).trigger('update');
});
}
});

How to get <tr> count in HTML table - using Jquery?

I am using Jquery Datatables to achieve search and sort functionality on HTML table <table>.
I have more then 100 rows in <table> and I used iDisplayLength=6 attribute to display on 6 records at the same time and enabled paging functionality for more records.
The problem is: I want to count that how many <tr> in <table> using jquery.
I used follwing code for that but it gives count 6 <tr> always because I used DisplayLength=6.
But I want actual count of <tr>
JavaScript
$(document).ready(function () {
$("#ContentPlaceHolder1_grdRX").dataTable({
"iDisplayLength": 6,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false
});
});
function getCount() {
alert($('#ContentPlaceHolder1_grdRX tr').length);
}
How can I get a count of all the rows?

It looks like DataTables is removing the rows that aren't on the current page from the DOM, so you aren't going to be able to count them with a jQuery selector. You'll have to use the DataTables API, specifically the fnGetHiddenNodes function:
var table = $('##ContentPlaceHolder1_grdRX').dataTable();
$('#button').click( function () {
var hidden = table.fnGetHiddenNodes();
alert( hidden.length +' nodes were returned' ); } );