DataTable js插件，如何对一列两个数据使用不同的css样式

Question

下面是我的 table，其中的所有数据都是通过 js 检索的，我的问题是如果它们在一个列中，我似乎无法设置两组不同的数据。

Table:

<table id="main-shift-list" class="table table-striped table-bordered responsive no-wrap" aria-hidden="true">
    <thead>
        <tr class="bbr-table text-light">
            <th scope="col">Shift Name</th>                
            <th scope="col">Shift Details</th>  
            <th scope="col">Shift Duration</th>              
            <th scope="col">Status</th>
            <th scope="col" class="w-10">Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

下面是数据 Table 内容的 js，特别是 <th> "Shift Name":

{ data: 'shift_name', name: 'shift_name', width: '15%', 
    "render": function ( data, type, row, meta )
    {
        return (row.shift_name ? row.shift_name : 'N/A') + '<br>' + (row.shift_description ? row.shift_description : 'N/A');
    },
    createdCell: function (td, cellData, rowData, row, col) {
        return $(td).css({
            'font-weight': "700"
        });
    }
},

现在是UI：

发生这种情况是因为我尝试添加 font-weight 但两者都会受到影响，因为它们包含在 <td> 中我如何才能使第一个 (shift_name)粗体和第二个 (shift_description) 不是？

Answer 1

您可以通过包含 <span>...</span> 标签来生成单元格的文本。这允许您将每个单独的文本片段放在一个单独的范围内。

然后你可以为每个跨度添加一个class——例如：

<span class="mybold">

在页面顶部的 <head> 部分，您可以声明每个 class 的样式 - 因此，对于上述 class:

.mybold {
  font-weight: 700;
}

这是一个演示：

var dataSet = [
    {
      "id": "123",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "0,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "456",
      "name": "Donna Snider",
      "position": "Customer Support",
      "salary": "2,000",
      "start_date": "2011/01/25",
      "office": "New York",
      "extn": "4226"
    },
    {
      "id": "567",
      "name": "Cedric Kelly",
      "position": "Senior Javascript Developer",
      "salary": "3,060",
      "start_date": "2012/03/29",
      "office": "Edinburgh",
      "extn": "6224"
    },
    {
      "id": "432",
      "name": "Airi Satou",
      "position": "Accountant",
      "salary": "2,700",
      "start_date": "2008/11/28",
      "office": "Tokyo",
      "extn": "5407"
    },
    {
      "id": "987",
      "name": "Brielle Williamson",
      "position": "Integration Specialist",
      "salary": "2,000",
      "start_date": "2012/12/02",
      "office": "New York",
      "extn": "4804"
    }
  ];

$(document).ready(function() {

var table = $('#example').DataTable( {
  data: dataSet,
  columns: [
    { title: "ID", data: "id" },
    { title: "Name",
      render: function ( data, type, row, meta ) {
        return '<span class="mybold">' 
          + (row.name ? row.name : 'N/A') 
          + '</span><br>'
          + '<span class="myitalic">' 
          + (row.position ? row.position : 'N/A')
          + '</span>';
      }
    },
    { title: "Office", data: "office" },
    { title: "Start date", data: "start_date" },
    { title: "Extn.", data: "extn" },
    { title: "Salary", data: "salary" }
  ]

} ); 

} );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

<style>

.mybold {
  font-weight: 700;
}

.myitalic {
    font-style: italic;
}

</style>

</head>

<body>

<div style="margin: 20px;">

    <table id="example" class="display dataTable cell-border" style="width:100%">
    </table>

</div>



</body>
</html>

我的最终结果：

您可能不想要两种样式 - 在您的情况下可能只需要第一种。

DataTable js插件，如何对一列两个数据使用不同的css样式

DataTable js plugin, how to use different css styles on two data in one column

javascript

sql

ajax

jquery

datatables