We Keep Coding

Tabulator data tree: Set row padding for only one level

I'm using the Tabulator data tree. I would like to change the row padding only for level 0. Is that possible?

possibly, I havent tested this but if you use a rowFormatter and use getElement() on it, you might be able to change the padding that survives anything Tabulator does behind the scenes. When I do an inspect of one of my rows, I see it sets padding-left:0px , so at least you know that Tabulator uses that, and if you change it, it might get overwritten.

rowFormatter was the key. Thank you!
rowFormatter:function(row){
if(row._row.modules.dataTree.index == 0){ //level 0
var cells = row.getCells();
cells.forEach((cell) => {
cell.getElement().style.paddingTop = "24px";
});
}
},

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.

jQuery .append() not working as desired

Here is my code where I am composing a table:
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>");
$("#results").append("<tr><td>John</td><td>1231231234</td></tr>");
$("#results").append("</table>");
When I apply border to this table using CSS, it doesnt get applied properly. Please refer to this fiddle: http://jsfiddle.net/23NQX/1/
What am I doing wrong here?

create variable table.. append <tr> to it... and append the final table to result
try this
var table=$('<table>');
table.append('<tr><th>Name</th><th>Phone Number</th></tr>');
table.append("<tr><td>John</td><td>1231231234</td></tr>");
$("#results").append(table);
more clear and readable.
append does accept additional arguments, so you can even do
table.append('<tr><th>Name</th><th>Phone Number</th></tr>',"<tr><td>John</td><td>1231231234</td></tr>");
but i prefer to go with first...
fiddle

Appending unclosed tags will auto close the tag if you don't close them yourself, so in your case it will create 2 tables. So put the string together in one append.
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr><tr><td>John</td><td>1231231234</td></tr></table>");
DEMO

You have to first create the table and then append rows to the table.
Like this:
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#results > table").append("<tr><td>John</td><td>1231231234</td></tr>");
Check out this fiddle

Create the table with your first append, then append to the table
$("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#results").children("table").append("<tr><td>John</td><td>1231231234</td></tr>");

I always find it helps to think of things the other way around:
// create the table
$("<table>")
// append the header
.append("<tr><th>Name</th><th>Phone Number</th></tr>")
// append a row to the table
.append("<tr><td>John</td><td>1231231234</td></tr>")
// append the table to the DOM
.appendTo($("#results"));
Here's a fiddle showing this works as you want, and is easier to read.

I offer you to use next structure:
$("#results").append($("<table>")
.append($("<tr>")
.append($("<th>").html("Name"))
.append($("<th>").html("Phone Number"))
)
.append($("<tr>")
.append($("<td>").html("John"))
.append($("<td>").html("123123123"))
)
)
It's easy to modify and read.
DEMO: http://jsfiddle.net/23NQX/7/

for a simple approach
$("#results").append("<table id='table'><tr><th>Name</th><th>Phone Number</th</tr></table>");
$("#table tr:last").after("<tr><td>John</td><td>1231231234</td></tr>");

$("#results").append("<table id='my_table' border='1'><tr><th>Name</th><th>Phone Number</th></tr></table>");
$("#my_table").append("<tr><td>John</td><td>1231231234</td></tr>");

jquery find table cell with value

I have a table with id trends_table. I want the cell with the exact match of "Page Fans"
$j("#trends_table td:contains('Page Fans')")
This gives me all cells that contain, how do I do equals? I have fiddled with a bunch of syntax but nothing I can find works.
I see this, Jquery find table cell where value is X but dont see how I would do it for a given table, dont understand the context.
thanks
Joel

Try using a filter. See below,
$j('#trends_table td').filter(function () {
return $.trim($(this).text()) == 'Page Fans';
});

$('#trends_table td').filter(function() {
return $(this).text() == 'Page Fans';
}).css('background-color', 'red');
Here is an example of what you try to accomplish.
http://jsfiddle.net/bQdpp/1/ .In this example I just turn the cells red, take care if more then 1 cell is returned then all the cells are turned red.

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 :)