We Keep Coding

How to add a new "top" row to a table in jquery without deleting the other rows

First off - I did look at How to replace innerHTML of a div using jQuery? and that's great if I want to replace the fill tag <tr> in this case.
I'm trying to make a dynamic table that is loading off of an API for crypto-mining. Whenever there are new blocks hit, I want to add them to the top of the table and delete any over 100 (Only 100 <tr> max).
Right now, what I'm doing is:
document.getElementById('blockList').innerHTML += "<tr><td>" ...
This adds rows to the top of:
<table class="table1">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Time (Local)</th>
<th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
<th>Height</th>
<th>Effort</th>
<th>Found By</th>
<th>Pool/Solo</th>
<th>Status</th>
</tr>
</thead>
<tbody id="blockList"></tbody>
</table>
The problem with the way I'm doing it now is that it clears the entire table:
document.getElementById("blockList").innerHTML = "";
...this causes a bit of flashing, or "twitching" as I prefer to call it, while the data reloads everytime my setInterval() is called (about every 10 seconds).
My first hope is that jQuery will minimize or remove the flashing. Here's where I get hung up - the link above is to replace the tag with new information with either:
$("#blockList").html("STUFF TO REPLACE EXISTING STUFF");
//or
$("#blockList").text("STUFF TO REPLACE EXISTING STUFF");
text() won't work in my case because I'm using the innerHTML += to add the tags as well...
document.getElementById('blockList').innerHTML += "<tr><td>" + i + "</td><td>" + displayBlocks[i]["timestamp"] + "</td><td class='collapsable'>" + displayBlocks[i]["hash"] + "</td><td class='collapsablePlaceholders'>|</td><td>" + displayBlocks[i]["height"] + "</td><td style='color:" + displayBlocks[i]["luckColor"] + "'>" + displayBlocks[i]["luck"] + "</td><td>" + displayBlocks[i]["worker"] + "</td><td>" + displayBlocks[i]["ps"] + "</td><td>" + displayBlocks[i]["status"] + "</td></tr>";
If this is possible, then removing the rows > 100 will be easy (I hope).
So - all this to say:
Is it possible to ADD information to an id/tag in jQuery without deleting all of the existing data in it. Basically the equivalent to .innerHTML += specifically the += part.

Here's some examples on how to add to top, add to bottom, remove from top and remove from bottom using JQ
let n = 0
$('button').click(function() {
n++
let fakerow = `<tr><td>${n}</td><td>12:34</td><td>123123123</td><td>10</td><td>??</td><td>Fred</td><td>Solo</td><td>available</td></tr>`;
let action = $(this).data('action');
if (action == 'add-top') {
$('#blockList').prepend($(fakerow))
} else if (action == 'add-bottom') {
$('#blockList').append($(fakerow))
} else if (action == 'remove-top') {
$('#blockList tr').first().remove()
} else if (action == 'remove-bottom') {
$('#blockList tr').last().remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table1">
<thead class="thead-light">
<tr>
<th>#</th>
<th>Time (Local)</th>
<th class='collapsableHeader' onclick='collapseTable()'>Hash</th>
<th>Height</th>
<th>Effort</th>
<th>Found By</th>
<th>Pool/Solo</th>
<th>Status</th>
</tr>
</thead>
<tbody id="blockList"></tbody>
</table>
<hr>
<button data-action='add-top'>Add row to top</button>
<button data-action='add-bottom'>Add row to end</button>
<hr>
<button data-action='remove-top'>Remove row from top</button>
<button data-action='remove-bottom'>Remove row from end</button>

Iterating through JSON object to display a public holidays table

I am trying to display a table with a list of public holidays. At the moment I have a table row with the holiday name on the left and date on the right.
The data which appears is from the final array of the JSON object only where I want to display all of the public holidays.
html of table:
<table class="table table-striped" >
<tbody class="summT">
<div class="resptext">
<tr>
<td align="left" id="txtHolidayName">
</td>
<td class="fontGrey" id="txtHolidayDate">
</td>
</tr>
</div>
</div>
</tbody>
</table>
I have the following code within the success block of the AJAX call to the api:
.............
result.data.response.holidays.forEach(datepoint => {
$dateIterate = new Date(datepoint.date.iso);
$('#txtHolidayDate').html($dateIterate.toDateString());
$('#txtHolidayName').html(datepoint.name);
})
Any ideas are gratefully appreciated. Thank you so much.

I think what you are going to need to do is have template HTML within your loop that you populate with each iteration, and then inject each copy of the filled out template into the table HTML:
HTML:
<table class="table table-striped" >
<tbody class="summT">
<div id="holidates" class="resptext">
</div>
</tbody>
</table>
JavaScript loop:
result.data.response.holidays.forEach(datepoint => {
$('#holidates').append('<tr>\n' +
'<td align="left" >' + datepoint.name + '</td>' +
'<td class="fontGrey" >' + new Date(datepoint.date.iso).toDateString() + '</td>\n' +
'</tr>');
});

Delete contents of table and replace using JavaScript

I am trying to delete the contents of a upon click and repopulate it based on what they are clicking.
I was able to succesfully modify the with the new title, but I keep running into issues when I want to delete the contents of and replace it with a new one. I've tried doing the removeChild(), the replaceChild(), as well as innerHTML (which doesn't work based on documentation).
How would I successfully on a click, remove the existing table and repopulate it with HTML generated from JavaScript.
HTML:
<table id="captable" border = "5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<div id="table-entries">
<tr align = "center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</div>
</tbody>
</table>
JavaScript:
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner;
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
//Not sure what to do here so that I clear the existing table, and appened the new tBodyInner html as a replacement
modal.style.display = "block";
}

First of all, you have to get rid of <div id="table-entries">, this is not a valid location for a DIV.
Second, you need to initialize the variable tBodyInner to an empty string.
Finally, you can use $("#tbodyId").html() to fill in the HTML of the table body.
function(evt) {
$("#table-title").html("<h2><b>" + Title + ":</b><i> " + Subtitle + "</i></h2>");
var tBodyInner = "";
for (i of dataPoints) {
console.log("data" + i);
var data = json.Data[i];
tBodyInner += ("<tr align = \"center\">");
tBodyInner += ("<td><a target=\"_blank\" href=" + data.cap_url + ">" + data.capNumber + "</a></td>");
tBodyInner += ("</tr>");
}
$("#tBodyId").html(tBodyInner);
modal.style.display = "block";
}
<table id="captable" border="5" width="100%" cellpadding="4" cellspacing="5">
<thead>
<tr>
<th colspan="100%">
<div id="table-title"></div>
</th>
</tr>
<th>Input Date</th>
<th>Requested Date</th>
</thead>
<tbody id="tbodyid">
<tr align="center">
<td>3/27/2018</td>
<td>6/12/2018</td>
</tr>
</tbody>
</table>

Where do you exactly change the html inside the element? You are setting the variable tBodyInner, but never using it. You should use it like you updated the title above, for example:
$("#table-entries").html(tBodyInner);
Also the parentheses around the string concats on the right side are redundant. No harm, but no effect either.

Table search that works with Laravel Pagination

I created a table in Laravel with pagination and then added search functionality to it however when I try and search it only searches the current page. How would I fix this so that I can search the information that is on all the pages of the table? I am new to Laravel :)
Table code -
<input type="text" id="search" placeholder="Type to search">
<table id="table">
<thead>
<tr>
<th data-field="id">Ident</th>
<th data-field="name">Name</th>
</tr>
</thead>
<tbody>
#foreach ($airports as $airport)
<tr>
<td>{{ $airport->ident }}</td>
<td>{{ $airport->name }}</td>
</tr>
#endforeach
</tbody>
</table>
#include('pagination.default', ['paginator' => $airports])
Javascript -
<script type="text/javascript">
var $rows = $('#table tr');
$('#search').keyup(function() {
var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
$rows.show().filter(function() {
var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
return !~text.indexOf(val);
}).hide();
});
</script>

In laravel if you use pagination it will only load those specific records set in limit.
->paginate(15)
When you click the next page button at that time only new set of records will be loaded.So only you search is working for first page alone.
If you want this to work out you can make a ajax call to the controller where the page is loading like this
use App/Airport;
public function getAirportList(Request $request,Airport $airport){
if ($request->ajax()) {
$getResult = $airport->where(function($query){
$query->where('ident',$request->search)
->orWhere('name',$request->search);
});
return view('airports', compact('airports'));
}
$airports = $airport->paginate(10);
return view('airports',compact('airports'));
}

jQuery Collapser hide or show content inside the DIV

My question is related with "jQuery – Collapser plugin" ( http://www.aakashweb.com/jquery-plugins/collapser/ ):-
I am using the following script to hide or show content inside the DIV with CLASS name 'shrink'. It works fine.
<script type="text/javascript">
$(document).ready(function() {
$('.shrink').collapser({
mode: 'words',
truncate: 80,
ellipsis: ' ... '
});
});
</script>
But, In the BODY I use a javascript to print some content inside DIV with a table to hide or show content inside <tr><td><div class="shrink"></div></td></tr>. Now, hide or show content does not works. (sample script is given below, Note: There is no line break. It is just for explanation only.)
<script type="text/javascript">
var dataTable = document.getElementById('Result');
var content = "<table class='tablesorter'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td><div class='shrink'>Some long content....</div></td>
</tr>
</tbody>
</table>";
dataTable.innerHTML = content;
</script>
<div id="Result"></div>
Also, I tried with a simple statement as below. It does not works.
var content = "<div class='shrink'>Some long content....</div>";

you have to be careful with line breaks in javascript strings. note how syntax highlighting stops on the second line. you have to either escape them or concat them.
escaping..
var content = "<table class='tablesorter'>\
<thead>\
<tr>\
....
</table>";
Note that if you escape thelinebreaks, there can't be any trailing spaces after the \.
concatting..
var content = "<table class='tablesorter'>"+
"<thead>"+
"<tr>"+
....
"</table>";

<script type="text/javascript">
function shrink() {
$('.shrink').collapser({
mode: 'words',
truncate: 80,
ellipsis: ' ... '
});
}
function display () {
var dataTable = document.getElementById('Result');
var content = "<table class='tablesorter'>
<thead>
<tr>
<th>ID</th>
<th>Title</th>
</tr>
</thead>
<tbody>
<tr>
<td>123</td>
<td><div class='shrink'>Some long content....</div></td>
</tr>
</tbody>
</table>";
dataTable.innerHTML = content;
}
setTimeout(function(){ display(); shrink(); }, 1000);
</script>
<div id="Result"></div>