DataTable js插件，如何在一列中的兩個數據上使用不同的css styles

Question

下面是我的表，其中的所有數據都是通過 js 檢索的，我的問題是，如果它們位於單個列中，我似乎無法設置兩個不同的數據集的樣式。

桌子：

<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>

下面是 DataTable 內容的 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"
        });
    }
},

這是現在的用戶界面：

發生這種情況是因為我嘗試添加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": "$320,800", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" }, { "id": "456", "name": "Donna Snider", "position": "Customer Support", "salary": "$112,000", "start_date": "2011/01/25", "office": "New York", "extn": "4226" }, { "id": "567", "name": "Cedric Kelly", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "Edinburgh", "extn": "6224" }, { "id": "432", "name": "Airi Satou", "position": "Accountant", "salary": "$162,700", "start_date": "2008/11/28", "office": "Tokyo", "extn": "5407" }, { "id": "987", "name": "Brielle Williamson", "position": "Integration Specialist", "salary": "$372,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>

在我的情況下的最終結果：

您可能不想要兩個 styles - 在您的情況下可能只是第一個。

DataTable js插件，如何在一列中的兩個數據上使用不同的css styles

問題描述

1 個解決方案

解決方案1
0 2021-12-05 20:03:35

DataTable js插件，如何在一列中的兩個數據上使用不同的css styles

問題描述

1 個解決方案

解決方案1 0 2021-12-05 20:03:35

解決方案1
0 2021-12-05 20:03:35