如何操作数据表Javascript api中的特定行

时间:2022-08-29 14:26:06

I am using data table javascript Api. It is very simple to use. Just create an array and pass to data table. Working fine. No issue

我正在使用数据表javascript Api。它使用起来非常简单。只需创建一个数组并传递给数据表。工作正常。没有任何问题

Example:

<html>
<head>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.5/css/jquery.dataTables.css"/>
<script type="text/javascript" src="//cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">   
var dataSet = [[1,'some text1','some text1','some text1',1],[2,'some text2','some text2','some text2',0],[3,'some text3','some text3','some text3',1]];
            $('#example').dataTable( {      
                "data": dataSet,
                "columns": [
                { "title": "id" },
                { "title": "Name" },
                { "title": "Parent", "class": "center" },
                { "title": "Description" },
                { "title": "active", "class": "center","bSortable": false }
                ]
            } );
        </script>
        </head>
        <body>
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>
        </body>
        </html>

So I want to set a different color to a particular row based on condition.Here we have not any control over row. How ever i am trying row call back available in data table. But it always reflect to header..

所以我想根据条件为特定行设置不同的颜色。这里我们没有对行的任何控制。我怎么尝试在数据表中可用的行回调。但它始终反映到标题..

Thanks in adv for your time.

谢谢你的时间。

1 个解决方案

#1


2  

As mentioned in the comments, you can use fnRowCallback for this.

如评论中所述,您可以使用fnRowCallback。

...   
{ "title": "active", "class": "center","bSortable": false }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   var status = aData[5];
   // check the status
   if(status = 'not active'){ // or whatever your status value is...
        $(nRow).addClass('row-inactive');
   }
}

This will add a class of row-inactive to the current <tr>. You'll obviously need a css class like .row-inactive td{background-color:red;} to make it work.

这将向当前添加一类行无效。你显然需要一个像.row-inactive td {background-color:red;}这样的css类来使它工作。

#1


2  

As mentioned in the comments, you can use fnRowCallback for this.

如评论中所述,您可以使用fnRowCallback。

...   
{ "title": "active", "class": "center","bSortable": false }
],
"fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
   var status = aData[5];
   // check the status
   if(status = 'not active'){ // or whatever your status value is...
        $(nRow).addClass('row-inactive');
   }
}

This will add a class of row-inactive to the current <tr>. You'll obviously need a css class like .row-inactive td{background-color:red;} to make it work.

这将向当前添加一类行无效。你显然需要一个像.row-inactive td {background-color:red;}这样的css类来使它工作。