jquery datatable highlight row selection issue in MVC application

jack123

I am using jquery datatable to show my table (Client side) in MVC application. I am using below example to highlight selected row.

http://www.datatables.net/beta/1.9/examples/api/select_single_row.html

The script basically adding or removing “row_selected” class from the row based on clicked. The script is executed but row is not highlighted.

Do I need to manually create a css “row_selected” ??
If no, then, where is this class define ? Or what am I doing wrong ? what is best solution ?
If yes, then, can you suggest example ?
Thanks in advanced.

[code]

_Layout.cshtml:-



@ViewBag.Title

@Content.Css("DataTables-1.9.4/media/css/demo_page.css", Url)
@Content.Css("DataTables-1.9.4/media/css/demo_table.css", Url)
@Content.Css("DataTables-1.9.4/media/css/demo_table_jui.css", Url)
@Content.Css("themes/base/jquery.ui.all.css", Url)

@Content.Css("Site.css", Url)
@Content.Script("jquery-1.5.1.min.js", Url)
@Content.Script("jquery-ui-1.8.11.min.js", Url)
@Content.Script("DataTables-1.9.4/media/js/jquery.dataTables.min.js", Url)
@Content.Script("modernizr-1.7.min.js", Url)
@Content.Script("jquery.unobtrusive-ajax.min.js", Url)



Index.cshtml :- Render partial view where table is defined

@model IEnumerable


@Html.Partial("_List", Model)



_List.cshtml:-

@model IEnumerable





***
***
***



@foreach (var item in Model)
{

***
***
***

}





var oTable;

$(document).ready(function () {

$('#jquey-datatable tbody tr').click(function (e) {
alert ("Start...);
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
alert ("Finish...);
});

oTable = $('#jquey-datatable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollY": 200,
"sScrollX": "100%",
"bScrollCollapse": true
});
});

[/code]

jack123

Solve:-

=> the row_selected class is not been defined in jquery datatable. So, I need to define css by myself.

=> I have created a CSS with row_selected class before post this question but it did not highlighted row.


Wrong CSS -

.row_selected {
background-color:#5c87b2;
}

I replaced with below CSS and working fine.


Correct CSS -

.row_selected {
color:white;
}

.row_selected td {
background-color:#5c87b2;
}