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.
Related
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";
});
}
},
I have a table with some items and those items can be selected by adding a tick. Check the image attached:
What I need to achieve is to hide the row which does not contain any ticks to be not visible. This is because in my app I have to generate lists of the items contains only ticks in another view. So when I will press the generate button that row will be hidden.
I just want to say if that row does not contain any 'glyphicon-ok' need to be deleted/hidden when I will generate the view with the list of those items.
I tried something like this:
SveCrf.prototype.hideRowWhereNoTicksForm = function () {
var tr = document.getElementsByTagName('tr');
for (var i = 0; i < tr.length; i++) {
switch (tr.item(i).getElementsByTagName('td').item(0).className) {
case "glyphicon-ok":
tr.item(i).style.display = "none";
break;
}
}
}
This doesn't do anything.
I would like to see an example of being able to resolve this issue.
Correct me if I'm wrong but you don't seem to have provided HTML you want to act upon but just a screenshot and a link to some RoR code in the comments that generates the HTML. Also you don't show how you try to execute SveCrf.prototype.hideRowWhereNoTicksForm, and furthermore I'm not really sure at all what you are trying to do with switch/case (I also don't understand what item is supposed to be; this is where providing us with actual HTML might have helped).
In addition, as I've alluded to in some comments of mine, you are really trying to do two things. I don't know if you've seen this Stackoverflow page yet about creating "a Minimal, Complete, and Verifiable example" but I think reviewing that will help improve your StackOverflow experience moving forward (and also for me it validated my suggestion of "divide and conquer").
All of which I think made it hard for you to get the help you desired. In any case below I'm providing some sample HTML with a table containing four rows total, two with a cell that contains the class foo, and two that don't. Beneath that is my non-jQuery code selecting the rows with no cells containing the class foo, and then hiding them; furthermore there is a demo of the same functionality using jQuery at https://repl.it/#dexygen/HideRowsWithNoCellsWithClass
<table border="1">
<tr><td class='foo'>foo</td><td></td><td></td></tr>
<tr><td></td><td>bar</td><td></td></tr>
<tr><td></td><td></td><td>baz</td></tr>
<tr><td class="foo">foo</td><td>bar</td><td>baz</td></tr>
</table>
/*
We cannot call `filter` directly on an HTMLCollection such as returned by
"document.getElementsByTagName('tr')" as it is not a bona fide array, so we use
"[].filter.call()", and we return only those rows that *fail* the test
"row.querySelector('td.foo')", then we loop over these with `forEach` and hide them
*/
[].filter.call(document.getElementsByTagName('tr'), function(row) {
return !row.querySelector('td.foo');
}).forEach(function(row) {row.style.display = 'none'});
So here is the situation, im creating a clickable dynamic table by adding row with a button. Each row have informations and can be clicked (the entire row). I look for a way to send the information of the row I clicked to another js function who will copie the row in another dynamic table. But here is the trick : to create a clickable row, I use the function .append and I create the row in a < a> tag which will use href="function_to_add_the_copied_row" to call the other function.
The problem is I cant find out the good syntax. Any suggestion for syntax or other way to do the trick would be appreciated. Here is my code :
//javascript function to make clickable rows
{
var infos = modules_found[i].split("\\t");
rowNum++;
//word ="'Row number : "+infos[0]+"'";
$(".targets").append('<li> <div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></li>');
}
//javascript function who receive the array and add the copied row
function transferArray(infos)
{
alert("in transferArray function");
$(".copied").append('<li> <div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></li>');
}
Here is a high level approach (assuming you know jQuery): instead of wrapping your row inside A tag, better way is to have register a click event listener on your table (via jQuery APIs and not in HTML). In that click handler you can get the index of row clicked easily (make use of jQuery APIs) and once you have the rowindex, you can easily clone the row and move it to somewhere else.
typically how this is handled - if you are not using some type of javascript library like Angular or Knockout is to just store data in the actual HTML with data attributes. you can make as many data attributes as you want as long as they start with data-
ex.
$(".targets").append('<li data-id="xx" data-name="xx" data-custom=""> <a href="...
then I would recommend using jQuery click handler on every row by giving them all a class , ex.
$(".targets").append('<li class="rowClick" data-id="xx" data-name="xx" data-custom=""> <a href="...
then handle the click like this
$(document).on('click' , 'rowClick' , function(e){
var $this = $(this);
//get data of row clicked
var idClicked = $this.attr('data-id');
var nameClicked = $this.attr('data-name');
// you also have the full HTML of the clicked row if you need to copy somewhere
var rowHtml = $(".copied").append($this);
});
You're already using jQuery , so use it to handle the click and then you have the element clicked as a jQuery object right there . You can use native javascript function to handle the click and pass data like you were , but you already are using jQuery and that will automatically bring in a lot more data for you.
Finally, I used native javascript function since the suggested solution didn't work, even if it looks all legit. So here is what I have done:
(...)
//append the js function
$(".FindTable").append('<li id="addedFindRow"><div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></li>');
}
function copyrow(info0,info1,info2,info3,info4,info5)
{
//use data
}
This is quite heavy, but that will do. Would be more chaotic if there was more parameters thought.
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)
A user clicks on a row of a table, and I want to get (in Javascript) the innerhtml of let's say the 3rd column of that row.
Something like :
document.getElementById("tblBlah").rows[i].columns[j].innerHTML
doesn't seem achievable and I can't find anything here or in the net.
Any solutions would be very much appreciated ( NO jQuery )
document.getElementById("tblBlah").rows[i].columns[j].innerHTML;
Should be:
document.getElementById("tblBlah").rows[i].cells[j].innerHTML;
But I get the distinct impression that the row/cell you need is the one clicked by the user. If so, the simplest way to achieve this would be attaching an event to the cells in your table:
function alertInnerHTML(e)
{
e = e || window.event;//IE
alert(this.innerHTML);
}
var theTbl = document.getElementById('tblBlah');
for(var i=0;i<theTbl.length;i++)
{
for(var j=0;j<theTbl.rows[i].cells.length;j++)
{
theTbl.rows[i].cells[j].onclick = alertInnerHTML;
}
}
That makes all table cells clickable, and alert it's innerHTML. The event object will be passed to the alertInnerHTML function, in which the this object will be a reference to the cell that was clicked. The event object offers you tons of neat tricks on how you want the click event to behave if, say, there's a link in the cell that was clicked, but I suggest checking the MDN and MSDN (for the window.event object)
in case if your table has tbody
let tbl = document.getElementById("tbl").getElementsByTagName('tbody')[0];
console.log(tbl.rows[0].cells[0].innerHTML)
To get html code :
document.getElementById("table").rows[i].cells[j].innerHTML;
To get text :
document.getElementById("table").rows[i].cells[j].innerText;