Getting a selected row when clicking/un clicking on a checkbox row
Getting a selected row when clicking/un clicking on a checkbox row
vsek
Posts: 30Questions: 17Answers: 0
Hey guys
I want to be able to check/uncheck a row and retrieve only that row(s) so I can store it in 'rows_selected' variable. This way I can only save the modified 'rows_selected' variable seen below instead of everything which can take forever.
Is there a way to retrieve that selected row only inside this code?
$('#standard_datatable').on('change', 'input[type="checkbox"]', function( ) {
alert(this.value)
} );
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<?xml version="1.0" encoding="UTF-8" ?>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="page" uri="http://www.opensymphony.com/sitemesh/page"%>
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<title>Restricted Entity Groups</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/v/bs4-4.1.1/dt-1.10.18/datatables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.flash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.print.min.js"></script>
<link type="text/css" rel="stylesheet" href="../../css/default.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<style>
.toolmenu-widget
{font-family: Verdana, Arial, sans-serif; font-size: .8em; background-color: #F5F6F8; text-align: left; margin: 0; padding: 0; margin-bottom: 0px; border-bottom: 2px solid gray; position: absolute; top: 60px; left: 0px; width: 100%; min-width: 800px; height: 60px;}
</style>
<script>
$(document).ready(function() {
var dataTableId = '#standard_datatable';
// Data Table
var result;
var table = $(dataTableId).DataTable({
select: true,
dom: 'Bfrtip',
ajaxSource : "/cma/contents/screening/restrictedEntityGroupDetails_data?groupName=<%= (String)request.getAttribute("groupName")%>",
'columnDefs': [
{
'targets': 0,
'checkboxes': { 'selectRow': true},
'createdCell': function (td, cellData, rowData, row, col){
if(rowData[0] === '1')
{this.api().cell(td).checkboxes.select(); }
}
},
],
buttons: [
'copy', 'excel', 'pdf',
{
//Add new config button~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
text: 'Save selected Items' ,
action: function ( e, dt, node, config ) {
var rows_selected = table.rows({selected: true}).data();
//var rows_selected = table.column(0).checkboxes.selected();
$.each(rows_selected, function (index, rowId) {
result = $.ajax({
type: 'POST',
async: false,
url:"/cma/contents/screening/restrictedEntityGroupDetails_data_edit" ,
data: {'groupName' : "<%= (String)request.getAttribute("groupName")%>", 'row' : rowId[1] , 'checked' : rowId [0]},
context: this,
});
});
$('#standard_datatable').DataTable().ajax.reload();
}
}
],
"order": [[ 12, "desc" ]]
});
//hide the guid columns
table.column( 1).visible( false );
table.column( 11).visible( false );
table.column( 12).visible( false );
$('#standard_datatable').on('change', 'input[type="checkbox"]', function( ) {
alert(this.value)
} );
});
</script>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This discussion has been closed.
Answers
You are using the Gyrocode checkbox plugin which uses the Select extension. Take a look at the select API example to see how to get selected (checked) rows. Take a look at the events example to see how to get the selected rows when selected (checked) or unselecked (unchecked).
Also you can look at the examples and API docs for the Gyrocode checkboxes.
Kevin
Yeah, looked at that example and experimented with it. For some reason when you highlight the example the individual details highlight(I am guessing because the 'select :true' option). But mine doesnt do this. Even though I am using the 'select :true ' option.
Is there something else in my code that would prevent the "select" option from working?
Nothing obvious stands out as an issue. Please provide a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
Well its an inward facing app. When user clicks save the values for 'checked'(below) is never changed no matter what is selected. Am I doing something wrong
with how I am implementing the checkbox? It all renders just fine. Thats why I was hoping to trigger an event when clicked but cant seem to
get that working. Maybe how I am implementing the original checkbox has an issue?
$.each(rows_selected, function (index, rowId) {
result = $.ajax({
type: 'POST',
async: false,
url:"/cma/contents/screening/restrictedEntityGroupDetails_data_edit" ,
data: {'groupName' : "<%= (String)request.getAttribute("groupName")%>", 'row' : rowId[1] , 'checked' : rowId [0]},
context: this,
});
It's hard to debug without seeing an issue. To progress this, as Kevin suggested above, please can you provide a test case.
Colin