I am using datatables and have this tr element in table
<tr class="gradeA even row_selected" id="3692">
<td class=" sorting_1">3692</td>
<td class="">koza</td>
<td class="" title="10:12:30">2013-12-31</td>
<td class="">2014-02-06</td>
<td class="">FULL packet</td>
<td class="">NONE</td>
<td class="">Name</td>
</tr>
I would like to update 1st and 4th td element using fnUpdate function. I have tried to update for only one td but it does not update.
In Chrome, console log I am getting this error:
Uncaught TypeError: Cannot set property '_aData' of undefined
Here is what I have tried:
// dynamically update row
$('#example').dataTable().fnUpdate( ['Zebra'], parseInt('3692'));
3692 is the id of the td element to know which row I need to update, and the zebra is the value to change. I know that I have not included which cell to update but I don't know how to do that. On datatables api, following example is given:
oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], 1 ); // Row
Please review the docs here http://datatables.net/api
Your question is not complete, as you need to specify what column(td) you want to modify, but here's what I would try (assuming you want to update the second column).
$('#example').dataTable().fnUpdate('Zebra' , $('tr#3692')[0], 1 );
The second parameter will be the row, and the third is the column.
Note that I passed in a string.
I prefer this:
var myDataTable= $('#myDataTableId').DataTable();
var row = myDataTable.row( '#idRow');
myDataTable.cell(row, 2).data("New Text").draw();
Note:
2 is column, cell inside modified row.
This works for me
var tableRow = $(this).closest('tr').index(); // GET TABLE ROW NUMBER
$('#table').dataTable().fnUpdate('Zebra', [tableRow], 1, false)
You don't need to specify the column. Your issue is that you are using row ID when the doc states that 2nd argument can be the aoData index or the element.
Make sure your number of columns is correct, but you should be able to do it like so:
$('#example').dataTable().fnUpdate( ['Zebra'], $('#example tr#3692')[0]);
In my case I wanted to update an entire row with data coming from backend as an object. Referring to:
$('#example').dataTable().fnUpdate('Zebra' , $('tr#3692')[0], 1);
I modified it a bit and used this lines of code to update an entire row without having to draw entire data table:
// get an selected row/row under edit action
let ele = $("#DTTableID")..dataTable().find('tr.row_selected');
$("#DTTableID").dataTable().fnUpdate(obj, ele);
Here obj is data object and ele is selected row.
Try:
$('#datatable').dataTable().fnUpdate(result, $('[data-id=' + idvalue + ']'), 8 );
This is best way to update column value without error and add table row with data-id="row id value" ....it works fine.
Related
I have two tables. The client should be able to drag and drop each table's row. They can either drop the row into a new position on the current table, or add the row to a specific position on the other table.
I'm able to insert the new row into the desired position on either table (and delete the original), but when I try to drag-and-drop that element a second time, it's parent element comes back as null, preventing me from repeating the drag-and-drop function a second time.
I need to solve this with pure, vanilla javascript.
//Table Structure (there are two of these, I'm trying to save space here)
<table id="thisTable" class="dropzone">
<thead>
...
</thead>
<tbody id="thisBody">
<tr id="123" class="drag-row draggable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr id="124" class="drag-row draggable="true">
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
//Collect Variables from the original row, the target table and the row being dropped into.
//Code to Insert New Row
function addRow(table_id, copy_id, target_id) {
let targetRow =document.getElementById(target_id);
let targetIndex = targetRow.rowIndex;
let copyRow = document.getElementById(copyId); // find row to copy
let targetTable = document.getElementById(tableID); // find table to append to
let clone = copyRow.cloneNode(true); // copy children too
//clone.id = "newID"; // change id or other attributes/contents
//table.appendChild(clone); // add new row to end of table
//targetTable.children[1].insertAdjacentElement("afterbegin", clone);
// Insert a row at desired index
let newRow = targetTable.insertRow(targetIndex);
newRow.id = clone.id;
newRow.draggable = "true";
newRow.classList.add("drag-row");
newRow.innerHTML = clone.innerHTML;
}
//Code to delete original row
dragSrcEl.remove();
I don't think I'll need to add in all the drag-and-drop code, because those seem to be working fine (when the parent element of the inserted node isn't null).
I've gone through a couple questions similar to this one and it seems that some commands in vanilla create new elements without tying them to the DOM? Supposedly by using the append() command you could add a new row to a table without disconnecting it from the DOM, but I tried that and got no result.
Which of the commands I'm using above would disconnect the newly inserted row from the DOM?
Is there a safe way, in vanilla js, to copy the contents of a row and inserted into a specific index of another (or the same table)?
It's frustrating because I finally got the code working... once.
Any thoughts?
Ah, I forgot to add the necessary event listeners to the newly inserted row, that would explain why drag-and-drop stopped working for them :)
I am trying to access an individual row from a grid in Kendo UI so that I can run operations on the selected entries in the row. However, my code is not correctly grabbing the row itself and I do not know how to resolve this.
I've tried binding the grid to an event that, when changed, will fire my method in order to grab whichever row was toggled.
const row = arg.sender.element.closest("tr")
const grid = $("#ECUs").getKendoGrid()
const dataItem = grid.dataItem(row)
Results:
I.fn.init [prevObject: I.fn.init(1)]
length: 0
prevObject: I.fn.init [div#ECUs.k-grid.k-widget.k-display-block]
__proto__: w
(Sorry, I apparently don't have enough reputation to post images)
Ideally, I would expect to get a tr object back in the first method, but I'm getting absolutely nothing instead. Does anybody know how to correct this to access the row?
If you have a click event on one of the columns, you can access the table row using some jquery.
function onClickListener(e) {
e.preventDefault();
var row = this.dataItem($(e.currentTarget).closest("tr"));
}
Option 1:
You can use the edit event of a grid to get the currently selected row model.
edit: function(e) { console.log(e.model); }
Here, e.model contains the row data and you can access the particular column value by e.model.columnName.
Option 2: You can get the row model data like below from the other functions.
https://stackoverflow.com/a/56478061/8733214
I want to get data of a table row by row to create a string with the data separated by comma.
The table looks like this:
I want to have a string with data from table separated by comma (CSV style) as follows:
myText = Consistently exceeds requirements- Benchmark, 1, Exceeds some requirements, 1, Meets requirements, 2,
The table HTML looks like this:
I tried the following code but I have not been able to get the value/text of only one row, then ask for next cell in the same row, then jump to next one.
console.log($('.sm-data-table-summary').eq(2).text());
But it retrieves all table data for second element found in the whole page.
csv_string += ($('.sm-data-table-summary > tbody').prop("innerText") + ',');
But it gets all data for the table, meaning option text + percentage + numeric value and goes thru all options, not giving me the option to separate with commas
$(element).find('.sm-data-table-summary').each(function() {
console.log($(this).find("tr:nth-child(2)").text());
});
This last one is closest I am to what I want, I got the 2nd text, percentage and numeric value for each table found in the page. Again all at once not giving me chance to separate by comma.
Do you know a way to get only the option text, then the percentage, then the numeric value of the same row? And then move to next row?
Or maybe is the wrong approach.
See if this works:
var els = $(".sm-data-table-summary").find(".label,.sm-data-total").get();
var myText = els.map(function(e) { return $(e).text(); }).join(",");
// debugging
console.log("texts:", myText);
document.body.innerHTML += myText;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="sm-data-table-summary" border=1>
<tr>
<td><div class="label">a-label</div></td>
<td>a-percent</td>
<td><div class="sm-data-total">a-1</div></td>
</tr>
<tr>
<td><div class="label">b-label</div></td>
<td>b-percent</td>
<td><div class="sm-data-total">b-1</div></td>
</tr>
</table>
<hr>
As you can see, this only gets the label and sm-data-total of each row. If you want the percentage, all you have to do is change the argument to the .find().
I am using jqgrid. When I want to delete row I am writing in console $('#grid').jqGrid('delGridRow', 1);. But this does not work it returns false as result. Did I missed something ?
It means that the grid have no row with the rowid 1: no <tr id="1">...</tr> element. Either you don't filled the data of the row correctly (the data have to contains the values of id attribute) or you just mix the terminology of rowIndex with the rowid.
I have a table showing project names as shown in below image ,
On delete button click, I am passing the selected check-boxes data as array of objects to my controller
[{id:1,name:'Name 8'},{id:2,name:'Name 7'}]
Then deleting the names from the table at the server side. This all works fine but how do i remove the rows from DOM after deleting them?? I went through this post which says how to remove ng-repeat elemets from DOM but in that case the elements are removed one at a time, by passing the $index to the splice() function
In my case i need to remove multiple rows. If ill have to use the splice function in my controller how do i get the index from the selected rows object? Or is there any better way of doing it.
Hope my question is clear!
Update: jsFiddle
Solution: Well i had to modify #wickY26 answer a bit to suite my scenario. Here is my update jsFiddle
What i did was , in the delete() change code to
angular.forEach($scope.projects, function (row, index) {
if($scope.projects[index].checked) {
$scope.projects.splice(index,1);
}
});
You can keep selected rows on an object via binding checkbox with ng-model,
so example table html should be like this
HTML
<table class="table table-bordered">
<tbody>
<tr ng-repeat="row in data" ng-class="{'success' : tableSelection[$index]}">
<td>
<input type="checkbox" ng-model="tableSelection[$index]" />
</td>
<td ng-repeat="cell in row">
{{cell}}
</td>
</tr>
</tbody>
</table>
and if you define a function in your controller which travel through your data and splice array depends on tableSelection object boolean values...
UPDATE
after your comment I debug my code and see I cannot remove multiple rows same time, so I look at my code and change some part of it...
at my example you cannot delete multiple rows same time because everytime you splice an element from data array you shift indexes of array for rest, so right way to do it starting from last index,
Here new CONTROLLER
$scope.removeSelectedRows = function() {
//start from last index because starting from first index cause shifting
//in the array because of array.splice()
for (var i = $scope.data.length - 1; i >= 0; i--) {
if ($scope.tableSelection[i]) {
//delete row from data
$scope.data.splice(i, 1);
//delete rowSelection property
delete $scope.tableSelection[i];
}
}
};
I update my PLUNKER added comments and some other functionallty as well...