Header Row Problems with JSPDF and AutoTable - javascript

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.

Related

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?

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?

DataTable is distorted in firefox browser

I am using datatable for data population in my application but in my application datatable is coming properly in IE 9 but its is complete distorted in Firefox browser.Can anyone help me .This is my table i am using
<table width='100%' align="center" cellpadding="0" cellspacing="10"
border="1" name="userSTPForm" id="metalPager">
<thead>
<tr >
<th style="width: 130px;">SAPCODE</th>
<th style="width: 165px;">FIRST NAME</th>
<th style="width: 165px;">LAST NAME</th>
<th style="width: 130px;">Organization Name </th>
<th style="width: 130px;">MAIL</th>
<th style="width: 130px;">Mobile</th>
<th style="width: 130px;">STATUS</th>
<c:if test="${makePaymentFlag==true}">
<th style="width: 130px;">
PAYMENT
</th>
</c:if>
<c:if test="${isTmlAdminRole==true}">
<th style="width: 170px;">
APPROVE/REJECT
</th>
</c:if>
</tr>
</thead>
<tbody>

Modern browsers some times reject deprecated attributes. Because of there adaptability to new versions of html, css and etc. It's better to use latest attributes to style and to make your markup. And also it's good practice to test your application on a chrome, firefox or any modern browser. Internet Explorer some times block scripts or it can't work properly with out needed extensions.

Creating merged table cells using Twitter Bootstrap

How can we use Bootstrap to create <thead> with 2 levels (eg: Summer Period has hildren data1, data2, data3) and also table cells that merged 2 vertical cells (eg:State)?
Here's how it looks like in Excel:

I'm not sure how exactly to do it with Bootstrap, but I know how to do it in HTML:
You can use a combination of the colspan and rowspan attributes, where rowspan is used for table headers spanning multiple rows, and the same applies to colspan and columns.
Break up your table headers into rows, according to their levels.
So the first table row will consist of your "parent" headers, i.e. the headers that every other header and piece of data is going to fall under.
Your first row should have 3 columns: State, Utilities Company and Summer Period.
Add subsequent header rows for each level you drill down. Here, your next row will simply be the table headers for each data set.
Let's apply the attributes:
Your 1st th for State spans 2 rows, so we add rowspan="2".
The same applies to the next table header, Utilities Company.
Summer Period spans 1 row and 3 columns, so we add colspan="3"
Add another tr in the header, containing the 3 cells for data1, data2 and data3.
The resulting HTML looks like this:
<thead>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thead>
Here is a demo fiddle.
Here's an updated demo (actually reset as base) including bootstrap.css even though it literally does nothing demo fiddle updated.

Creating a complex header with multiple lines in Bootstrap is exactly as it is in HTML. Here is your table in HTML for Bootstrap:
<table class="table table-bordered">
<thread>
<tr>
<th>State</th>
<th>Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th></th>
<th></th>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>
You may have to add some CSS between your first and second header row to display your data correctly

<table class="table table-bordered">
<thread>
<tr>
<th rowspan="2">State</th>
<th rowspan="2">Utilities Company</th>
<th colspan="3">Summer Period</th>
</tr>
<tr>
<th>data1</th>
<th>data2</th>
<th>data3</th>
</tr>
</thread>
<tbody>
... data here ...
</tbody>
</table>

Categories

Resources