I am trying to update a table to display the new row when I save a record. My code currently loads the entire table again along with the existing table. For example, I'm seeing rows 1-15, then I add a row and see 31 total rows, rows 1-15 and then rows 1-16 all in the same table.
Here is my code for the replace function which calls my original load function when it's time to replace the data. I based this off another example I saw.
function replaceData() {
var old_tbody = document.getElementsByTagName('tbody');
var new_tbody = document.createElement('tbody');
loadData(new_tbody);
old_tbody.parentNode.replaceChild(new_tbody,old_tbody);
console.log("Data replaced");
}
I'm clearly not a JavaScript expert so any help would be appreciated.
getElementsByTagName function returns a HTML Collection (array-like object), that means that you have to specify which item of that array you want (even if there is only one item).
So your code basically should be:
var old_tbody = document.getElementsByTagName('tbody')[0];
Or you can use querySelector which returns only the first matched element. Like this:
var old_tbody = document.querySelector('tbody');
getElementsByTagName actually returns a collection of elements, so parentNode
doesn't work. To get the actual DOM node you would do the following.
var old_tbody = document.getElementsByTagName('tbody')[0];
Related
I'm implementing asp.net core 3.1 and have a JQuery DataTable in which the first column holds checkboxes. I'm keeping the selected rows objects in an array like the following for future manipulation. But my problem is how can I get access to each object from the last to the first one, something like I want to pop them out one by one and use them.
var OTable = $("#myDummyTable").dataTable();
$("input[type=checkbox]:checked", OTable.fnGetNodes()).each(function () {
var row = $(this).closest('tr');
var newRow = oTable.row(row);
keepSelectedRows.push(newRow);
});```
If there are elements in your array, and these elements are objects, you can just do
myArr.pop()
I'm assuming that your array is an array of objects!
To access that element,
let el = myArr.pop();
This should work.
I've a table set up with Tabulator with unknown data ( pulled from a file) so i can't make a column definitions setup for it except for general setup that works with any kind of data.
now I'm in situation that i need to add certain code for each row under column code which is included with the existing table.
i looked for away to add code something like SX0001 on the first row and just add 1 each row so the second row would be look like SX0002
I've checked this link http://tabulator.info/docs/4.1/update#alter-replace i saw some functions that works on rows but not columns .
solution i'm trying to achieve:-
the link includes under updateData function that i need to have index with default value (Id)
giving that I'm not sure what type of date it might have or be included with the table i've added a new column using this code
table.addColumn({title:"id", field: "id" , formatter:"rownum",width:40, align:"center"} , true)
now I don't know how to get the Length of the Column to loop through each one of the column and run function like this
var no = 1000;
var str = "SX";
var x = str + no ;
table.updateData([{id:1, code:x}]);
var no = no +1;
is there's anyway to do this ?
You can retrieve the data stored in the table using the getData function.
var data = table.getData();
This will return an array containing the data objects for each row in the table.
Then to get your lenght just do data.length
If you want to count the table data the getDataCount exactly for this, which returns a count of rows in the table:
var count = table.getDataCount();
But actually your current approach will result in the table being redrawn a load of times as you update the row data.
Mutators
Instead you should look at using a Mutator, these allow you to alter data as it enters the table, so in this case you could do something like this:
//global variable to keep track of row id
var rowCount = 0;
//custom mutator
var idMutator = function(value, data, type, params, component){
//increment rowCount and assign as column value
return rowCount++;
}
//in your column definition set this mutator
{title:"ID", field:"id", mutatorData:idMutator}
By using this approach the value is set as the data is loaded into the table, nothing needs to be redrawn and the whole proceess is much more efficient
AgGrid expects node(s) to be passed in to lot of it's data functions. How do you get a node by index? Look at the snip below:
api.forEachNode(function(node){
api.refreshRows([node]);
})
I can pass the node parameter to refreshRows() function since I'm getting it through forEachNode().
How do you get a node by index without iterating through forEachNode() ?
This might be a bit late for this question, but anyway for people who are searching for this in the future :
Apart from the answers given, you can also get the row node by using the following ways,
// Getting the row node by the row index
cont rowNode1 = api.getDisplayedRowAtIndex(rowIndex);
In some cases, the above approach is not suitable because the rowIndex can get changed when you do some changes to your grid (sort, filter, etc.).
The other method is to use the id of the row which will not change even if you sort, filter... the grid.
getRowNode(id) : Returns the row node with the given ID. The row node id is the one you provided with the callback getRowNodeId(data), otherwise, the id is a number auto-generated by the grid when the row data is set.
// Getting rowNode by row id
const rowNode2 = api.getRowNode(rowId);
You can use getVirtualRow() method to get a single row. This function is a part of the Row Model. You can get the Row Model by getModel() function.
var model = api.getModel();
console.log(model.getVirtualRow(idx));
Building on #Charlie H's answer, it's entirely possible that since the version that he was using, the API has changed a bit. I'm using the (current as of December 2017) version 15.0. I found that rowsToDisplay[] contains an array of rows accessible. The following, for example, does exactly what you'd think it would:
onCellEditingStarted: function (event) {
var displayModel = gridOptions.api.getModel();
var rowNode = displayModel.rowsToDisplay[event.rowIndex];
rowNode.setRowHeight(100);
gridOptions.api.onRowHeightChanged();
},
If you want to iterate through the grid row by row in order you can use this (where $scope.grid is your grid name):
$scope.high_index = 0;
$scope.rows = [];
$scope.grid.api.forEachNode(function (node) {
$scope.rows[node.childIndex] = node.id;
if (node.childIndex > $scope.high_index)
$scope.high_index = node.childIndex;
});
for (i = 0; i <= $scope.high_index; i++) {
var node = $scope.grid.api.getRowNode($scope.rows[i]);
}
Or if you want a row node by child index you can now use (after setting up $scope.rows above):
var node = $scope.grid.api.getRowNode($scope.rows[i]);
Where i is the row number you want.
No jQuery answers as I don't use it in this site.
I have a table in the general form
<tbody><tr><td>2</td><td>Ah! My Goddess</td></tr></tbody>
I need to access the inner text of the 'a' element, and I'm not sure how to do this. I wanted to use querySelectorAll but apparently, because the table is generated by javascript through ajax, I cannot do this. This leads me unsure of how to get to the a element let alone sort its text content, such as 'Ah! My Goddess'. The caveat is there are many more table rows like this, with the same basic pattern.
Without using jQuery you could try and use the root of the functions that it is based on. Such as for replacing the selectors with:
document.querySelectorAll('td').textContent
I'm assuming you can refer to the table by id:
var t = document.getElementById(/*table id*/);
var d = t.tBodies[0].rows; // is an HTMLCollection, kinda like an array
d = [...t.tBodies[0].rows]; // converts it into an array of rows
once it's in an array, you can do array-like things to the rows, like sort() them
now, looking at the first row d[0] and assuming that the anchor is always in the second column, the anchor can be referred to as:
var a = d[0].cells[1].getElementsByTagName('a')[0];
and the text inside the opening/closing tags is:
a.innerHTML; // In this case: 'Ah! My Goddess'
putting some of this together, a sort (alphabetically) could be:
var byAnchorText = (a, b) => a.cells[1].getElementsByTagName('a')[0].innerHTML - b.cells[1].getElementsByTagName('a')[0].innerHTML;
var t = document.getElementById(/*table id*/);
Array.sort.apply(t.tBodies[0].rows, byAnchorText);
or something like this, you can fix it up as you see fit.
Consider I have a list called "test"
And it has 5 list items (say a, b, c, d, e)
Now that I apply filter manually on the list items for a particular field
Now the result is 3 list Items.
Now I want to read the fields of these 3 list items through JavaScript & do calculation on it.
I need to access the fields of the currently displayed (after filter is applied manually)
I do not want to filter it in Javascript. But I want to filter some field manually & then I want to read the displayed result. Can anyone help ?
The following jQuery will get all the values for a column for the rows that are displayed. It works on SharePoint 2010. I left the code very verbose and with debugging statements so it's easier to understand. Keep in mind that this code will not run in IE with the console closed unless you remove the console.log and debugger lines.
$(document).ready(function() {
var columnHeading = "Title";
var anchor = $("a").filter(function() {
return $(this).text() === columnHeading; //find the link that matches the text in the columnHeading variable
});
var th = anchor.closest("th"); //Get the parent table header
var columnIndex = th.index(); //Get the index of the table header in the row for use on other rows
var table = th.closest("table");
var i;
debugger;
table.find("tbody").first().find("tr").not(":first").each(function() { //Loop over every row in the table EXCEPT the first row because its the table header
i = $(this).find("td").eq(columnIndex); //find the td element at the index we determined earlier
console.log($(i).text()); //get the text in the td. You may need to parseInt before any mathematical formulas.
});
});
If you need clarification on anything, please let me know.