jquery - datatables jquery 在 "sClass"上提供动态数组索引值

Question

给出以下代码:

var aDataSet = [
    ['1', 'Trident','Internet Explorer 4.0','Win 95+','4','X'],
    ['2', 'Fish','Internet Explorer 5.0','Win 95+','5','C'],
    ['3', 'Pony','Internet Explorer 5.5','Win 95+','5.5','A']
];

$('#example').dataTable( {
    "aaData": aDataSet,
    "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "customCSS-" +aDataSet['id']['Version']  }, 
        { "sTitle": "Grade", "sClass": "center" }
    ]
} );    

我希望能够查找当前正在处理的aDataSet元素并获取其Version信息，以便我可以在上下文中进行字符串连接aoColumns 样式。以上不执行任何样式设置。本次修改:

    { "sTitle": "Version", "sClass": "customCSS-" +aDataSet[0]['Version']  }

使所有内容都与第零个索引匹配(显然)，但我希望我可以以某种方式强制进行该查找。任何见解都值得赞赏。

Answer 1

好吧，老实说，我认为您并不担心 Version 值本身，因为这只是数据表标准虚拟数据，所以我冒昧地不将其用作css 类名的串联。 Version 值包含点，这些点会使 css 变得困惑。然后记住这一点，并假设我理解您要做什么，这是完成该任务的一种方法，如 jsbin 所示:

http://jsbin.com/onelev/2/edit

这里的要点是使用 fnRowCallback 生成 表格单元格上的动态类名称。

CSS 用于设置自定义单元格颜色的样式

.customCSS-Trident, table.dataTable tr.even td.customCSS-Trident.sorting_1, table.dataTable tr.odd td.customCSS-Trident.sorting_1 { background-color: blue; color: #fff; }
.customCSS-Fish, table.dataTable tr.even td.customCSS-Fish.sorting_1, table.dataTable tr.odd td.customCSS-Fish.sorting_1 { background-color: green; color: #fff; }
.customCSS-Pony, table.dataTable tr.even td.customCSS-Pony.sorting_1, table.dataTable tr.odd td.customCSS-Pony.sorting_1 { background-color: brown; color: yellow; }
.customCSS-Cabbage, table.dataTable tr.even td.customCSS-Cabbage.sorting_1, table.dataTable tr.odd td.customCSS-Cabbage.sorting_1 { background-color: pink; }

JavaScript

   $(document).ready( function() {
     var oTable = $('#example').dataTable( {
       "aaData": aDataSet,
       "aoColumnDefs": [ 
         {  "aTargets": [ 0 ], 
            "sTitle": "#" 
         },
         {  "aTargets": [ 1 ], 
            "sTitle": "Engine" 
         },
        { "aTargets": [ 2 ], 
           "sTitle": "Browser" 
        },
        { "aTargets": [ 3 ], 
         "sTitle": "Platform" 
        },
         { "aTargets": [ 4 ],
          "sTitle": "Version"
        },      
        { "aTargets": [ 5 ], 
          "sTitle": "Grade", 
          "sClass": "center" 
         }
       ], 
        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
          $('td:eq(4)', nRow).addClass("customCSS-" + aData[1]);    
            return nRow;
        },
     });
   } );

HTML

      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th>#</th>
            <th>Engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
          </tr>
        </thead>
        <tbody>
       </tbody>
  </table>

附录
当您对某一特定列进行排序时，DataTables 会动态生成 sorting_1 类。如果您有经验丰富的用户按住 Shift 键，然后单击另一个列标题，则数据表会生成另一个名为 sorting_2 的类，依此类推。虽然用户按多列排序的可能性可能相当低，但可以通过为这些额外情况添加额外的 css 规则来处理这些情况。