datatables jquery提供“sClass”上的动态数组索引值

Given the following code:

给出以下代码:

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" }
    ]
} );

I would like to be able to look up the current being processed aDataSet element and get its Version information back so that I can do a string concatenation within the context of aoColumns styling. The above does not perform any styling. This modification:

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

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

makes everything match the zeroth index (clearly), but I would expect I could somehow force that lookup. Any insight is appreciated.

使一切都与第零索引(显然)匹配,但我希望我能以某种方式强制查找。任何见解都表示赞赏。

1 个解决方案

#1

Well, I honestly don't think you are worried about the Version value in and of itself because that's just the datatables standard dummy data, so I took the liberty of not using that as part of the concatenation of the css class name. The Version value contains dots, and those will make a mess of the css. Then bearing that in mind, and assuming I understand what you are trying to do, here's one way to go about the task, as shown on jsbin:

好吧,老实说,我认为你并不担心Version值本身,因为那只是数据表标准的伪数据,所以我冒昧地不使用它作为css类名串联的一部分。版本值包含点,这些将使css混乱。然后考虑到这一点,并假设我理解你要做的事情,这是执行任务的一种方式,如jsbin所示:

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

The primary point here is the use of fnRowCallback to generate the dynamic class name on the table cell.

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

CSS for styling custom cell colors

用于样式化自定义单元格颜色的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>

Addendum
DataTables dynamically generates the sorting_1 class when you sort one particular column. If you have sophisticated users who hold the shift key and then click another column header, then datatables generates another class called sorting_2, and so on. While the chances of having a user sort by multiple columns is likely quite low, the cases could be handled by adding additional css rules for those extra cases.

当您对一个特定列进行排序时,附录DataTables会动态生成sorting_1类。如果您拥有持有shift键的高级用户,然后单击另一个列标题,则数据表会生成另一个名为sorting_2的类,依此类推。虽然让用户按多列排序的可能性非常低,但可以通过为这些额外案例添加额外的css规则来处理这些案例。

#1