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());
});
Related
I'm using JQuery to filter a table (calling tr.hide() on non-matching rows). The table resides within a scrollable div. The problem: unfortunately, on filtering the list, the user loses his/her scroll position every time.
Is there a clean way to
obtain the top row of the current view port before scrolling
scroll to the very same row if it is still visible after filtering
or, if the row is no longer visible, scroll to the closest neighbor row (above or below), which is still visible
just add an anchor in the row you want to keep and go to this anchor after you filtered
Although it say's experimental, there is the element.scrollIntoView. It does seem to be supported by most major browsers. And you could always polyfill for those that don't.
https://developer.mozilla.org/en/docs/Web/API/Element/scrollIntoView#Browser_compatibility
It would look something like this. I don't use jQuery enough to use it in my example, so I will leave that is an exercise for the reader.
var rowToScrollTo = null;
for (var i = 0; i < rows.length; i++)
{
// Find the first visible row.
if (rows[i].offsetTop > scrollableDiv.scrollTop && shouldBeVisible(rows[i]))
{
rowToScrollTo = rows[i];
break;
}
}
// Show/hide rows
scrollableDiv.scrollTop = rowToScrollTo.offsetTop;
I hope you can help. I am trying to set part of a column to a text area.
$('#myListview .list-item').click(function() {
getId('textarea-Status').value(this.innerHTML);
}
I printed out 'this' which shows all of my HTML however I only want to show a specific part:-
Within the HTML that I have printed out to a text area I want to be able to print the row ID called 'data-roid'.
<div class = "ui-btn-text listview-row" **data-rowid="123456789"**>
So basically my new text are value wuld = '123456789'
getId('textarea-sysID').value($(this).find('data-rowid').text()));
sysID = $(this.data-rowid);
alert(sysID.innerHTML);
getId('textarea-sysID').value(sysID);
getId('textarea-sysID').value = JSON.stringify(sysID);
Would really appreciate any help.
Thanks
Get element by has attribute selector and attribute value by using data() method.
$(this).find('[data-rowid]').data('rowid')
I need to save a value "disk-size" for a td in a table and then set the same value to another td. I am trying to use data-attributes, but cannot figure out how to make this happen. Here is my code:
function addOnDrop(x)
{
if(currentDisk < 12)
{
var td = document.getElementsByClassName("vArray-td");
td[currentDisk].innerHTML = x.html();
td[currentDisk].style.backgroundColor = "black";
td[currentDisk].data("disk-size",x.data("disk-size"));
array.push(parseInt(x.data("disk-size")));
}
}
I am dealing with two tables where the value of the attribute "data-disk-size" should be copied from one td to the other. In the code, x is a jQuery UI.draggable object of the first table td and td[currentDisk] is the second table td. I want to set td[currentDisk]."data-disk-size" = x."data-disk-size". I am getting error "Uncaught TypeError: undefined is not a function" on this line:
td[currentDisk].data("disk-size",x.data("disk-size"));
How am I supposed to accomplish this? And I guess the broad question is how do I get and set custom attributes in JavaScript?
(This is my first post to Stack Overflow so I apologize if I did something wrong.)
.data is jQuery.
The Vanilla JS way is:
td[currentDisk].setAttribute("data-disk-size",x.getAttribute("data-disk-size"));
If you're using jQuery, I suggest you use it consistently:
var td = $(".vArray-td").eq(currentDisk);
td.html(x.html()).css("background-color", "black")
.data("disk-size", x.data("disk-size");
array.push(x.data("disk-size"));
As others have mentioned, you data is a jQuery method. So the following line is invalid because td[currentDisk] is a DOM element, not a jQuery object:
td[currentDisk].data("disk-size",x.data("disk-size"));
It should look more like this:
$(td[currentDisk]).attr("data-disk-size",$(x).attr("data-disk-size"));
I have, for example, 3 rows from a table. Each of the rows gets its content from a database. By default when the row is collapsed, the text should be shortened -
trs[i].innerText = trs[i].innerText.substring(0,25) + '...';
When a user clicks on the div it expands, and if clicked again - collapses.
if(tr.style.height == "150px")
{
tr.style.height = "20px";
}
else {
tr.style.height = "150px";
}
So far, so good, but I want the text to be shortened only if the div is collapsed. With my solution when the page loads the text is shortened, but when the row is expanded it remains shortened. How can I fix this? I can only think of when the row expands to call an AJAX function which returns the original data, but I don't think it's the best possible way. Thanks in advance.
First you'd have to store the full text before shortening it.
trs[i].fullText = trs[i].innerText;
trs[i].innerText = trs[i].innerText.substring(0,25) + '...';
Then you can restore it in the handler:
tr.innerText = tr.fullText;
tr.style.height = "150px";
Here's a jsFiddle. I'm using jQuery to select the elements, but you already have the correct tr's anyway. If you were using jQuery you could also use $(tr).data("fullText", $(tr).text()) which avoids some minor memory leaks with adding properties to DOM elements in old versions of Internet Explorer.
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;