为每个 TD 提供自定义类以进行样式设置 - 数据表和 jQuery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15740005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Giving custom classes to each TD for styling - Datatables & jQuery
提问by eozzy
I'm using datatablesfor displaying server-side data in tables.
我使用的数据表在表中显示服务器端数据。
I can't target and style individual cells (<TD>) though. I search a bit and found it might be possible with:
不过，我无法定位和设置单个单元格 ( <TD>) 的样式。我搜索了一下，发现可能有：
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
....
}
... but I'm not quite sure how because I have a few table and not all have the same number of columns and rows. I want to give common class to all TDsof a 'column'.
...但我不太确定如何，因为我有几个表，而且并非所有表都具有相同数量的列和行。我想为所有TDs“列”提供通用类。
采纳答案by Lukasz Koziara
You can use sClassparameter in Columns definition. For example, if you have 3 columns and want to pass custom class for second and third column, you can:
您可以sClass在列定义中使用参数。例如，如果您有 3 列并希望为第二列和第三列传递自定义类，您可以：
"aoColumns": [
null,
{ "sWidth": "95px", "sClass": "datatables_action" },
{ "sWidth": "45px", "sClass": "datatables_action" }
]
You can check datatables documentation
您可以查看数据表文档
回答by jmarceli
You can use columnDefsto define classes for each column.
您可以使用columnDefs为每一列定义类。
Example in coffeescript:
咖啡脚本中的示例：
$('table').dataTable(
columnDefs: [
{
targets: -1 # targets last column, use 0 for first column
className: 'last-column'
}
]
);
This is using new API 1.10+.
这是使用新的 API 1.10+。
回答by SaschaM78
For those who found this question when searching for fnRowCallbackand want to add styling based on cell content rather than using static css classes, using the fnRowCallbackwill do the trick:
对于那些在搜索时发现此问题fnRowCallback并希望根据单元格内容添加样式而不是使用静态 css 类的人，使用fnRowCallback将可以解决问题：
oTable = $('#matrix').dataTable({
...
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
for (var i in aData) {
// Check if a cell contains data in the following format:
// '[state] content'
if (aData[i].substring(0,1)=='[') {
// remove the state part from the content and use the given state as CSS class
var stateName= aData[i].substring(1,aData[i].indexOf(']'));
var content= aData[i].substring(aData[i].indexOf(']')+1);
$('td:eq('+i+')', nRow).html(content).addClass(stateName);
}
}
}
});
Hope this may be useful for some future visitor :-)
希望这对未来的访问者有用:-)
回答by devlin carnate
Here's how to do it using createdCell, using DataTables 1.10+ syntax. The benefit of this approach is that you can conditionally style the cells.
以下是如何createdCell使用DataTables 1.10+ 语法来实现。这种方法的好处是您可以有条件地设置单元格的样式。
"columnDefs": [
{
"targets": [16],
"createdCell": function(td, cellData, rowData, row, col) {
switch(cellData) {
case "Pending":
$(td).addClass('pending');
break;
case "Rejected":
$(td).addClass('rejected');
break;
case "Approved":
$(td).addClass('approved');
break;
case "SAP":
$(td).addClass('sap');
break;
case "Reconciled":
$(td).addClass('reconciled');
break;
}
}
}
],
回答by omarjebari
If you want to target the row or an individual cell in a callback:
如果要在回调中定位行或单个单元格：
var table = $('#order-history-table').DataTable(
{
"ajax": url,
"pageLength": 20,
"createdRow": function( row, data, dataIndex ) {
// Add a class to the cell in the second column
$(row).children(':nth-child(2)').addClass('text-justify');
// Add a class to the row
$(row).addClass('important');
}
}
);
I was unable to get the 'createdCells' parameter to work so had to do it through the row.
我无法使 'createdCells' 参数起作用，所以必须通过行来完成。
回答by Karthik
var table = $('#order-history-table').DataTable(
{
"ajax": url,
"pageLength": 20,
"createdRow": function( row, data, dataIndex ) {
// Add a class to the cell in the second column
$(row).children(':nth-child(2)').addClass('text-justify');
// Add a class to the row
$(row).addClass('important');
}
}
);
