Блог

Главная - Вопросы по программированию - Добавьте данные JS в заголовок таблицы (Обновите заголовок с помощью этого элемента)

Добавьте данные JS в заголовок таблицы (Обновите заголовок с помощью этого элемента)

#javascript #html #datatables

Вопрос:

Я создал таблицу данных, которая является отслеживателем посещаемости, и я как бы полностью изменил ее формат. Вместо того, чтобы указывать статус в ячейках для каждой строки (P, PTO, TRV, H и т. Д.), У меня были даты с понедельника по пятницу, и я стилизовал строки на основе этого атрибута, и это стало слишком сложно, чтобы идти в ногу, и моя читаемость кода была мусорной. Я нашел лучший способ для этого. Теперь я вставляю статус под заголовком столбца «Каждый день», и, основываясь на статусе дня, он стилизует строку отдела. Если вы хотите узнать местоположение сотрудника на этот день, все, что вам нужно сделать, это навести курсор на статус дня, и появится всплывающая подсказка с указанием местоположения и даты этого дня. Вместо того, чтобы указывать дату во всплывающей подсказке (мне просто нужно местоположение), я пытался выяснить, как добавить ее в таблицу <th> #myTable.

Я наткнулся https://datatables.net/reference/option/columns.title но это, похоже, обновляется только статическими данными.

Вот мой рабочий пример (за вычетом обновления заголовка):

 var jsonOBJ = [{
  "Department": "IT",
  "Employee": "Beerus Dev",
  "Monday": "05/17/2021",
  "MondayStatus": "P",
  "MondayLocation": "Office",
  "Tuesday": "05/18/2021",
  "TuesdayStatus": "P",
  "TuesdayLocation": "Office",
  "Wednesday": "05/19/2021",
  "WednesdayStatus": "P",
  "WednesdayLocation": "Office",
  "Thursday": "05/20/2021",
  "ThursdayStatus": "P",
  "ThursdayLocation": "Office",
  "Friday": "05/21/2021",
  "FridayStatus": "P",
  "FridayLocation": "Office"
}]

$(document).ready(function() {
    moment.suppressDeprecationWarnings = true;
    
    $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var now = moment();
        var monday = now.clone().weekday(1);
        var friday = now.clone().weekday(5);
        
        let mondayF = monday.format('MM/DD/YYYY');
        let fridayF = friday.format('MM/DD/YYYY');
        
        //console.log(sundayF); 
        //console.log(fridayF);
        
        var sMonday = searchData[2];
        var sFriday = searchData[10];
        
        if (mondayF == sMonday amp;amp; fridayF == sFriday) {
            return true;
        }
        return false;
    }
);
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
            data: jsonOBJ,
            "pageLength" : 50,
            "columns": [
                {"data": "Department",
              visible: false},
                { "data": "Employee"},
                { "data": "Monday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "MondayStatus"},
                { "data": "Tuesday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "TuesdayStatus"},
                { "data": "Wednesday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "WednesdayStatus"},
                { "data": "Thursday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "ThursdayStatus"},
                { "data": "Friday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "FridayStatus",}
            ],
            columnDefs: [
            { "targets": 3,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.MondayLocation   'n'   "Date: "   moment(full.Monday).format("MM/DD/YYYY")   '">'   data : data;
                }     
            },
            { "targets": 5,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.TuesdayLocation   'n'   "Date: "   moment(full.Tuesday).format("MM/DD/YYYY")  '">'   data : data;
                }     
            },
            { "targets": 7,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.WednesdayLocation   'n'   "Date: "   moment(full.Wednesday).format("MM/DD/YYYY")  '">'   data : data;
                }     
            },
            { "targets": 9,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.ThursdayLocation   'n'   "Date: "   moment(full.Thursda).format("MM/DD/YYYY")   '">'   data : data;
                }     
            },
            { "targets": 11,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.FridayLocation   'n'   "Date: "   moment(full.Friday).format("MM/DD/YYYY")   '">'   data : data;
                }     
            }
            ] ,
            dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>"  
                "<'row'<'col-sm-12'tr>>"  
                "<'row'<'col-sm-12 col-md-5'><'col-sm-12 col-md-7'>>",
            buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Print Report',
                buttons: [{
                        extend: "excel",
                        className: "btn-dark"
                    },
                    {
                        extend: "print",
                        className: "btn-dark"
                    },
                ],
            }],
            order: [
                [0, 'asc']
            ],
            rowGroup: {
                dataSrc: [
                    'Department'
                ],
                startRender: function(rows, group, level, data) {
                    var all;
                    if (level === 0) {
                        top = group;
                        all = group;
                    } else if (level === 1) {
                        parent = top   group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top   parent   group;
                    }
    
                    var collapsed = !collapsedGroups[all];
                    //console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {

                        r.style.display = collapsed ? 'none' : '';
                    });
                    //console.log('group:', group, level)
                 // loop all the rows in the group
                    var statusClass = '';
                    rows.every(function ( rowIdx, tableLoop, rowLoop ) {
                    var data = this.data();

                    var node = this.node();

                    var today = moment().format("YYYY-MM-DD"); // "05/10/2021"
                    //console.log(today);

                    //console.log(JSON.stringify(data));


                    //var result = Object.keys(data).find(key => data[key] === today);
                    var result = Object.keys(data).find(key => typeof data[key] === 'string' amp;amp; data[key].startsWith(today)); // "Monday"
                    //console.log(result);

                    var todayStatus = result ? data[result   'Status'] : 'n/a'; 
                    //console.log(todayStatus);

                        if(todayStatus === "P" || todayStatus === "TW") {
                            statusClass = 'green';
                        }
                        if(todayStatus === "NR" || todayStatus === "TRV") {
                            statusClass = 'yellow';
                        }
                        if (todayStatus === "PTO" || todayStatus === "H") {
                            statusClass = 'red';
                        }
                    });
                    //Add category name to the <tr>.   
                        return $('<tr/>').addClass(statusClass)
                        .append('<td colspan="8" style="text-align: left;">'   group   ' ('   rows.count()   ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                }
    
            }
        });
    
        //loadData();
    
        $('#myTable tbody').on('click', 'tr.dtrg-start', function() {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });
    }); 
 h5{
text-align: center;
font-size: 40px;
}
.title {
    position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:12px;
margin-bottom:20px;
padding-bottom:10px;
}
span {
color:#666666;
font-size:12px;
margin-bottom:1px;

}
.btn{
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
border: 1px solid #B7DDF2;

}
.table th {
    text-align: center;
}
.table td{
    padding: 3px;
}
.dtrg-level-0::after {
 text-align: center;
}
.btn:hover{
color: #333333;
background-color: #e6e6e6;
}
th { font-size: 14px; }
td { font-size: 12px; text-align: center;}
div.container {
min-width: 980px;
margin: 0 auto;
}
.header {
padding: 10px;
text-align: center;
}

body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.dt-button-collection {
position: static;
}
table.dataTable tr.dtrg-group.green td {
background-color: #66b266 !important;
}
table.dataTable tr.dtrg-group.yellow td {
background-color: #ffff66 !important;
}
table.dataTable tr.dtrg-group.red td {
background-color: #ff6666 !important;
}
.green {
background-color: #66b266 !important;
}
.red {
background-color: #ff6666 !important;
}
.yellow {
background-color: #ffff66 !important;
} 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
    <script src="https://momentjs.com/downloads/moment.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
    <link rel ="stylesheet" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
    <link rel ="stylsheet" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
    <link rel ="stylesheet" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
  </head>
  <h5><strong>Test Report</strong></h5>
  <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
                <thead class="thead-dark">
                    <tr>
                    <th>Department</th>
                    <th>Employee</th>
                    <th>Monday Status</th>
                    <th>Monday</th>
                    <th>Tuesday Status</th>
                    <th>Tuesday</th>
                    <th>Wednesday Status</th>
                    <th>Wednesday</th>
                    <th>Thursday Status</th>
                    <th>Thursday</th>
                    <th>Friday Status</th>
                    <th>Friday</th>
                    </tr>
                </thead>
            </table>
            </div>
            <body>
</body>

</html>

Комментарии:

1. ОБНОВЛЕНИЕ: Я считаю, что это { "data": "MondayStatus", "title": "" ,}, возможно, но я не могу ввести фактический объект даты данных, он просто выдает ошибку в моей скрипке. Источник: datatables.net/reference/option/columns.data

Ответ №1:

Я смог разобраться в этом самостоятельно. После того, как я почти просмотрел все сообщения, которые я мог найти в DataTables.net на форумах я наткнулся на функцию обратного вызова отображения заголовка под названием «headerCallback». Перед моей опцией инициализации columnDefs я вызываю headerCallback.

 "headerCallback": function( thead, data, start, full, end, display ) {
                for (var i=0; i < data.length; i  ){
                console.log(data[i].Monday);
                
                $(thead).find('th').eq(1).html(moment(data[i].Monday).format("MM/DD/YYYY"));
                $(thead).find('th').eq(2).html(moment(data[i].Tuesday).format("MM/DD/YYYY"));
                $(thead).find('th').eq(3).html(moment(data[i].Wednesday).format("MM/DD/YYYY"));
                $(thead).find('th').eq(4).html(moment(data[i].Thursday).format("MM/DD/YYYY"));
                $(thead).find('th').eq(5).html(moment(data[i].Friday).format("MM/DD/YYYY"));
                }
                },

Вот рабочий пример:

 var n = document.createElement('script');
n.setAttribute('language', 'JavaScript');
n.setAttribute('src', 'https://debug.datatables.net/debug.js');
document.body.appendChild(n);moment.suppressDeprecationWarnings = true;

var data = [{
  "Department": "IT",
  "Employee": "Beerus Dev",
  "Monday": "05/24/2021",
  "MondayStatus": "P",
  "MondayLocation": "Office",
  "Tuesday": "05/25/2021",
  "TuesdayStatus": "P",
  "TuesdayLocation": "Office",
  "Wednesday": "05/26/2021",
  "WednesdayStatus": "P",
  "WednesdayLocation": "Office",
  "Thursday": "05/27/2021",
  "ThursdayStatus": "P",
  "ThursdayLocation": "Office",
  "Friday": "05/28/2021",
  "FridayStatus": "P",
  "FridayLocation": "Office"
}
]

$(document).ready(function() {
    
    $.fn.dataTable.ext.search.push(
    function( settings, searchData, index, rowData, counter ) {
        var now = moment();
        var monday = now.clone().weekday(1);
        var friday = now.clone().weekday(5);
        
        let mondayF = monday.format('MM/DD/YYYY');
        let fridayF = friday.format('MM/DD/YYYY');
        
        //console.log(sundayF); 
        //console.log(fridayF);
        
        var sMonday = searchData[2];
        var sFriday = searchData[10];
        
        if (mondayF == sMonday amp;amp; fridayF == sFriday) {
            return true;
        }
        return false;
    }
);
        var collapsedGroups = {};
        var top = '';
        var parent = '';
    
        var table = $('#myTable').DataTable({
            data: data,
            "pageLength" : 50,
            "columns": [
                {"data": "Department",
              visible: false},
                { "data": "Employee"},
                { "data": "Monday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                { "data": "MondayStatus"},
                { "data": "Tuesday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "TuesdayStatus"},
                { "data": "Wednesday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "WednesdayStatus"},
                { "data": "Thursday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "ThursdayStatus"},
                { "data": "Friday", visible: false,
                render: function(data, type, row){
                if(type === "sort" || type === "type"){
                    return data;
                }
                return moment(data).format("MM/DD/YYYY");
            }
            },
                {"data": "FridayStatus",}
            ],
            "headerCallback": function( thead, data, start, end, display ) {
                    console.log(data[0].Monday);
       
                        $(thead).find('th').eq(1).html(data[0].Monday);
              $(thead).find('th').eq(2).html(data[0].Tuesday);
              $(thead).find('th').eq(3).html(data[0].Wednesday);
              $(thead).find('th').eq(4).html(data[0].Thursday);
              $(thead).find('th').eq(5).html(data[0].Friday);

                    },
            columnDefs: [
            { "targets": 3,
                "render": function (data, type, full, meta) {
                            $('#mondayAppend').text(data.Monday);    
            return type === 'display'? '<div title="Location: '   full.MondayLocation   'n'   "Date: "   moment(full.Monday).format("MM/DD/YYYY")   '">'   data : data;
            
                }
            },
            { "targets": 5,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.TuesdayLocation   'n'   "Date: "   moment(full.Tuesday).format("MM/DD/YYYY")  '">'   data : data;
                }     
            },
            { "targets": 7,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.WednesdayLocation   'n'   "Date: "   moment(full.Wednesday).format("MM/DD/YYYY")  '">'   data : data;
                }     
            },
            { "targets": 9,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.ThursdayLocation   'n'   "Date: "   moment(full.Thursda).format("MM/DD/YYYY")   '">'   data : data;
                }     
            },
            { "targets": 11,
                "render": function (data, type, full, meta) {
            return type === 'display'? '<div title="Location: '   full.FridayLocation   'n'   "Date: "   moment(full.Friday).format("MM/DD/YYYY")   '">'   data : data;
                }     
            }
            ] ,
            dom: "<'row'<'col-sm-12 col-md-10'f><'col-sm-12 col-md-2'B>>"  
                "<'row'<'col-sm-12'tr>>"  
                "<'row'<'col-sm-12 col-md-5'><'col-sm-12 col-md-7'>>",
            buttons: [{
                extend: 'collection',
                className: "btn-dark",
                text: 'Print Report',
                buttons: [{
                        extend: "excel",
                        className: "btn-dark"
                    },
                    {
                        extend: "print",
                        className: "btn-dark"
                    },
                ],
            }],
            order: [
                [0, 'asc']
            ],
            rowGroup: {
                dataSrc: [
                    'Department'
                ],
                startRender: function(rows, group, level, data) {
                    var all;
                    if (level === 0) {
                        top = group;
                        all = group;
                    } else if (level === 1) {
                        parent = top   group;
                        all = parent;
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[top]) {
                            return;
                        }
                    } else {
                        // if parent collapsed, nothing to do
                        if (!collapsedGroups[parent]) {
                            return;
                        }
                        all = top   parent   group;
                    }
    
                    var collapsed = !collapsedGroups[all];
                    //console.log('collapsed:', collapsed);
    
                    rows.nodes().each(function(r) {

                        r.style.display = collapsed ? 'none' : '';
                    });
                    //console.log('group:', group, level)
                 // loop all the rows in the group
                    var statusClass = '';
                    var counter = {red: 0, yellow: 0, green: 0 }; //initialize counter to set a status to the highest count to style the row with

                    rows.every(function ( rowIdx, tableLoop, rowLoop ) {
                    var data = this.data();

                    var node = this.node();

                    var today = moment().format("MM/DD/YYYY"); // "05/10/2021"
                    //console.log(today);

                    //console.log(JSON.stringify(data));


                    //var result = Object.keys(data).find(key => data[key] === today);
                    var result = Object.keys(data).find(key => typeof data[key] === 'string' amp;amp; data[key].startsWith(today)); // "Monday"
                    //console.log(result);

                    var todayStatus = result ? data[result   'Status'] : 'n/a'; 
                    //console.log(todayStatus);

                        if(todayStatus === "P" || todayStatus === "TW") {
                            counter.green  ;
                        }
                        if(todayStatus === "NR" || todayStatus === "TRV") {
                            counter.yellow  ;
                        }
                        if (todayStatus === "PTO" || todayStatus === "H") {
                            counter.red  ;
                        }
                    
                    console.log("Red Count: "   counter.red, "Green Count: "   counter.green, "Yellow Count: "   counter.yellow);

                    });
                    
                    /* table.columns().every( function () {
                        var data = this.data();
                        $('#mondayAppend').text(data.Monday);
                    } ); */
                    
                    var countTot = counter.green   counter.yellow   counter.red;
                    console.log(countTot);
                    var greenTotPerc = ((counter.green/countTot)*100).toFixed(2);
                    console.log("Green Status: "   greenTotPerc   "%");
                     
                                    
                    if( greenTotPerc >= 75.00 ){ 
                        statusClass = 'green';
                    } 
                    else if (greenTotPerc < 75.00 amp;amp; greenTotPerc > 50.00) {
                        statusClass = 'yellow';
                    } 
                    else if(greenTotPerc <= 50.00) {
                        statusClass = 'red';
                    }
                         
                    //Add category name to the <tr>.
                        return $('<tr/>').addClass(statusClass)
                        .append('<td colspan="12" style="text-align: left;">'   group   ' ('   rows.count()   ')</td>')
                        .attr('data-name', all)
                        .toggleClass('collapsed', collapsed);
                }
    
            }
        });
    
        //loadData();
    
        $('#myTable tbody').on('click', 'tr.dtrg-start', function() {
            var name = $(this).data('name');
            collapsedGroups[name] = !collapsedGroups[name];
            table.draw(false);
        });
    }); 
 h5{
text-align: center;
font-size: 40px;
}
.FilterStuff>div{float:none;}
.dataTables_wrapper .FilterStuff .dataTables_filter {float:left}
.title {
  position: relative;
  background-color: lightgrey;
  color: #fff;
  border-radius: 0px;
  padding: 20px;
  font-size: 150%;
  border: 1px solid black;
}
p {
border-bottom:1px solid #B7DDF2;
color:#666666;
font-size:12px;
margin-bottom:20px;
padding-bottom:10px;
}
span {
color:#666666;
font-size:12px;
margin-bottom:1px;

}
.btn{
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
border: 1px solid #B7DDF2;

}
.table th {
    text-align: center;
}
.table td{
    padding: 3px;
}
.dtrg-level-0::after {
 text-align: center;
}
.btn:hover{
color: #333333;
background-color: #e6e6e6;
}
th { font-size: 14px; }
td { font-size: 12px; text-align: center;}
div.container {
min-width: 980px;
margin: 0 auto;
}
.header {
padding: 10px;
text-align: center;
}

body {
font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}
div.dt-button-collection {
position: static;
}
table.dataTable tr.dtrg-group.green td {
background-color: #66b266 !important;
}
table.dataTable tr.dtrg-group.yellow td {
background-color: #ffff66 !important;
}
table.dataTable tr.dtrg-group.red td {
background-color: #ff6666 !important;
}
.green {
background-color: #66b266 !important;
}
.red {
background-color: #ff6666 !important;
}
.yellow {
background-color: #ffff66 !important;
} 
 <!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.7.0/css/buttons.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/rowgroup/1.1.2/css/rowGroup.bootstrap4.min.css"/>
 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/rowgroup/1.1.2/js/dataTables.rowGroup.min.js"></script>
<script src="https://momentjs.com/downloads/moment.min.js"></script>

  </head>
  <h5><strong>Test Report</strong></h5>
  <div class ="container">
            <table id="myTable" class="table table-bordered" cellspacing="0" width="100%">
                <thead class="thead-dark">
                    <tr>
                    <th>Department</th>
                    <th>Employee</th>
                    <th>Monday Status</th>
                    <th id="mondayAppend">Monday</th>
                    <th>Tuesday Status</th>
                    <th id="tuesdayAppend">Tuesday</th>
                    <th>Wednesday Status</th>
                    <th id="wednesdayAppend">Wednesday</th>
                    <th>Thursday Status</th>
                    <th id="thursdayAppend">Thursday</th>
                    <th>Friday Status</th>
                    <th id="fridayAppend">Friday</th>
                    </tr>
                </thead>
            </table>
            </div>
            <body>
</body>
</html>

Комментарии:

1. ВАЖНОЕ ПРИМЕЧАНИЕ . Если вы не можете просмотреть какие-либо элементы в таблице данных, в объекте данных может не быть дат в течение текущей недели, так как я создал плагин поиска/фильтрации, чтобы отображать данные только в тех случаях, когда их даты совпадают с датами текущей недели

Метки: