CODEWITHSUNDEEP
jquerydatatableshtml-table
Nicolaesse
Nicolaesse

Reputation: 2714

Can't set the row class in DataTables

I am using DataTables with PHP and MySQL with great results but I'm having lots of troubles setting up the classes of the row. My SQL table have a column named "class_style" which contain some values like "blue_class", "green_class", "red_class", ...

My target is to declare this class name on every row of the results so I can (for example) show "red_class" rows with red background, something like this example http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html where the are show in red.

The code I thought would work is the following:

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        echo "<tr class='" . mysql_result($result, $i, 'class_style') . "'>";;
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

when I open the page with the browser each row of the table is being shown with the following class:

<tr class='odd'>
<tr class='even'>

Even if I use a less automatized solutions like the following

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        echo "<tr class='my_class'>";;
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

all the classes became

<tr class='my_class odd'>
<tr class='my_class even'>

how could I get a solution of this problem? I'd like to reach the following results:

<tr class='green_class'>
    <td>Smith</td>
    <td>the Duck</td>
</tr>
<tr class='red_class'>
    <td>Jackbson</td>
    <td>Big great team</td>
</tr>
<tr class='green_class'>
    <td>Awaiters</td>
    <td>the flowers</td>
</tr>

Upvotes: 1

Views: 11282

Answers (6)

Greg Pettit
Greg Pettit

Reputation: 10830

It looks like you're rendering the table on the server side and then sending it back to the client side, after which you are calling DataTables on it. Is that correct?

An alternative approach would be to use DataTables in "server-side processing" mode, meaning that the server would only send back the JSON of the data for the current "page". Or if your data source isn't particularly large, you could just use an Ajax source (which should also return JSON, but the entire data set). Then you could style the rows using the fnRowCallback function [edit: now simply called "rowCallback" as of 1.10]. You would grab the classname from the data set, and add it to the row using jQuery.

Something like this:

"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var rowClass = aData[4] // imagining that your class is found in column 4  
  $(nRow).addClass(rowClass);
  }
}

As a completely pedantic aside that you can ignore (since it's just me poking my nose where it wasn't invited), using coloured classes is probably not the optimal long-term decision. I assume that "red", "green", etc all correspond to some sort of state for the individual record. Maybe "green" means "currently active" or something like that. You should use classes that reflect the purpose rather than the appearance, because some day you might decide that "purple" is actually a better color to represent "currently active" (or whatever).

Upvotes: 4

Ying Cai
Ying Cai

Reputation: 103

check the document here: https://datatables.net/reference/option/createdRow

i solve this question like this:

jQuery('.js-dataTable-full').dataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "/path/to/ajax",
        "createdRow": function(row, data, index) {
            if(data.condition) {
                $(row).addClass('warning');
            }
        },
 });

Upvotes: 2

jfreak53
jfreak53

Reputation: 2349

You need to set it up to use server side processing number one. Once that's done you can specify in your JSON or PHP array what the class name of the row should be using DataTable's own format:

'DT_RowClass' => 'class',

This is pulled straight from their forum: http://datatables.net/forums/discussion/7100/dt-rowid-and-rowclass

Upvotes: 1

Isa Ugurchiev
Isa Ugurchiev

Reputation: 74

If you added row and you need add unique class for this row

var table = $('#example').DataTable();
var id = 99;

table
    .row
    .add(['cell-1', 'cell-2', 'cell-3', 'cell-4',])
    .draw()
    .nodes()
    .to$()
    .addClass( 'js__list-item-'+id );

And result

<tr class="js__list-item-99 odd" role="row">
     <td>cell-1</td>
     <td>cell-2</td>
     <td>cell-3</td>
     <td>cell-4</td>
</tr>

Upvotes: 1

user2310305
user2310305

Reputation: 31

Set the default classes before.

$.fn.dataTableExt.oStdClasses.sStripeOdd = '';

$.fn.dataTableExt.oStdClasses.sStripeEven = '';

For further references see here

http://www.datatables.net/styling/custom_classes

Upvotes: 1

John x
John x

Reputation: 4031

try

echo "<tbody>";
    for($i=0; $i < $number_of_results; $i++){
        if($i%2==0){
            echo "<tr class='even'>";
          else
             echo "<tr class='odd'>";
            echo "<td>" . mysql_result($result, $i, 'family_name') . "</td>";
            echo "<td>" . mysql_result($result, $i, 'team') . "</td>";
        echo "</tr>";           
    };
echo "</tbody>";

Upvotes: 0

Related Questions