Question

我正在尝试在表格中对一行进行颜色编码，如果我一直禁用排序，我就可以这样做。

JavaScript的：

 $(function () {

    $('#example2').DataTable({
      "ajax": "../json/daily_status.json",
      "fnRowCallback": function( nRow, aData, iDisplayIndex ) {            
        if ( iDisplayIndex == 9 ) {
            $('td', nRow).each(function(){
                           $(this).html( '<td bgcolor="#BE81F7"><b>'+$(this).text()+'</b><td>' );
                        });
        }
        return nRow;
    },
      "scrollX": false,
      "ordering": true,
      "paging": false,
      "info": false,          
      "searching": false,
       dom: 'Bfrtip',
       buttons: [
            'excel'
            ]         
    });
  });

HTML：

<table id="example2" class="table table-bordered table-striped">
                <thead>
                  <tr>
                   <th>STATUS_CODE</th>
                   <th>Count</th>                       
                  </tr>
                </thead>
       </table>

JSON数据： -

{"data":[["Authorized","4847"],["Pending Authorization","670"],["Pending Acceptance","344"],["Pending Audit","314"],["Pending First Approval","248"],["Pending Second Approval","208"],["In Progress","82"],["Ready for Audit","22"],["Pending Resolution","8"],["Total","6743"]]}

但是只要我启用排序，就会有多行进行颜色编码。当我传递表格行进行颜色编码时，就会发生这种情况。

有没有办法发送值而不是行？我只希望第一列值总计的行被着色。

Answer 1

<强>解

请考虑使用footerCallback来显示表格页脚中的总数，请参阅Footer callback example。这样它就不会受到排序的影响，您可以将任何CSS规则应用于tfoot元素。

var table = $('#example2').DataTable({
   "ajax": "../json/daily_status.json",
   "scrollX": false,
   "ordering": true,
   "paging": false,
   "info": false,          
   "searching": false,
   "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;

        // Remove the formatting to get integer data for summation
        var intVal = function ( i ) {
            return typeof i === 'string' ?
                i.replace(/[\$,]/g, '')*1 :
                typeof i === 'number' ?
                    i : 0;
        };

        // Total over all pages
        total = api
            .column( 1 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            }, 0 );

        // Update footer
        $( api.column( 1 ).footer() ).html(total);
    }    
});

<强>样本

请参阅this jsFiddle以获取代码和演示。

表格页脚中的显示和样式列总数

1 个答案: