We Keep Coding

JavaScript data-toogle

I have a table in html and want to replace that table with another table when a button is pressed and again back to first table when second button is pressed. i tried this roughly in a html file and it is working but when same logic i applied in my django project to toggle table data it is not working. Below is the JS ansd CSS code.
CSS
table.hidden {
display: none;
}
JavaScript
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
The html table and buttons code is as follows
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
{% for x,y,z in sum_list %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
{% for x,y,z in month_sum %}
<tr>
<td scope="row"></td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
{% endfor %}
</tbody>
</table>
The table with id 01 will be default table and will be visible when page is load. The table with id 02 will be shown when button with id b1 is pressed and table with id 03 with button having id b2. please help me solving this.

Here's your original code, just removed the spare </div> tag, it seems to be working though. Can you tell what the problem is? As mentioned in my comment above, showing and hiding DIV tags would be a far better approach, without the need of the redundant third table.
document.getElementById("b1").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"02"
).innerHTML;
});
document.getElementById("b2").addEventListener("click", function() {
document.getElementById("01").innerHTML = document.getElementById(
"03"
).innerHTML;
});
table.hidden {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<button id="b1" class="btn btn-outline-success btn-xs mb-2 ml-5" style="font-size: 0.8em;">Daily Sale </button>
<button id="b2" class="btn btn-outline-success btn-xs mb-2 ml-2" style="font-size: 0.8em;">Monthly</button>
<table id="01" class="table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="02" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">Customer</th>
<th scope="col">Quantity (MT)</th>
<th scope="col">Bulkers</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>
<table id="03" class="hidden table table-striped table-bordered table-hover table-sm ml-auto css-serial">
<thead class="thead-dark">
<tr>
<th scope="col">S.no.</th>
<th scope="col">ABC</th>
<th scope="col">XYZ</th>
<th scope="col">ASD</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
<tr>
<td scope="row">2</td>
<td>{{x}}</td>
<td>{{y}}</td>
<td>{{z}}</td>
</tr>
</tbody>
</table>

Here is a simple code to show you "my" method to do this
const btChangeTable = document.getElementById('bt-Change-Table')
, AllTableDiv = document.getElementById('All-tables')
, TableActiv = { current:0, classList: [ 'table1', 'table2', 'table3' ] }
;
btChangeTable.onclick = () =>
{
TableActiv.current = ++TableActiv.current % TableActiv.classList.length
AllTableDiv.className = TableActiv.classList[ TableActiv.current ]
}
table {
margin : 1em;
border-collapse : collapse;
font-family : Arial, Helvetica, sans-serif;
font-size : 14px;
}
td {
border : 1px solid gray;
text-align : center;
padding : .7em 0;
width : 2em;
}
#All-tables.table1 > #Table-2,
#All-tables.table1 > #Table-3 { display : none }
#All-tables.table2 > #Table-1,
#All-tables.table2 > #Table-3 { display : none }
#All-tables.table3 > #Table-1,
#All-tables.table3 > #Table-2 { display : none }
<button id="bt-Change-Table">Change Table view</button>
<div id="All-tables" class="table1">
<table id="Table-1">
<caption> table 1 - Daily Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>e</td> <td>f</td> <td>g</td> <td>h</td> </tr>
</tbody>
</table>
<table id="Table-2">
<caption> table 2 - Monthly Sale </caption>
<tbody>
<tr> <td>i</td> <td>j</td> <td>k</td> <td>l</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
<table id="Table-3">
<caption> table 3 - Year Sale </caption>
<tbody>
<tr> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </tr>
<tr> <td>m</td> <td>n</td> <td>o</td> <td>p</td> </tr>
</tbody>
</table>
</div>

selector column table jquery

Hello everyone I hope you can help me
I have the code that I need to do this by column. It currently just lets me select a number, not all.
I have tried in various ways, but I still can not find the solution.
Thank you
$(document).ready(function() {
$(".row_number").bind("click", function(e) {
if ($(this).css("background-color") != "rgb(26, 179, 148)") {
$(this).css("background-color", "rgb(26, 179, 148)");
$(this).css("color", "white");
} else {
$(this).css("background-color", "rgb(255,255,255)");
$(this).css("color", "#676a6c");
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

Assuming:
In the first column the numbers 6 and 5 are shown if you click on one of them you select [it] - what I need is that it only lets me select a single number per column, that is to say that in that column it only lets me select the 6 or the 5
This also assumes that
you want to keep your existing HTML
(see #ksav's answer for an alternative that uses data- attributes to group similar data)
When you select/click one, it needs to turn off any others. This is much easier using classes than setting colours directly:
$(".row_number").on("click", function(e) {
$(".row_number").removeClass("selected");
$(this).addClass("selected");
})
this will work for all .row_number, but your requirement is / appears to be within a single column, which is a bit trickier:
You need to find which column has been clicked, then remove the class from only cells in that column:
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
Giving:
$(document).ready(function() {
$(".row_number").on("click", function(e) {
var col = $(this).closest("td").index() + 1;
$("#table-exam tr td:nth-child(" + col + ")").removeClass("selected");
$(this).addClass("selected");
})
})
.selected { background-color: rgb(26,179,148); color:white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number" data-number="1" colspan="2">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number" colspan="2">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number">3</td>
</tr>
</table>

$(document).ready(function() {
$(".row_number").bind("click", function(e) {
const type = $(this).data('type')
const $sameOfType = $('[data-type="' + type + '"]')
$sameOfType.removeClass('selected')
$(this).addClass('selected')
})
})
.selected {
background-color: rgb(26, 179, 148);
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table-exam" border="1">
<tr>
<th class="text-center" colspan="11">ESCALA DE COMA DE GLASGOW </th>
</tr>
<tr>
<th class="text-center" colspan="4">Respuesta Motora</th>
<th class="text-center" colspan="5">Respuesta Verbal</th>
<th class="text-center" colspan="3">Apertura Ocular</th>
</tr>
<tr>
<td width="50" class="text-center" colspan="2">OBEDECE</td>
<td class="text-center row_number " data-number="1" colspan="2" data-type="motora">6</td>
<td class="text-center" colspan="3">ORIENTADO</td>
<td class="text-center row_number " colspan="2" data-type="verbal">5</td>
<td class="text-center">EXPONTANEA</td>
<td class="text-center row_number " data-type="ocular">4</td>
</tr>
<tr>
<td class="text-center" colspan="2">LOCALIZA</td>
<td class="text-center row_number" data-number="1" colspan="2" data-type="motora">5</td>
<td class="text-center" colspan="3">DESORIENTADO</td>
<td class="text-center row_number" colspan="2" data-type="verbal">4</td>
<td class="text-center">A LA VOZ</td>
<td class="text-center row_number" data-type="ocular">3</td>
</tr>
</table>

Show in jQuery seach the closest TR that was a header from data

This is my fiddle: https://jsfiddle.net/qpouvped/2/
What I want to do is display the header with the corresponding alphabetical letter of the searched name. But I had no success!
If you see the code and look for "Nanana", I want to display this line, and the gray header C, of which "Nanana" belongs.
Can anyone help me with this?
My HTML:
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td >137418</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td >122222</td>
<td >Nonono Nonono Nonono</td>
<td >11225566</td>
</tr>
<tr>
<td >133</td>
<td >Nanana Nonono Nonono</td>
<td >11225566</td>
</tr>
</tbody>
</table>
My jQuery:
$(".filter-nome").keyup(function(){
var value = $(this).val();
$(".lista-certidoes tbody tr").each(function(index){
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) != 0) {
$(this).hide();
} else {
$(this).show();
//$(this).parent('tbody').next('td.cab_interno').show();
}
});
});

The alphabetic heading is a previous sibling of the closest tr, so you want to use .prevAll(). These are returned in order of distance from the current row, so the first one will be the heading for that group.
You also shouldn't process the heading rows in the .each() loop. Just hide everything first, and show the data rows that match, along with their headings.
$(".filter-nome").keyup(function() {
var value = $(this).val();
if (value == "") {
// Show everything when filter is empty
$(".lista-certidoes tbody tr").show();
return;
}
$(".lista-certidoes tbody tr").hide();
$(".lista-certidoes tbody tr:not(.subtitulo)").each(function(index) {
$row = $(this);
var id = $row.find("td:nth-child(2)").text();
if (id.indexOf(value) == 0) {
$row.show();
$row.closest("tr").prevAll(".subtitulo").first().show();
}
});
});
.lista-certidoes {
.cab_interno {
background-color: #333;
color: #fff;
text-align: center;
padding: 8px;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.0.4/popper.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-12 col-lg-4">
<label for="nome">Nome</label>
<input type="text" class="form-control filter-nome" value="">
</div>
</div>
<table class="table table-stripped table-bordered lista-certidoes">
<thead>
<tr>
<th>Nº</th>
<th>Nome</th>
<th>Nº PROTOCOLO</th>
</tr>
</thead>
<tbody>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">A</td>
</tr>
<tr>
<td>137418</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">B</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr class="subtitulo">
<td colspan="3" class="cab_interno">C</td>
</tr>
<tr>
<td>122222</td>
<td>Nonono Nonono Nonono</td>
<td>11225566</td>
</tr>
<tr>
<td>133</td>
<td>Nanana Nonono Nonono</td>
<td>11225566</td>
</tr>
</tbody>
</table>

sorting doesn't work, datatable in bootstrap

I've got a problem with sorting my table. When I click on my table header, my table data don't sort. Even with using the "show 10/25/50 entries" and also the search bar.
I tried very long but seems not working. Here is my code. I don't is sit the plugin problem or my coding problem. I've tried many ways from the internet but all dont work. I'm running xampp locally with internet connection.
$(".contentContainer").css("min-height", $(window).height());
$("textarea").css("height", $(window).height() - 110);
$("textarea").keyup(function() {
$.post("updatediary.php", {
diary: $("textarea").val()
});
});
$(document).ready(function() {
$('#example').DataTable();
});
.navbar-brand {
font-size: 1.8em;
}
#topContainer {
background-image: url("background.jpg");
height: 400px;
width: 100%;
background-size: cover;
}
#topRow {
margin-top: 80px;
text-align: center;
}
#topRow h1 {
font-size: 300%;
}
.bold {
font-weight: bold;
}
.marginTop {
margin-top: 30px;
}
.center {
text-align: center;
}
.title {
margin-top: 100px;
font-size: 300%;
}
#footer {
background-color: #B0D1FB;
padding-top: 70px;
width: 100%;
}
,
marginBottom {
margin-bottom: 30px;
}
.appstoreImage {
width: 250px;
}
.table {
table-layout: fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<body data-spy="scroll" data-target=".navbar-collapse">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="collapse navbar-collapse">
<ul class= "navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<td>Date</td>
<th>Subject</th>
<td>Details</td>
<td>Status</td>
<td>ticket id</td>
<td>Actions</td>
</tr>
</thead>
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tbody method="post">
<td class="col-md-1"><?php print_r($date); ?></td>
<td class="col-md-1"><?php print_r($subject); ?></td>
<td class="col-sm-2"><?php print_r($detail); ?> </td>
<td class="col-md-1"><?php print_r($status); ?></td>
<td class="col-md-1"><?php echo $tickid ; ?></td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tbody>
<?php } ?>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
</body>

Change td elements to th in thead
Take tbody out of while loop
Add table row tr element inside while loop to enclose table cells

I think you must clean up your code a little bit like #Gyrocode.com said. Code below works.
$(document).ready(function() {
$('#example').DataTable();
});
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- start to loop here -->
<tr>
<td class="col-md-1">10/04/2017</td>
<td class="col-md-1">ABC</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">1546546</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">11/04/2017</td>
<td class="col-md-1">DEF</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5646156</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">12/04/2017</td>
<td class="col-md-1">ZXY</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">454658</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">OPQ</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">56446</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">ggg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtr</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">2577</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rtfe</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7254</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">rggthg</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">7527</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">frgbf</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">52727</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">grege</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<tr>
<td class="col-md-1">13/04/2017</td>
<td class="col-md-1">gtehtehte</td>
<td class="col-sm-2">blablabla</td>
<td class="col-md-1">Oke</td>
<td class="col-md-1">5872</td>
<td class="col-md-1"><a href="#" id="submit">Details</td>
</tr>
<!-- end loop -->
<tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>
Cleanup you your code:
$(document).ready(function() {
$('#example').DataTable();
});
<div class="container">
<div class="navbar-header">
<a class="navbar-brand">IT Services</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav nav pull-right">
<li class="active">Main</li>
<li>New Input</li>
<li>Log Out</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="jumpbotron">
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Date</th>
<th>Subject</th>
<th>Details</th>
<th>Status</th>
<th>ticket id</th>
<th>Actions</th>
</tr>
</thead>
<tbody method="post">
<?php
while($row=mysqli_fetch_array($result))//while look to fetch the result and store in a array $row.
{
$date=$row[2];
$subject=$row[3];
$detail=$row[4];
$status=$row[5];
$tickid=$row[0];
?>
<tr>
<td class="col-md-1">
<?php print_r($date); ?>
</td>
<td class="col-md-1">
<?php print_r($subject); ?>
</td>
<td class="col-sm-2">
<?php print_r($detail); ?> </td>
<td class="col-md-1">
<?php print_r($status); ?>
</td>
<td class="col-md-1">
<?php echo $tickid ; ?>
</td>
<td class="col-md-1"><a href="detail.php?id=<?php echo $tickid; ?>" name="submit" id="submit" class="btn btn-sm btn-success">Details</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.13/js/dataTables.bootstrap4.min.js"></script>

infdig Infinite $digest Loop in table

I am implementing a table with CSS which is changed in each row but one td of table contains another table. I have implemented it like this :
HTML code :
<table width="100%" class="table">
<thead>
<tr>
<th style="width: 11%">Location</th>
<th><div>
<table class="table" style="table-layout: fixed;width: 100%; margin-bottom: 0px;">
<tr>
<th style="width: 12%">Col1</th>
<th style="width: 12%">Col2</th>
<th style="width: 12%">Col3</th>
<th style="width: 11%">Col4</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tbody style="overflow-y: auto; max-height: 200px;">
<tr data-ng-repeat="Loc in LocationList">
<td style="width: 11%;">{{Loc.locationName}}</td>
<td><div>
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class="(checkEvenOrOdd()) ? 'odd' : 'even'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
JS code:
$scope.evenOrOdd = true;
$scope.checkEvenOrOdd = function()
{
if($scope.evenOrOdd==true)
{
$scope.evenOrOdd=false;
return !$scope.evenOrOdd;
}
else
{
$scope.evenOrOdd=true;
return !$scope.evenOrOdd;
}
};
This code gives me correct output but after clicking one any link on the page it gives me this error
Watchers fired in the last 5 iterations: [["(checkEvenOrOdd()) ? 'odd' : 'even';
I searched for this error and tried some code changes but not able to solve it. Please note it is not just to check even or odd row. There is some ordering in rows. Kindly help.

I would instead use ng-class-even/ng-class-odd https://docs.angularjs.org/api/ng/directive/ngClassEven:
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
Or alternatively it can be done using css but this won't work in IE8:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}