Develop Reference

How do I make an HTML table have pagination without a bootstrap?

I need to make my table have pagination. I am developing using React.js and using a simple <table> to display information that is being fetched.
The table uses mapping to dynamically grow when new information is generated through the UI. Currently, the table is just simply <table> tag that uses some CSS for styling. I would like to limit the number of rows to 10, and have pagination at the bottom for when there are more than 10 rows of data.
How can I achieve this?
<div className="app-container">
<table>
<thead>
<tr>
<th>Loan ID</th>
<th>Owner</th>
<th>Amount (R)</th>
<th>Rate (%)</th>
<th>Term (Months)</th>
<th>Start Date</th>
<th>End Date</th>
</tr>
</thead>
<tbody>
{Tokens.map((token) => (
<tr>
<td>{token[0]}</td>
<td>{token[1]}</td>
<td>{token[2]}</td>
<td>{token[3]}</td>
<td>{token[4]}</td>
<td>{token[5]}</td>
<td>{token[6]}</td>
</tr>
))}
</tbody>
</table>
</div>

Why are my Bootstrap data table column heading sort icons not displaying?

I have a Bootstrap 4 data table, and sorting the rows by clicking the column headings is working fine, but the little up and down facing triangle icons are not appearing. I've tried both thead-dark and thead-light classes so I don't think the problem is the color.
Here is a sample of the HTML with which I create the table (this is using the Rails ERB templating system that substitutes my text for the table_id and col_sort_tooltip variables).
<div class="table-responsive data-table-div" >
<table id="<%= table_id %>" class="data-table table thead-dark table-striped">
<thead class="thead-dark" title="<%= col_sort_tooltip %>" alt="<%= col_sort_tooltip %>" data-toggle="tooltip" data-placement="bottom">
<tr>
<th scope="col">Title</th>
<th scope="col">Performer</th>
<th scope="col">Rights Admin</th>
<th scope="col" class="text-center">Listen</th>
</tr>
</thead>
Where do you suggest I look to fix this?

Angular js inside of an ng-if

I know this is not how the code should be structured but I am limited. I am trying to include a datatable inside angular ng-if section. When I take off the ng-if statement the js runs fine. I am looking for ways around this where it works. I have tried to move the js outside of the ng-if, but then the datatable doesn't work. Any hint in the right direction would be helpful. Thanks.
<div ng-if="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>

ng-if will create a child scope which is different from your controller scope. Try to use ng-show instead
<div ng-show="test">
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
<!-- Results table -->
<table id="example2" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>Account</th>
<th>Created On</th>
<th>Table ID</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2011-04-28 13:32:07</th>
<th>Mortgage</th>
<th>Edit</th>
</tr>
<tr ng-click="displayStatementToggle()">
<th>123</th>
<th>2016-04-18 14:36:07</th>
<th>Monthly</th>
<th>Edit</th>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#example2').DataTable();
});
</script>
</div>

ng-if has its own scope, so the functions you are calling are undefined inside of it.
ng-show is a possible solution, but has it's own caveats.
Plase, take a look at this answer, which explains the importance of using the dot in your directives. Even if you choose to use ng-show, I would recommend that you refactor your controller and view to avoid further complications down the road.
If you are new to angular, don't hesitate to read John Papa's styleguide, which covers that situation and many others.

Header Row Problems with JSPDF and AutoTable

I am trying to generate PDF file from html table using JSPDF and AutoTable.
In my example there is a html table with two header row as follows:
<table id="table" style="display:none ;">
<thead>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th >Country</th>
<th >IP-address</th>
<th >IP-address</th>
</tr>
<tr>
<th >ID</th>
<th >First name</th>
<th >Last name</th>
<th >Email</th>
<th> Country</th>
<th >IP-address</th>
</tr>
</thead>
</table>
But the PDF file is generated with single header row.. how to solve this problem?
and one more is there any option to generate PDF file with the selected Column only.
Fiddle is here:
https://jsfiddle.net/x22fk0p4/3/

UPDATE: v3 supports multiple header rows so the below now inaccurate.
The plugin does not support it out of the box, but it can be done manually with the hooks. I would almost consider this a hack though. What I did was first increasing the height of the default header, then simply draw the secondary header in the space that was freed because of it.

Append a new row to a table using jQuery [duplicate]

This question already has answers here:
Adding a table row in jQuery
(42 answers)
Closed 7 years ago.
I'm using the following code trying to append a new row to jquery but it's not working.
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
My table is setup like so:
<table class="view-bookings-table mobile-optimised hidden" id="search-results">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone Number</th>
<th scope="col">Car Reg.</th>
<th scope="col">Time</th>
</tr>
</thead>
<tbody></tbody>
</table>
EDIT
My full code is actually:
$('#search').submit(function(event) {
event.preventDefault();
$('#search-results > tbody').append('<tr><td data-th="Name">Test</td><td data-th="Email">test#test.com</td><td data-th="Phone Number">07777777777</td><td data-th="Car Reg.">ocf83or</td><td data-th="Time">1pm</td></tr>');
});

Your code is fine and works well with every possible version of jQuery.
demo
You may have a jQuery error somewhere else on your page or you are not loading it. Also what is
class='hidden'
doing? Maybe it's just a css issue?