I'm trying to display an HTML DataTables URL to the actual image in an Excel column.
Right now, when I export the DataTable to Excel it populates the corresponding column with the URL itself, what I want to achieve is to actually populate the Excel column with the Image, not the Image URL.
Right now, I can see the image for the comment.screenshot variable into HTML, but in Excel, it is blank, while for the rest of comment.screenshot1,comment.screenshot2 and comment.screenshot3, only the URL is populated in Excel.
jQuery:
$("#tableComments").DataTable({
stripHtml: !1,
dom: "Bfrtip",
buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"]
})
HTML:
<table id="tableComments" class="display table table-info table-striped">
<thead>
<tr>
<th>User</th>
<th>Version</th>
<th>Round</th>
<th>Comment</th>
<th>Screenshot #1</th>
<th>Screenshot #2</th>
<th>Screenshot #3</th>
<th>Screenshot #4</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{% for comment in comments %}
<tr>
<td>{{ comment.user.username }}</td>
<td>{{ comment.versionName }}</td>
<td>{{ comment.round }}</td>
<td>{{ comment.comment }}</td>
<td><img src="{{ comment.screenshot }}" /></td>
<td>{{ comment.screenshot1 }}</td>
<td>{{ comment.screenshot2 }}</td>
<td>{{ comment.screenshot3 }}</td>
<td>{{ comment.approved }}</td>
</tr>
{% endfor %}
</tbody>
</table>
I highly appreciate your help!
Instead of Datatables export buttons you may use a different approach using encodeURIComponent:
The snippet:
$("#tableComments").DataTable({
stripHtml: !1,
dom: 'Bfrtip',
buttons: ['copyHtml5', 'csvHtml5', 'pdfHtml5']
})
$('button').on('click', function(e) {
window.open('data:application/vnd.ms-excel,' + encodeURIComponent( document.getElementById('tableComments').outerHTML));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<button>Export To Excel</button>
<table id="tableComments" class="display table table-info table-striped">
<thead>
<tr>
<th>User</th>
<th>Version</th>
<th>Round</th>
<th>Comment</th>
<th>Screenshot #1</th>
<th>Screenshot #2</th>
<th>Screenshot #3</th>
<th>Screenshot #4</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>username1</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=1"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
<tr>
<td>username2</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=2"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
<tr>
<td>username3</td>
<td>versionName</td>
<td>round</td>
<td>comment </td>
<td><img src="https://dummyimage.com/100x100/000/fff&text=3"/></td>
<td>screenshot1</td>
<td>screenshot2</td>
<td>screenshot3</td>
<td>approved</td>
</tr>
</tbody>
</table>
Related
Im using the Jquery for pagination of my data tables and it is working great. However, when i add some AJAX script to load data without page refresh, the pagination function is not working anymore. Can anyone point out my mistake? my code is as below:
My table:
<table id="data-table" class="table table-striped border " style="width:100%">
<thead>
<tr>
<th>No</th>
<th>License Plate</th>
<th>Status</th>
<th>Time</th>
<th>Date</th>
</tr>
</thead>
<tbody>
#foreach($bg_records as $bg_record)
#if($bg_record -> status == 1)
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> PASS</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#else
<tr id="">
<th scope="row">{{ $loop->iteration }}</th>
<td>{{ $bg_record -> lp}}</td>
<td> FAILED</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('h:i:s')}}</td>
<td>{{ Carbon\Carbon::parse($bg_record->timestamp)->format('d-m-Y')}}</td>
</tr>
#endif
#endforeach
</tbody>
</table>
My AJAX script to load the table without page refresh
<script type="text/javascript">
var delay = 1000;
var refreshId = setInterval(function () {
$('#data-table').load(' #data-table');
}, delay);
</script>
JQuery pagination script
<script>
$(document).ready(function () {
$('#data-table').DataTable();
});
</script>
I'm trying to display an address then an email contact in a continuous way. This was my attempt I'm new to html. Right now its appears like this. How can I eliminate the gap between the address and the contact email?
address address address contact
line line line #
1 2 3 gmail.com
<body>
<div id="html_content">
<table id="header-address">
<tbody>
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
</tbody>
</table>
</div>
<body>
<table>
<tr>
<td>address line 1</td>
</tr>
<tr>
<td>address line 2</td>
</tr>
<tr>
<td>address line 3</td>
</tr>
<tr>
<td>address line 4</td>
</tr>
<tr>
<td><span>abc#example.com 4</span></td>
</tr>
</table>
You can do this in javascript.
const waitBeforeContinuing = ms => new Promise(res => setTimeout(res, ms));
i=0;
i2=0;
i3=0;
function tableBody() {
i+=1;
i2+=1;
i3+=1;
// YOU CAN STORE INFORMATION IN AN ARRAY IF YOU NEED TO, THEN USE array[$i-1];
tableInfo = `${i}${i}<td>${i2}</td>{{/address}}<td><span class="muted">Contact</span></td><td><img class="text-right" src="${i3}" /></td>`;
const tr = document.createElement("tr");
tr.innerHTML = tableInfo;
document.getElementById('tablebody').appendChild(tr);
table2(); // to prevent errors
}
async function table2() {
await waitBeforeContinuing(300); // to prevent errors
tableBody();
}
tableBody();
/*
<tr>
{{#address}}
<td>{{ addressLine }}</td>
{{/address}}
<td>
<span class="muted">Contact</span>
</td>
<td>
<img class="text-right" src="{{ logoUrl }}" />
</td>
</tr>
*/
<table id="header-address">
<tbody id="tablebody">
</tbody>
</table>
This code infinitely adds elements to the table. You can also use arrays to show custom elements, not just numbers.
I'm using html templates to deliver email to my customers. The template holds a table, and I need this table to show or hide rows based on the data it's receiving. The data is injected to the HTML using handlebars.
I tried to add conditional if to the table, which works fine on the browser, but not when seeing the email:
<table class="tg">
<thead>
<tr>
<th class="tg-0pky">Name</th>
<th class="tg-0pky">{{ recipientName }}</th>
</tr>
</thead>
<tbody>
{{#if recipientId}}
<tr>
<td class="tg-0pky">ID</td>
<td class="tg-0pky">{{ recipientId }}</td>
</tr>
{{/if}}
{{#if recipientBank}}
<tr>
<td class="tg-0pky">Bank</td>
<td class="tg-0pky">{{ recipientBank }}</td>
</tr>
{{/if}}
{{#if recipientBranch}}
<tr>
<td class="tg-0pky">Branch</td>
<td class="tg-0pky">{{ recipientBranch }}</td>
</tr>
{{/if}}
{{#if recipientAccountNumber}}
<tr>
<td class="tg-0pky">Account number<br/></td>
<td class="tg-0pky">{{ recipientAccountNumber }}</td>
</tr>
{{/if}}
{{#if recipientAccountType}}
<tr>
<td class="tg-0pky">Account type</td>
<td class="tg-0pky">{{ recipientAccountType }}</td>
</tr>
{{/if}}
<tr>
<td class="tg-0pky">Amount to receive</td>
<td class="tg-0pky">{{ recipientReceive }}</td>
</tr>
</tbody>
</table>
When receiving the email:
When I receive the email, the rows are shown or not based on the data injected, but the table loses its formatting.
I've read that using a script is not the best way to handle this, because it's not a good practice to use scripts in email.
How can I dynamically show or hide the rows if the variable is present or not?
I have a copy button script:
function myFunction() {
var table = document.getElementById('myTable');
var copyText = table.rows[1].cells[0].innerHTML;
copyText.select();
document.execCommand("copy");
alert("Copied");
}
And my table:
<table id="myTable">
{% for resp in results %}
<tr>
<td>{{ resp }}</td>
<td>{{ resp.Question_id.Statement }}</td>
<td><button onclick="myFunction()">Copy text</button></td>
</tr>
{% endfor %}
</table>
I want the button to copy the text inside td {{ resp }} /td
function myFunction(val, event) {
var inp = document.createElement('input');
document.body.appendChild(inp)
inp.value = val;
inp.select();
document.execCommand('copy', false);
inp.remove();
alert('copied');
}
<table id="myTable">
<tr>
<td>one</td>
<td><button onclick="myFunction('one')">Copy text</button></td>
</tr>
<tr>
<td>two</td>
<td><button onclick="myFunction('two')">Copy text</button></td>
</tr>
<tr>
<td>three</td>
<td><button onclick="myFunction('three')">Copy text</button></td>
</tr>
<tr>
<td>four</td>
<td><button onclick="myFunction('four')">Copy text</button></td>
</tr>
</table>
a quick solution will be passing the text (to be copied) with in the function as argu.
ctrl + v to see the result.
I've a table with rides like this:
<tr>
<td>{{ ride.user.name }}</td>
<td>{{ ride.location.from }}</td>
<td>{{ ride.location.to }}</td>
<td>{{ ride.type.name }}</td>
<td>{{ ride.date }}</td>
<td>
<a #click="show" class="btn-show">Show</a>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
</td>
<td><show-ride-modal :ride="ride"></show-ride-modal></td>
</tr>
So the last td makes sure there will pop-up a modal if you click on show. In that modal more details of the selected ride are visible.
The problem is that every always the same ride is being passed to the modal. Why is that?
EDIT
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
</tr>
</thead>
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
</table>
Edit: After posting this I learned that Vue.js requires special behavior in the case of tables. See: http://vuejs.org/guide/components.html#Template-Parsing.
It is hard to answer the question if we have to guess what the rest of your code looks like. However, I see some strange things in your code, so maybe if you look at those the issue can be fixed.
Look at this:
<tbody v-for="ride in rides" is="ride" :ride="ride"></tbody>
The 'is="ride"' attribute and ':ride="ride"' parts don't seem to do anything. 'is=' is used in the dynamic component element to assign the component type, and ':ride' could be used to pass props to a component. But you don't appear to have component.
My suggestion would be change the code to this:
<table class="table" v-if="rides">
<thead>
<tr>
<th>Door</th>
<th>Van</th>
<th>Naar</th>
<th>Type</th>
<th>Datum</th>
<th>Acties</th>
</tr>
</thead>
<tbody v-for="ride in rides" >
<tr>
<td>{{ ride.user.name }}</td>
<td>{{ ride.location.from }}</td>
<td>{{ ride.location.to }}</td>
<td>{{ ride.type.name }}</td>
<td>{{ ride.date }}</td>
<td>
<a #click="show" class="btn-show">Show</a>
<show-ride-modal :ride="ride"></show-ride-modal>
<a v-link="{ name: 'ritten' }" class="btn-edit">Bewerk</a>
<a v-link="{ name: 'ritten' }" class="btn-delete">Verwijder</a>
</td>
</tr>
</tbody>
</table>