I have several datatables in shiny and I want to get the id from any clicked table using callback property. I've tried several ways but it doesn't work.
I've used this code:
DT::renderDataTable({
DT::datatable(
v$data, editable = list(target = "cell", disable = list(columns = disabled_cols)), options = list(bPaginate=F,bFilter=F),selection = "none",
callback = JS("table.on('click.dt', 'td', function() {
var row_=table.cell(this).index().row;
var col=table.cell(this).index().column;
var id= table.id;
var data = [row_, col, id];
Shiny.onInputChange('rows',data );
});")
)
})
and several other options instead "table.id" in order to obtain the ID of the table on click. It works to obtain row and col number, but I don't figure out how to obtain ID.
Use:
var id = $(table.table().node()).closest('.datatables').attr('id');
Related
I have multiple table (tbUser, tbRole, tbJob) and i want to make my code simple.
this is what i done before:
var userTable = $('#tbUser').DataTable();
var roleTable = $('#tbRole').DataTable();
var jobTable = $('#tbJob').DataTable();
Each tables has different options, columns and have one thing in common has column [action] to put View/Edit/Remove button. Is there a simple way to do jquery event click action button in each table.
This is my code:
$('#tbUser tbody').on('click', '#btn_edit', function (e) {
let index = $(this).parents('tr');
let data = userTable.row(index).data();
/** Something */
});
/** REPEAT EACH TABLE */
and I've tried :
$('table tbody').on('click', '#btn_edit', function (e) {
let index = $(this).parents('tr');
let data = userTable.row(index).data(); //===> But how to change table dynamicly on this line
/** Something */
});
Firstly your edit button needs to be targetted using a class not an ID, otherwise it will only ever find the first button.
Create an object that holds a reference to each of your tables. I'm using the table id as the key, and the instantiated datatable as the value.
const tables = {
tbUser: userTable,
tbRole: roleTable,
tbJob: jobTable
}
Then with your button click, identify which table it is part of and use that to grab the table instantiation from the object you created earlier
$('table tbody').on('click', '.btn_edit', function (e) {
const tableId = this.closest('table').id;
const datatable = tables[tableId];
const index = $(this).parents('tr');
const data = datatable.row(index).data();
/** Something */
});
I found posts with similar titles but I still cannot resolve my issue. Definitely I am doing something wrong.
In Kendo grid configuration have some function which take context (grid) and read selected row:
change: function (e) {
refresh(this);
}
This is how I configured "change" event.
In function "refresh(grid)" I am getting selected row on following way:
refresh: function (grid) {
var selectedRows = grid.select();
var selectedRow = grid.dataItem(selectedRows[0]);
var id = selectedRow.Id;
}
This approach works perfect when I select grid row manually. But when I select row programatically "selectedRow" variable is null.
I am selecting programatically on following way:
var grid = $("#grid").data("kendoGrid");
var rows = grid.dataSource.data();
var row = rows[rows.length - 1];
grid.select(row);
As I sad in above, in previous "refresh(grid)" method variable selectedRow will be null.
Does anybody have some opinion about that? Why is it happened?
Thanks
According to the Grid documentation the "select" method accepts "string" parameter (selector) or jQuery element. That why if you need to correctly select the row you should modify your current code as follows:
var grid = $("#grid").data("kendoGrid");
//if you are using the "pageable" option of the grid
//you should get the visible rows using the .view() method
var models = grid.dataSource.data();
var model = models[models.length - 1];
var lastRowUid = model.uid;
//find the target row element:
var row = grid.table.find("[data-uid=" + lastRowUid + "]");
grid.select(row);
I have a table, and each row is added through JavaScript. I create these rows so that when they're clicked another cell will be created beneath them where I can display additional information. Now I want to be able to destroy the row I just created when the user clicks a button etc. So essentially, I need to be able to have the row I created have an onclick attribute, but it doesn't seem to work... I've tried everything I can think of so any help would be awesome!
var table = document.getElementById("main_table");
var row = table.insertRow(1);
row.id = count;
row.onclick = function ()
{
var id = this.id;
var target = document.getElementById(id);
var newElement = document.createElement('tr');
newElement.style.height = "500px";
newElement.id = id + "" + id;
//newElement.innerHTML = text;
target.parentNode.insertBefore(newElement, target.nextSibling );
//var newRow = document.createElement("tr");
//var list = document.getElementById(id);
//list.insertAfter(newRow,list);
var newRow = table.insertRow(newID);
}
I have tried to mimic your problem with below fiddle.
http://jsfiddle.net/kr7ttdhq/12/
newElement.onclick = createClickableCells;
del.onclick = delCell;
The above code shows the snippet from the fiddle
During the onclick event of the cell. New cells are created which in turn have the same onclick events as the first cell.
Moreover, a 'close' text cell is inserted by which you can delete the entire row.
Hope this helps
I need to get the row id or index of user selected rows from jquery datatables without using the TableTool. Once I get the indexes or the Ids, I will use them to select these rows after the user comes back to the same page. How do I get the row Id or index of the select rows? Many thanks !
JSP code:
// when a row is selected, I want to get the row id or index
$('#userTable tbody tr').on('click', function()
{
var oTable = $('#userTable').dataTable();
var data = oTable.fnGetData(this);
selectedRowId = data[4];
alert(selectedRowId); // this printed "undefined"
var rowIndex = oTable.row(this).index();
alert(rowIndex); // this alert didn't even get invoked.
});
var rowIndex = oTable.row(this).index();
The above will work but you have to use:
var oTable = $('#userTable').DataTable();
which will return the API and should allow you to use row(this).index()
Instead Of:
var oTable = $('#userTable').dataTable();
However without seeing a working copy of the code (JSFiddle maybe) I am unsure why the fnGetData() is not working.
I have a jquery datatable which allows me to modify cells onclick using this function
$(document).ready(function () {
$('td').click(function () {
var aPos = oTable.fnGetPosition(this);
var aData = oTable.fnGetData(aPos[0]);
var retrievedEntry = aData[aPos[1]];
this.innerHTML = '10';
});
oTable = $('#myHTMLTable').dataTable();
});
however what i would like to be able to do is to modify the contents of a column based on the entries in the cells of other columns. So if i have "name" and "age" column, if the name == "John" then update age cell data to 10 and if name == "Mike" then update age to say 11;
You might want to try keyup or keydown events assuming the update process will involve data entry.