Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 83168

Applying class "row_selected" to a row through a checkbox's click event

$
0
0
Hi all,

I have a datatable with checkboxes in the leftmost column, with the intention of allowing users to select multiple rows by clicking on the check box.

Here's my table definition, which creates the table just fine (it populates using a json array returned from ajax, which I doctored to include a column populated with "0" underneath the checkbox.

var oUnMatchedTable = null;

$(document).ready(function() {
	
	oUnMatchedTable = $('#gUnMatched').dataTable({
		 "aoColumns":
		 [  
		  	{ "fnRender": function () {return '<input type="checkbox" onclick="javascript:fnUnmatchedCheckboxClickHandler(this);" />';} }, 
			{ "sTitle": "BU" },		  // index 0, BU code
			{ "sTitle": "INSNAME" },  // index 1, insurance name
			{ "sTitle": "ADDRESS" },  // index 2, address
			{ "sTitle": "ADDRESS2" }, // index 3, address2
			{ "sTitle": "CITY" },     // index 4, city
			{ "sTitle": "STATE" },    // index 5, state
			{ "sTitle": "ZIP" },	  // index 6, ZIP
			{ "sTitle": "STATUS", "sClass": "center" }, // index 7, status
			{ "sTitle": "LASTUPDATED", "sClass": "center" }, // index 8, last updated
			{ "sTitle": "COUNTER" }, // index 9, counter
			{ "bVisible": false }, // index  10, unmatched id
			{ "bVisible": false }, // index 11, lab code
			{ "bVisible": false }  // index 12, modified by
		],
		"aaSorting": [[10,'desc']],
            "sRowSelect": "multi",
  			"aButtons": [ "select_all", "select_none" ]

	});


Here's a sample json array to populate the table:
[ ['0','ATL','CV','GT1','--','--','--','--','--','02/27/2012 15:10','14','30360','TAT','IMDBAPP'],['0','
ATL','BC','GT1','--','--','--','--','L','04/04/2012 14:54','12','30216','TAT','caitee.x.cruelle'],['0','ATL','CN','GT1','--','--'
,'--','--','--','02/27/2012 15:10','4','30359','TAT','IMDBAPP'],['0','ATL','MM','GT1','--','--','--','--','--','02/27/2012 15:10','4
','30361','TAT','IMDBAPP'],['0','ATL','99','GT1','--','--','--','--','--','04/18/2013 16:03','4','30362','TAT','temp.y.consult'],['
0','ATL','CIGNA PPO','PO BOX 188039','--','CHATTANOOGA','TN','37422','--','04/18/2013 16:02','2','27277','STL','temp.y.consult'],['
0','ATL','MEDICARE','2333 SOUTH','--','ATLANTA','GA','30161','--','02/27/2012 14:55','2','30327','TNE','IMDBAPP'],['0','ATL','--','G
T1','--','--','--','--','--','02/27/2012 15:12','2','30378','TAT','IMDBAPP'],['0','ATL','CIGNA PPO','PO BOX 188039','--','CHATTANOOG
A','TN','37422','L','11/03/2011 11:51','1','22884','AHL','BANSAA00'] ]


Here's the event procedure for the checkbox. The event definitely triggers and I have verified that I can determine checked vs unchecked.

function fnUnmatchedCheckboxClickHandler(oLocal)
{
	var s = $(oLocal).is(':checked');
	var oRow = fnGetNodes($(oLocal).closest('tr')[0])
	if (s == true)
		oRow.addClass('row_selected'); //doesnt' work, I know
                else
		oRow.removeClass('row_selected');
}

So, how do I add the "row_selected" css class to the ROW that the checkbox is in. I can get the ID number of the row from "closest('tr')[0], but the row itself? Maybe remove the [0]? (Will check and get back to you.)

This is my first post here. It will take me a while to dummy up a whole working warfile that won't violate my company's compliance and proprietary info policies.

Thanks!

Viewing all articles
Browse latest Browse all 83168

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>