I built a data table in shiny with two columns which contain check-boxes.
I found this code,(dont remember exactly from where),
output$Sum_table = renderDataTable({
SPY <- uploaded.data()
#Display table with checkbox buttons
df.var.names <- names(SPY)
addCheckboxButtons <- paste0('<input type="checkbox" name="row', df.var.names, '" value="', df.var.names, '">',"")
addCheckboxButtons1 <- paste0('<input type="checkbox" name="row', df.var.names, '" value="', df.var.names, '">',"")
Table<-DT::datatable(cbind(df.var.names,Exclude_variables=addCheckboxButtons,
Choose_Target_variable=addCheckboxButtons1),
options = list(orderClasses = TRUE,
lengthMenu = c(5, 25, 50),
pageLength = length(df.var.names),
callback = JS("function(table) {
table.on('change.dt', 'tr td input:checkbox', function() {
setTimeout(function () {
Shiny.onInputChange('rows',
$(this).add('tr td input:checkbox:checked').parent().siblings(':last-child').map(function() {
return $(this).text();
}).get())
}, 10);
});
}")),escape = FALSE)
Table
})
i used this code to bulid a data table which has three columns, it's first is the variables names, the second is checkboxes column to select the variables that i want to exclude from my model (multiple), the third is checkboxes column to select the target variable(single selection).
what i still dont know is how to access these selected checkboxes.
for example:
varibles to exclude<- selected checkboxes in the second column
target variable<- selected checkbox in the third column
Does anyone knows how to do that?
Related
I'm currently using the DataTables plugin for my project.
I have an AJAX sourced datatable where you can only ever have one row selected, now because my datatable is done server-side I need to keep track of which one is selected when changing pages.
Therefore I have been using this solution but this only seems to work for multiple row selection
Now essentially what I want to happen is, when you select a new row it should add the new row id to the array but also remove the previously added row id from the array, so there should only ever be one result in the array at a time.
Visually for better understanding:
var selected = []
Click Row 1 after loading table = [row_1]
Click Row 2 removing row_1 and adding row_2 = [row_2]
var selected = [];
$("#example").DataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-arrays.php",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
Instead of adding an element to the array, you could replace the whole array. It seems a bit wasteful to use an array to store a single element, but there you go.
selected.push( id );
becomes
selected = [id];
The table involves a dropdown box and a normal <td> with a value. When onChange of the dropdown, the specific <td> must change to another dropdown. I've used jQuery to implement the function, but while I change the dropdown for the first row, the change is happening for the entire table. I just need the change to happen for the single row where the onChange function has been called.
$('td:nth-child(11),th:nth-child(11)').hide();
$('td:nth-child(10),th:nth-child(10)').show();
is used to hide and show the 10th and 11th columns.
doc.ready function() :
$(document).ready(function() {
$('td:nth-child(11),th:nth-child(11)').show();
$('td:nth-child(10),th:nth-child(10)').hide();
// ...
onChange function used :
$(document).on('change','.mySelect', function(event) {
event.preventDefault();
$('td:nth-child(11),th:nth-child(11)').hide();
$('td:nth-child(10),th:nth-child(10)').show();
//$(this).closest("td").show();
var _this = $(this);
var id =_this.val();
var statusValue = id;
$.get('AssignedTo', { statusVal : statusValue }, function(response) {
var select = _this.closest("tr").find("select[name='assigned']");
/* var select = $('#assigned'); */
select.find('option').remove();
$.each(response, function(index, value) {
$('<option>').val(value).text(value).appendTo(select);
});
});
});
Rather than using nth-child, consider using eq() - it's cleaner and doesn't come with some of the specificity issues of nth-child.
To get all <td> elements in the "changed" row, you can get the parent<td> by doing .closest("td") and select all of its siblings using .siblings("td")
To include the original one (and not only siblings), you'd use .addBack().
Finally, now that we have all the cells in the row, select the one you want using eq().
Put all together, it looks like this:
//Select the 11th cell in the row
var $cell = $(this).closest('td').siblings('td').addBack().eq(10);
Or, you could get the parent and choose all its children (instead of siblings) using .closest("tr") and children():
//Select the 11th cell in the row
var $cell = $(this).closest("tr").children("td").eq(10);
I want to select all my checkbox
I have an input in header of datatables like this
<th style="width: 25%" ><input type="checkbox" name="checkall" class="select-checkall" id="checkall" value=""></th>
i use it like this to checked it but only work in the page that iam
$("#checkall").click(function(){
$(':checkbox').prop('checked', true);
});
check this fiddle http://jsfiddle.net/juxHn/46/
jQuery will not be able to find checkboxes in other pages than the current one because DataTables somehow hides them (maybe removes them from DOM?)
Please refer to DataTables API to access your table cells irrespective of which ones are currently shown or not / of which page you are on.
In your case, you could do:
// Use "DataTable" with upper "D"
oTableStaticFlow = $('#flow-table').DataTable({
"aoColumnDefs": [{
'bSortable': false,
'aTargets': [0]
}],
});
$("#flowcheckall").click(function () {
var cells = oTableStaticFlow.column(0).nodes(), // Cells from 1st column
state = this.checked;
for (var i = 0; i < cells.length; i += 1) {
cells[i].querySelector("input[type='checkbox']").checked = state;
}
});
Demo: http://jsfiddle.net/juxHn/47/
I have a page with a jqGrid in it. Is has to be multiselect:false because I have to allow only one row to be selected, but I also need to select multiple rows (i.e. I want to have many rows marked but only one active).
So I've created a grid whith multiselect:false and a checkbox row with formatter: 'checkbox'
I've also created a master checkbox in the collumn header (the 'name' of the collumn in the colNames is <input id="cbSelectAll" type="checkbox">)
To change all the rows at once when the header is clicked I've created the function:
$('#cbSelectAll').click(function (e) {
var valor = $(this).is(':checked');
$.each($('#grid input[type="checkbox"]'), function (idx, elm) {
var id = $(elm).closest('tr').attr('id');
var cb = $('#' + id + ' td').children().first();
$(cb).attr('checked', valor);
selectedRows[id] = valor;
});
/* other non relevant code */
});
Now that's my problem.
This function works nicelly when I try to unselect the checkbox's but when i try to select then it only works in the first time. On the subsequent clicks the checked attribute is changed but the box is not visually changed.
Instead of attr, try using prop
Please have a look at this similar issue
I want to retrieve a particular column name and perform an event on that . how to do that . ? using dojox.grid.datagrid. Like currently i have 3 columns or fields in my grid(ID, names,Email). I want that for a particular column Email. When i click any value under that column the dialog box should not open. But when i click on any where else(on other 2 columns on a particular row) it opens up.
You can connect grid's onCellClick event and get row/col info from the argument. For example:
dojo.connect(grid, "onCellClick", function (e) {
var colField = e.cell.field; // field name
var rowIndex = e.rowIndex; // row index
....
});
And add your logic in the event handler based on those informations.
if you want the dialog to open upon clicking a value in that column (and not the entire cell, which includes whitespace in the cell), then you can use the format function for that field and return a HTML that is an anchor element or any other HTML that is clickable.
for example:
in the grid structure:
columns: [{
label: "Email",
attr: "emailid",
formatter: formatEmail
},
...
function formatEmail(data, item, store) {
return "<a href='mailto:" + data + "'>" + item.nameOfPerson + "</a>";
}