Getting the checked check box row values
Getting the checked check box row values
ganapathy_paulraj
Posts: 16Questions: 0Answers: 0
Allan,
Its a lot big difficult for me to get the checked check box values from the data tables
here is my code , i followed all the discussions solutions into my implementation,,, that's why very much eager to initialize this discussion.
and in all the examples i see is only explained with the short short crisp codes .
the examples ,
http://www.datatables.net/examples/api/form.html
http://www.datatables.net/examples/plug-ins/dom_sort.html
is exactly what am looking for ,but could not resolve mine,
[code]
public static native void reLoadDataTable(String id ,String urlString) /*-{
var oTable;
var checkedItems = new Array();
// hydrate the array from what's already checked
// this is needed as we might uncheck items that are checked to begin with
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
}
});
// function that can remove items from the array
checkedItemsRemove = function(item) {
var i = 0;
while (i < checkedItems.length) {
if (checkedItems[i] == item) {
checkedItems.splice(i, 1);
} else {
i++;
}
}
}
// function to check if an item is in the array
checkedItemsContains = function(item) {
for (var i = 0; i < checkedItems.length; i++) {
if (checkedItems[i] == item)
return true;
}
return false;
}
// function to set the checked attribute of those which should be on the current table display
persistChecked = function() {
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if (checkedItemsContains($wnd.jQuery(this).attr('id'))) {
$wnd.jQuery(this).attr('checked', 'checked');
} else {
$wnd.jQuery(this).removeAttr('checked');
}
});
}
// handler to keep the array in sync whenever a checkbox is clicked
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").click(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
} else {
checkedItemsRemove($wnd.jQuery(this).attr('id'));
}
});
oTable = $wnd.jQuery("#" + id).dataTable({
"bServerSide": true,
"sAjaxSource": urlString,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"sScrollY": "200px",
"bRetrieve":true,
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return ' ';
},
"aTargets": [ 0 ]
}
],
"aoColumns": [
{ "mDataProp": "Select" },
{ "mDataProp": "userName" },
{ "mDataProp": "loginTime" }
],
"fnDrawCallback": function() {
persistChecked();
}
});
$wnd.jQuery("#submitAdminForm").click( function() {
var sData = $wnd.jQuery('input', oTable.fnGetNodes()).serialize();
persistChecked();
alert( "The following data would have been submitted to the server: \n\n"+sData +checkedItems);
return false;
} );
}-*/;
[/code]
Its a lot big difficult for me to get the checked check box values from the data tables
here is my code , i followed all the discussions solutions into my implementation,,, that's why very much eager to initialize this discussion.
and in all the examples i see is only explained with the short short crisp codes .
the examples ,
http://www.datatables.net/examples/api/form.html
http://www.datatables.net/examples/plug-ins/dom_sort.html
is exactly what am looking for ,but could not resolve mine,
[code]
public static native void reLoadDataTable(String id ,String urlString) /*-{
var oTable;
var checkedItems = new Array();
// hydrate the array from what's already checked
// this is needed as we might uncheck items that are checked to begin with
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
}
});
// function that can remove items from the array
checkedItemsRemove = function(item) {
var i = 0;
while (i < checkedItems.length) {
if (checkedItems[i] == item) {
checkedItems.splice(i, 1);
} else {
i++;
}
}
}
// function to check if an item is in the array
checkedItemsContains = function(item) {
for (var i = 0; i < checkedItems.length; i++) {
if (checkedItems[i] == item)
return true;
}
return false;
}
// function to set the checked attribute of those which should be on the current table display
persistChecked = function() {
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").each(function() {
if (checkedItemsContains($wnd.jQuery(this).attr('id'))) {
$wnd.jQuery(this).attr('checked', 'checked');
} else {
$wnd.jQuery(this).removeAttr('checked');
}
});
}
// handler to keep the array in sync whenever a checkbox is clicked
$wnd.jQuery('input[type="checkbox"]', "#userLogHistory").click(function() {
if ($wnd.jQuery(this).is(':checked')) {
checkedItems.push($wnd.jQuery(this).attr('id'));
} else {
checkedItemsRemove($wnd.jQuery(this).attr('id'));
}
});
oTable = $wnd.jQuery("#" + id).dataTable({
"bServerSide": true,
"sAjaxSource": urlString,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"sScrollY": "200px",
"bRetrieve":true,
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return ' ';
},
"aTargets": [ 0 ]
}
],
"aoColumns": [
{ "mDataProp": "Select" },
{ "mDataProp": "userName" },
{ "mDataProp": "loginTime" }
],
"fnDrawCallback": function() {
persistChecked();
}
});
$wnd.jQuery("#submitAdminForm").click( function() {
var sData = $wnd.jQuery('input', oTable.fnGetNodes()).serialize();
persistChecked();
alert( "The following data would have been submitted to the server: \n\n"+sData +checkedItems);
return false;
} );
}-*/;
[/code]
This discussion has been closed.
Replies
Thanks in advance,
Ganapathy.
[code]
<!-- checked box -->
<!--unchecked box-->
[/code]
In my application, I also have an event listener for checkboxes, so I have to fire .change() on them to trigger the event.
am using the checkbox to get the id of each row,
i get the id of the checked rows through the oObj.aData
thorugh these ways ,
[code]
oTable = $wnd.jQuery("#" + id).dataTable({
"bServerSide": true,
"sAjaxSource": urlString,
"bProcessing": true,
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bStateSave": true,
"sScrollY": "200px",
"bRetrieve":true,
"aoColumns" : [
{ "mDataProp": null},
{ "mDataProp": "userName"},
{ "mDataProp": "loginTime"}
],
"aoColumnDefs": [
{
"bUseRendered": false,
"fnRender" : function ( oObj ) {
console.log(oObj.aData[0]);
console.log(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
console.log(oObj.aData[oObj.oSettings.aoColumns[oObj.iDataColumn].mDataProp]);
return ' ';
},
"aTargets": [ 0 ]
},
],
"fnDrawCallback": function() {
persistChecked();
}
});
[/code]
but still i get undefined in all the console outputs
resolved it
[code]
console.log(oObj.aData["userName"]);
[/code]
"userName" is the mDataProp that i used for the mapping and is that possible to get the same string by use of the mDataProp there referriing oSettings ?