I have a function to add a new row to a table. I then want to change the selected row of the table to the new row added. So I remove the selected class from the currently selected row.
$('#regressionListTable tr.selected').removeClass('selected');
I add the row...
var rowAdded = analysisTable.row.add(data.analysis).draw(false);
And then I add the 'selected' class to this added row.
$(rowAdded).addClass('selected');
But for some reason the last step doesn't work and no row on my table is highlighted after I add a row.
Does anyone have any idea why this would happen?
Thanks.
the .row.add() function will return the datatable object, and so will the .draw() function. Thus, rowAdded is not the new row you added.
You could add .node() to the end of it to get the added row:
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
From the doc : http://datatables.net/reference/api/row.add(), you have to use the .node function to get the created node :
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
The draw method that you call in your code here:
var rowAdded = analysisTable.row.add(data.analysis).draw(false);
does not return the added row. Instead it returns the datatable object.
You need to get the node that was added by calling the node() method on the datatable.
Your code should look more like this to return the row:
var rowAdded = analysisTable.row.add(data.analysis).draw(false).node();
$(rowAdded).addClass('selected');
RE: row.add()
Related
I'm using datatables plugin to create a datatable. I've put a button to add new rows. The new inserted row can be anywhere depends on which column the table is sorted by. I need to set an event to the button inside the row once it is inserted. So I have to get the last inserted row to do so. But I can't find a way. I've tried below but it's not working. index() does not returning exact index where the row really is.
var row = table.row.add({...});
row.draw();
var tr = $('#datatable tbody tr').get(row.index());
Please help. Your answer is kindly appreciated and thank you in advance.
Take length of table and -1 and that number is the index of last
tr
var lastRowIndex = $('#datatable tr').length -1;
New rows will be appended onto the end of the row list, so you can do something like this
table.row(table.rows().count()-1)
See fiddle here.
Can't find a way to this using any plugin's provided function. But thank God there's a workaround.
Flag the inserted row in column rendering function. For example, I append a tag
datatable = $('#datatable').DataTable({columns : [{render : function(){... <last/> ...}}]});
On inserting new row, insert it with a data that indicate the flag inclusion. Get the row by the flag. And then remove the flag.
datatable.row.add({...}).draw();
var row = $('last').parents('tr');
$('last').remove();
For any other case which don't need to edit the <tr> explicitly, get the index of last inserted row. Get the datatable row and update the data. Set column render function to render the updated row accordingly.
var i = datatable.rows().count() - 1;
var data = datatable.row(i).data();
datatable.row(i).data(changeSomething(data)).draw();
And to remove the row
datatable.row(i).remove().draw();
I think this is a repeated question, but I see all the answers and nothing clear?
I used data tables in my MVC app and everything works perfectly, till I add a new row to this datatable using
table.api().row.add
after that, I assigned row id using two methods then draw
1-
row.nodes().to$().attr('id', ID)
2-
row.node().id = ID
When I try to get the newly added row id using row.id its undefined and row.data not contain dt_rowid at all.
In HTML I can see the id correctly added
How to get the id for the newly added row
Please help me
var table = $('#myTable').DataTable();
table.rows().every(function () {
var data = this.data();
var id = this.id();
console.log('Data id: ' + id);
});
Try this. Please refer this link
https://datatables.net/reference/api/rows().every()
I m using slickgrid V2.2, I am trying to append new row from the selected row along with data in the selected row. Its working fine, but in the added row the same id generating as the selected row by default. I am using below code. Kindly help me out to append a new row with different id from selectedrow
var row = grid.getDataItem(selectedRow);
dataView.addItem(row);
grid.render();
grid.setSelectedRows([]);
row is simply an object containing the columns, so row.id = {new id}; should work. You'll need to generate the id somehow depending on how your scheme works (don't use the curly brackets around the new id value, I'm just indicating that this value needs to be inserted).
I have two HTML tables; a source address table and a destination address table where I want to shift rows from the source table to the destination table, and vice-versa.
It is mostly working, but I am getting stuck when inserting a row into the destination table from the source table. I do not want to append a row, as the last row in the destination table supports a text field where the user can type in an address manually. Below is the handler function for when a user clicks on a row in the source address table to remove and shift that row into the destination table:
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//The below line of code has been removed because I don't want to add my row to the end of the table.
//$("#destination_christmas_lights_addresses tbody").append(tr);
//Below here is new code added to insert a row
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
//Insert a row into the destination table before the end of route address.
var newRow = tableRef.insertRow(tableRef.rows.length -1);
//Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);
newCell.innerHTML = "I want inner HTML from variable tr here";
});
PROBLEM 1
When I use the append function (commented out) it all works fine, except the row is at the bottom of the table which I do not want.
When I use the insertRow function, I can not work out how to move the appropriate elements of the tr variable to create a new row. I need the innerHTML because it includes code to enable the shifting of the row back into the source table.
Somebody please help?
PROBLEM 2 I am sure that the following line of code can written differently.
var tableRef = document.getElementById('destination_christmas_lights_addresses').getElementsByTagName('tbody')[0];
I thought I could use:
var tableRef = $("#destination_christmas_lights_addresses tbody");
but I can't get this to work.
Any help is appreciated.
Thanks for peoples responses. Final solution which solves both my problems is as follows.
$("#source_christmas_lights_addresses .move-row").live("click", function() {
var tr = $(this).closest("#source_christmas_lights_addresses tbody tr").remove().clone();
//reference id of element representing the row I want to add the address before.
$("#trip_planner_end_address_row").before(tr);
});
Try this
var $WhereToAppend=('#destination_christmas_lights_addresses').find('tr:first');
($tr).insertBefore($WhereToAppend);
Maybe the problem is "remove method and the clone", you should save the cloned tr in a variable for then remove the original tr.
Like this:
var tr_original = $(this).closest("#source_christmas_lights_addresses tbody tr");
var tr_cloned = tr_original.clone();
tr_original.remove();
I would like see your original sample code, so it would be easy to understand the real trouble ;)
Good luck !
I have a little problem.
I need to copy the attributes of a row, and put them into into a new row I create.
The exact attribute I want to copy is the onClick attribute
I have tried doing this way :
newRow.setAttribute("onClick",oldRow.getAttribute("onClick"));
or
newRow.onClick = getAttribute("onClick");
When I put an alert to see the attributes of each row, the alert for the new row returns nothing, and the alert for the old row returns something like this :
function onClick()
{
addTable(this,7,Project_1,.... //Over 100 lines of data
}
How can I copy the attributes?
Thank you in advance
A demo: http://jsfiddle.net/6gzzp/
The relevant code:
document.getElementById("two").onclick = document.getElementById("one").onclick;