Question

我正在使用找到here的JQuery DataTables插件。我想把一个特定的行加粗（一个Totals行）。我怎么能这样做？

现在我正在尝试使用mRender来应用CSS。我已尝试fnRowCallback并尝试使用.addClass代替.css。似乎没什么用。

JS：

"mRender": function (data) {
   if (data == "Totals") {
       $('#tblStatistics tbody tr td').css('font-weight', 'bold');
   }
   return data;
},

我的HTML如下所示：

<table id="tblStatistics">
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    <tr>
  </tbody>
</table>

Answer 1

您可以像这样使用fnRowCallback：

$(document).ready(function() {
    $('#example').dataTable( {
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            /* All cells in 4th row will be bolded  */
            if ( iDisplayIndex == 3 ) {
                $('td', nRow).each(function(){
                               $(this).html( '<td><b>'+$(this).text()+'</b><td>' );
                            });
            }
            return nRow;
        },
        "aoColumnDefs": [ {
                "sClass": "center",
                "aTargets": [ -1, -2 ]
        } ]
    } );
} );

JSFIDDLE - Click here for demo

Answer 2

"fnRowCallback": function (nRow) {
     $(nRow).css("font-weight", "bold");
}

Answer 3

试

"fnRowCallback": function (nRow, aData, iDisplayIndex) {
    if(iDisplayIndex == 3 /*Alternative Condition: aData[0] == "Totals"*/) {
        $(nRow).css('font-weight', 'bold');
    //OR
        $(nRow).addClass('yourCssClassHere');
    }
}

请勿使用mRender进行行突出显示。 mRender用于专栏。使用fnRowCallback为特定行设置样式。如果fnRowCallback不适合您，请告诉我们您尝试使用fnRowCallback的内容。

Answer 4

这对我有用

oTable = $('#datatables').dataTable({
                "fnRowCallback": function (row, data, index) {
                    if ( data.status === "2") {
                        $(row).addClass('highlight');
                    }
                },
                "bProcessing": true,
                "aaData": dataTab,
                "aoColumns": [{ "mDataProp": "state" }, { "mDataProp": "S_key_name" }, { "mDataProp": "nombre" }, { "mDataProp": "solicitante_id" }, { "mDataProp": "S_register_date" }, { "mDataProp": "S_desired_date" }, { "mDataProp": "T_Fecha_Estimada" }, { "mDataProp": "S_solicit_priority" }, { "mDataProp": "Edit" }],
                "sPaginationType": "bootstrap",
                "aaSorting": [[5, "desc"]],
                "bJQueryUI": true
            });

图像正常工作

enter image description here

Answer 5

由于您在总计中使用了一行，因此您可以在表格中使用tfoot：

<table id="tblStatistics">
  <thead></thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
    <tr>
  </tbody>
  <tfoot>
    <tr>
      <td><b></b></td>
      <td class="bold"></td>
      <td></td>
    <tr>
  </tfoot>
</table>
<style>
.bold{
    font-weight: bold;
}
</style>

TD可选择<b>粗体标记，或CSS中的样式

jQuery DataTables插件：使特定行加粗

5 个答案: