We Keep Coding

How does DataTable drawCallback work?

I am trying to apply CSS to each of the DataTable cells based on its value, using the drawCallback().The CSS gets applied to a few cells and not all. Here is the JsFiddle to my issue.Has anyone come across this issue and found a solution or have any ideas on this.Please suggest!
"drawCallback": function( settings ) {
var api = this.api();
var visibleRows=api.rows( {page:'current'} ).data();
if(visibleRows.length >= 1){
for(var j=1;j<visibleRows[visibleRows.length -1].length;j++){
$("td:eq("+j+")", settings.nTBody.childNodes[visibleRows.length -1]).addClass(visibleRows[visibleRows.length -1][j]);
}
}
},

Like #charlietfl said, you don't really want to be using drawCallback to format the rows, and you would probably be better off using createdRow (rowCallback) to do this formatting.
drawCallback is called on every draw event, meaning that it's really meant to be used to update rows that have just been added or work with data that has just been updated.
createdRow on the other hand, is designed to be called whenever a row is created, which seems to be what you really want. In this documentation (example), you can see that the author displays how to use this option to add a class to certain rows, which seems to be the closest to what you want to do.
As far as I can tell, you want to make every cell have a CSS class that is the same as the text in the cell (correct me if I'm wrong). The easiest way to do that with createdRow would be as follows:
"createdRow": function ( row, data, index ) {
for(var i = 0;i<data.length;i++){
$('td', row).eq(i).addClass(data[i]);
//The above line assumes that you want to add a CSS class named "red" to a
//field that has the text "red" in it, if not, you can change the logic
}
}
Just include this in your initialization options for the .DataTables() call.
I had to make some assumptions about the exact logic for what classes get added to what columns, but if they are correct, then this should add a class to each field that is named the same as the text in that field.

Not able to get element by id in DataTables

I am trying to scroll to a row with a specific id in DataTable. following is the code for it.
function scroll_row(int_id) {
var obj_element = document.getElementById(int_id);
if(obj_element != null) {
var int_scroll_pos = obj_element.offsetTop;
$('#myTable').parent().scrollTop(int_scroll_pos-10);
}
}
But the problem with this is that the obj_element is giving me null while getting it by id.
For example if I have 50 rows in my data-table and I try to give the id of the 40th element while scroll being at the top it returns me null.
But when I scroll down somewhere near to that element. It returns the value for getElementById as it should.
I don't know what's the problem here. Anyone knows about this?
I also tried it doing this way https://datatables.net/forums/discussion/33/using-fngetposition-to-find-a-tr-by-id
$("#myTable").fnGetPosition(document.getElementById("262617"))
but in this case also it says fnGetPosition is not a function.
This is how my datatable is
tableSettings = {
...
}
var myTable = $('#myTable').DataTable(tableSettings);
I am not able to understand what is happening in both the cases I mentioned. Hoping to get some help. Thanks :)
Edit - Adding an image with example
image with html
The one with id = 140876 is the last tr row of the datatable. If I'm scrolled up top to the first element of the datatable and try document.getElementById("140876") it gives me null. But I get the value if I'm scrolled down to the bottom. Same goes for every other row. The rows down are returning null when I'm scrolled up.
P.S. had to remove the first image as right now I'm only allowed to add 1 link.

To use fnGetPosition, you should use it like this:
var table = $('#myTable').dataTable(); // with a lower 'd'
var row_index = table.fnGetPosition(this)[0];
Here is a working example: http://live.datatables.net/xoqidaqi/1/
It's a corrected version of the faulty example found here: https://datatables.net/forums/discussion/21582/fngetposition-undefined

You will get the first/all column value of the table.
Assign tr class on tr in the body tag of the table.
The column will be changed according to the number in eq(0) for the first column / eq(1) for the second column and so on.
var table=$('#ID_OF_THE_TABLE').DataTable();
table.$('.bodytr').each(function()
{
console.log((this).find("td").eq(0).html());
});

highlight a row in grid using ext js 4.1

I'm trying to highlight a row and I've googled for a while however all solutions use functions that don't even exist such as getRow() or highlight().
Does anyone have a solution for it?
I've tried the above and the getView().select(record)
Neither has worked
Thanks

Would selecting the row suffice?
gridPanel.getSelectionModel().select([recordToSelect]);

You can use the rowClass to modify a row based on record conditions.
yourGrid.getView().getRowClass = function(record, rowIndex, rowParams, store){
return record.get('status').toLowerCase(); // class selection condition
}
See the JSFiddle example for this (very basic example, just show that the row class get ressetted after each change of the record.)

grid.getSelectionModel().select(0)

How to make action (hide) on all table cells, which ID is not containing some string

I got whole table, which has cells with particular ID's, example: "2012-01-01_841241" etc etc. Date, then some number.
I want to filter my table, so I send some request and get for example three numbers which should be only shown.
I want to hide all cells without these numbers in their IDs - is it any other way than iterating over all of them and check if their ID matches my ID string? (It looks costly).
So, i'm trying to avoid it (especially, when I will have a table of someNumbers :) ):
$('td').each(function(){
if($(this).attr("id") != someNumber) $(this).hide();
})
Thanks!

Well here is a way you can do it (jsFiddle here):
Essentially you can hide everything then make the ones you want visible:
$("#myTable td").hide();
showCells("2012-01-01_841242", "2012-01-01_841247");
function showCells() {
for (var i = 0; i < arguments.length; i++)
{
$("#" + arguments[i]).show();
}
}
The problem however with doing this on a table is that you can end up with an uneven number of <td> tags inside your various <tr> tags so you may want to find a different way to lay them out.

Did you consider something like this:
You can alway hide all tds and than show only these which you want to show
var id = getCurrentIdNotToHide();
$('td#'+id).show();
But I'm not sure if this is better solution

Use this code:
$('td:not([id="' + someNumber + '"])').hide();

Modify table structure (merge cells) with jQuery

I have a table
<table>
<tr><td>9:00</td><td id='ts9'>task1</td></tr>
<tr><td>10:00</td><td id='ts10'></td></tr>
<tr><td>11:00</td><td id='ts11'>task2</td></tr>
<tr><td>12:00</td><td id='ts12'>task3</td></tr>
</table>
and I need to merge cells with id 10 and 11 in one because that task takes 2 hours. I am using jQuery.
I thought about:
$("#ts9").attr('colSpan', 2);
But it wont work.

If you must use jQuery, then this works:
$('#ts10')
.text($('#ts11').text())
.attr('rowspan','2')
.closest('tbody')
.find('#ts11')
.remove();​
JS Fiddle demo.
Or, somewhat more concisely:
$('#ts10')
.text($('#ts11').remove().text())
.attr('rowspan','2');​
JS Fiddle demo.
And a slightly more...useful approach, which will merge cells of adjacent rows with the class of two:
$('tr td.two').each(
function(){
var that = $(this),
next = that.parent().next().find('.two');
if (next.length){
that
.text(next.remove().text())
.attr('rowspan','2');
}
});
JS Fiddle demo.

This works for me. Merges cells with same text: Logic: for each cell, if next cell same text, remove next cell, increment colSpan. (Note "colSpan", not "colspan" - apparently a browser compat issue)
$('#tblData tbody tr:first-child td').each(function(){
var colSpan=1;
while( $(this).text() == $(this).next().text() ){
$(this).next().remove();
colSpan++;
}
$(this).attr('colSpan',colSpan);
});

You actually need to add rowspan to ds10 and then remove ts11 from the second row here. Change you code from colspan to rowspan, add the following
$("#ts11").remove();
and you should get result you need.
But i didn't personally try changing rowspan/colspan attributes via jquery, i'm just assuming it works well. Hope it helps.
p.s.: corrected numbers, thought u need to merge 9 and 10 first :)