jQuery数据表突出显示MVC应用程序中的行选择问题答案

【问题标题】：jQuery datatable highlight row selection issue in MVC applicationjQuery数据表突出显示MVC应用程序中的行选择问题
【发布时间】：2016-05-04 19:31:17
【问题描述】：

我正在使用 jQuery 数据表在 MVC 应用程序中显示我的表（客户端）。我正在使用下面的示例来突出显示选定的行。

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

脚本基本上是根据点击从行中添加或删除row_selected 类。脚本已执行，但行未突出显示。

是否需要手动创建css row_selected？
如果不是，那么这个类是在哪里定义的？或者我做错了什么？最好的解决方案是什么？
如果是，那么，您能举个例子吗？

提前致谢。

_Layout.cshtml:-

<head>
    <meta charset="utf-8" />
    <title>@ViewBag.Title</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)
</head>

Index.cshtml :- 渲染定义表的局部视图

@model IEnumerable<User>

<div>
    @Html.Partial("_List", Model)
<div>

_List.cshtml:-

@model IEnumerable<User>

<div>  
<table id="jquery-datatable">
    <thead>
        <tr>
            <th>***</th>
            <th>***</th>
            <th>***</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>***</td>
            <td>***</td>
            <td>***</td>
        </tr>
        }
    </tbody>
</table>
</div>

<script type="text/javascript">
    var oTable;

    $(document).ready(function () {

        $('#jquery-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 = $('#jquery-datatable').dataTable({
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "sScrollY": 200,
            "sScrollX": "100%",
            "bScrollCollapse": true
        });
    });
</script>

【问题讨论】：

标签： jquery asp.net-mvc datatable

【解决方案1】：

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;
}

I solved my issue, but any one has an idea, why background-color attribute did not work with previous CSS for <tr></tr> ?? I am using HTML5.

【讨论】：