[DATATABLE] CodePen Home dataTables conditional row and cell styling (ok)
https://codepen.io/RedJokingInn/pen/jKzPpQ
C:\xampp\htdocs\wpclidemo\index.php
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - dataTables conditional row and cell styling</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css">
<style>
body {
margin: 2em;
}
.lightRed {
background-color: #ff8080 !important
}
.lightRed a {
color: #fff;
font-weight: bold;
}
.red {
background-color: #f00;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<a class="btn btn-success" style="margin-bottom:20px;" href="https://codepen.io/collection/XKgNLN/" target="_blank">Other examples on Codepen</a>
<div id="example_wrapper" class="dataTables_wrapper form-inline dt-bootstrap no-footer">
<div class="row">
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered dataTable no-footer" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;">
<thead>
<tr role="row">
<th class="sorting_asc" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-sort="ascending" aria-label="Order: activate to sort column descending" style="width: 95px;">Order</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Description: activate to sort column ascending" style="width: 245px;">Description</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Deadline: activate to sort column ascending" style="width: 130px;">Deadline</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Status: activate to sort column ascending" style="width: 103px;">Status</th>
<th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Amount: activate to sort column ascending" style="width: 120px;">Amount</th>
</tr>
</thead>
<tbody>
<tr class="lightRed odd" role="row">
<td class="sorting_1">1</td>
<td>Alphabet puzzle</td>
<td>2016/01/15</td>
<td class="red"><a href="#">Done</a></td>
<td data-order="1000">€1.000,00</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">2</td>
<td>Layout for poster</td>
<td>2016/01/31</td>
<td>Planned</td>
<td data-order="1834">€1.834,00</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">3</td>
<td>Image creation</td>
<td>2016/01/23</td>
<td>To Do</td>
<td data-order="1500">€1.500,00</td>
</tr>
<tr class="lightRed even" role="row">
<td class="sorting_1">4</td>
<td>Create font</td>
<td>2016/02/26</td>
<td class="red">Done</td>
<td data-order="1200">€1.200,00</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">5</td>
<td>Sticker production</td>
<td>2016/02/18</td>
<td>Planned</td>
<td data-order="2100">€2.100,00</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">6</td>
<td>Glossy poster</td>
<td>2016/03/17</td>
<td>To Do</td>
<td data-order="899">€899,00</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">7</td>
<td>Beer label</td>
<td>2016/05/28</td>
<td>Confirmed</td>
<td data-order="2499">€2.499,00</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">8</td>
<td>Shop sign</td>
<td>2016/04/19</td>
<td>Offer</td>
<td data-order="1099">€1.099,00</td>
</tr>
<tr role="row" class="odd">
<td class="sorting_1">9</td>
<td>X-Mas decoration</td>
<td>2016/10/31</td>
<td>Confirmed</td>
<td data-order="1750">€1.750,00</td>
</tr>
<tr role="row" class="even">
<td class="sorting_1">10</td>
<td>Halloween invite</td>
<td>2016/09/12</td>
<td>Planned</td>
<td data-order="400">€400,00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
<script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
<script id="rendered-js">
$(document).ready(function() {
// DataTable initialisation
$('#example').DataTable({
"paging": true,
"autoWidth": true,
"columnDefs": [{
"targets": 3,
"render": function(data, type, full, meta) {
var cellText = $(data).text(); //Stripping html tags !!!
if (type === 'display' && (cellText == "Done" || data == 'Done')) {
var rowIndex = meta.row + 1;
var colIndex = meta.col + 1;
$('#example tbody tr:nth-child(' + rowIndex + ')').addClass('lightRed');
$('#example tbody tr:nth-child(' + rowIndex + ') td:nth-child(' + colIndex + ')').addClass('red');
return data;
} else {
return data;
}
}
}]
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
Previous[DATATABLE] DataTables - Column Search (ok)Next[DATATABLE] DataTables example of styling Excel export(ok)
Last updated
