Issue
I have the following code made to highlight a table row. It works just fine for the part of the table that is displayed, but to reproduce the error do the following on my code snippet.
- Click an entry on page 1 of the table
- Go to page 2
- Click any entry
- Go back to page 1
The highlighted row on page one should not be highlighted anymore because of this line
$("tr").removeClass("active1"); //remove active1 from all tr's so only
but it seems that jQuery is not getting entries from the page 1 when you are on page 2. The same error is present through table sorting, which is what I am really concerned with, but the problem is mostly simply reproduced by going to a different page.
How do I fix this issue?
What I Tried
Using Javascript with no jQuery. I used this instead of the jQuery bits, but have the same issue.
document.querySelectorAll('table tr').forEach((tr) => { tr.classList.remove('active1'); tr.classList.remove('sortActive'); });
`
$(document).ready(function(){
var table = document.getElementById('data');
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) { //bind e to only when the body of the table is clicked (<tbody>)
e = e || window.event; //create event e
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") { //get which "<tr>" was clicked
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td"); //get table data when <tr> is clicked
//highlight row onclick
$("tr").removeClass("sortActive"); //remove SortActive from all tr's so only click will be highlighted
$("tr").removeClass("active1"); //remove active1 from all tr's so only click will be highlighted
target.classList.toggle("active1") //highlight clicked
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
}
$('#data').DataTable( {
dom: 'lrtip',
"pagingType": "full_numbers",
"order": [[ 0, "asc" ]],
//see this https://legacy.datatables.net/usage/columns
});
$("#permits th").click(function() {
//$("#permits tr").removeClass("sortActive"); //remove SortActive from all tr's so only click will be highlighted
$('.active1').toggleClass('sortActive')
$("#permits tr").removeClass("active1"); //remove active1 from all tr's so only click will be highlighted
});
});
table tr.active1 {
font-weight:bold;
//color:grey;
background-color:#b3ffe0 !important;
}
table tr.sortActive {
font-weight:bold;
background-color:#b3ffe0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<table id="data">
<thead>
<tr><th>Header 1</th></tr>
</thead>
<tbody>
<tr> <td>Row 1 </td></tr>
<tr> <td>Row 2</td></tr>
<tr> <td>Row 3 </td></tr>
<tr> <td>Row 4</td></tr>
<tr> <td>Row 5</td></tr>
<tr> <td>Row 6</td></tr>
<tr> <td>Row 7</td></tr>
<tr> <td>Row 8</td></tr>
<tr> <td>Row 9</td></tr>
<tr> <td>Row 10</td></tr>
<tr> <td>Row 11</td></tr>
<tr> <td>Row 12</td></tr>
<tr> <td>Row 13</td></tr>
<tr> <td>Row 14</td></tr>
<tr> <td>Row 15</td></tr>
<tr> <td>Row 16</td></tr>
<tr> <td>Row 17</td></tr>
<tr> <td>Row 18</td></tr>
</tbody>
</table>
Solution
I was finally able to fix this by change
$("tr").removeClass("sortActive");
$("tr").removeClass("active1");
to
$("Data").DataTable().$("tr").removeClass("sortActive");
$("Data").DataTable()$("tr").removeClass("active1");
$(document).ready(function(){
var table = document.getElementById('data');
var tbody = table.getElementsByTagName("tbody")[0];
tbody.onclick = function (e) { //bind e to only when the body of the table is clicked (<tbody>)
e = e || window.event; //create event e
var data = [];
var target = e.srcElement || e.target;
while (target && target.nodeName !== "TR") { //get which "<tr>" was clicked
target = target.parentNode;
}
if (target) {
var cells = target.getElementsByTagName("td"); //get table data when <tr> is clicked
//highlight row onclick
$('#data').DataTable().$("tr").removeClass("sortActive"); //remove SortActive from all tr's so only click will be highlighted
$('#data').DataTable().$("tr").removeClass("active1"); //remove active1 from all tr's so only click will be highlighted
target.classList.toggle("active1") //highlight clicked
for (var i = 0; i < cells.length; i++) {
data.push(cells[i].innerHTML);
}
}
}
$('#data').DataTable( {
dom: 'lrtip',
"pagingType": "full_numbers",
"order": [[ 0, "asc" ]],
//see this https://legacy.datatables.net/usage/columns
});
$("#permits th").click(function() {
//$("#permits tr").removeClass("sortActive"); //remove SortActive from all tr's so only click will be highlighted
$('.active1').toggleClass('sortActive')
$("#permits tr").removeClass("active1"); //remove active1 from all tr's so only click will be highlighted
});
});
table tr.active1 {
font-weight:bold;
//color:grey;
background-color:#b3ffe0 !important;
}
table tr.sortActive {
font-weight:bold;
background-color:#b3ffe0 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.11.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.11.4/css/jquery.dataTables.min.css">
<table id="data">
<thead>
<tr><th>Header 1</th></tr>
</thead>
<tbody>
<tr> <td>Row 1 </td></tr>
<tr> <td>Row 2</td></tr>
<tr> <td>Row 3 </td></tr>
<tr> <td>Row 4</td></tr>
<tr> <td>Row 5</td></tr>
<tr> <td>Row 6</td></tr>
<tr> <td>Row 7</td></tr>
<tr> <td>Row 8</td></tr>
<tr> <td>Row 9</td></tr>
<tr> <td>Row 10</td></tr>
<tr> <td>Row 11</td></tr>
<tr> <td>Row 12</td></tr>
<tr> <td>Row 13</td></tr>
<tr> <td>Row 14</td></tr>
<tr> <td>Row 15</td></tr>
<tr> <td>Row 16</td></tr>
<tr> <td>Row 17</td></tr>
<tr> <td>Row 18</td></tr>
</tbody>
</table>
Answered By - bart cubrich
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.