I've got a table I want to be able to export. I stumbled upon bootstrap-table at http://bootstrap-table.wenzhixin.net.cn/ and thought it was awesome, so I started using some of the stuff. pagination, search, other stuff working, great! but I can't figure out how to get the damn export extension to work! I've been at this for sooo long, searching forums, blogs, and the documentation on github. Anyway, so here's where I'm at.
I ran
npm install bootstrap-table
then I added lines to my header, and a script to my body from this example: http://issues.wenzhixin.net.cn/bootstrap-table/#extensions/export.html and now my index.html.erb looks like this:
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../assets/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="../assets/examples.css">
<script src="../assets/jquery.min.js"></script>
<script src="../assets/bootstrap/js/bootstrap.min.js"></script>
<script src="../assets/bootstrap-table/src/bootstrap-table.js"></script>
<script src="../assets/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="../ga.js"></script>
</head>
<body>
<div class="container">
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<div class="booyah-box">
<table id="table"
data-toggle="table"
data-show-export="true"
data-pagination="true"
data-click-to-select="true"
data-toolbar="#toolbar"
data-url="../json/data1.json"
data-page-list="[10, 25, 50, 100, ALL]"
data-search="true"
data-show-pagination-switch="true"
data-show-columns="true"
data-minimum-count-columns="2"
>
<thead>
<tr>
<th data-field="state" data-checkbox="true">Select</th>
<th data-field="Project ID">Project ID</th>
<th data-field="Status">Status</th>
<th data-field="Project Type">Project Type</th>
<th data-field="Marker Strategy">Marker Strategy</th>
<th data-field="Traits">Traits</th>
<th data-field="Line">Line</th>
<th data-field="Line Origin">Line Origin</th>
<th data-field="Market Region">Market Region</th>
<th data-field="Governance Qualifier">Governance Qualifier</th>
<th data-field="New Start Year">New Start Year</th>
<th data-field="Initial Version Test Year">Initial Version Test Year</th>
<th data-field="Estimated Version Test Year">Estimated Version Test Year</th>
<th data-field="Last Location">Last Location</th>
<th data-field="Trait Code">Trait Code</th>
<th data-field="CMS Subtype/Type">CMS Subtype/Type</th>
<th data-field="NEIS">NEIS</th>
<th data-field="Root ID1">Root ID1</th>
<th data-field="Root ID2">Root ID2</th>
</tr>
</thead>
<tbody>
<% #tiprojects.each do |x| %>
<tr>
<td></td>
<td><%= x.pidtc %></td>
<td><%= x.status %></td>
<td><%= x.protype %></td>
<td><%= x.marker_strategy %></td>
<td><%= x.traits.upcase %></td>
<td><%= x.line %></td>
<td><%= x.origin %></td>
<td><%= x.market_region.upcase %></td>
<td><%= x.governance_qualifier %></td>
<td><%= x.new_start_year %></td>
<% if x.initial_vt_year == 9999 %>
<td>Not Applicable</td>
<% else %>
<td><%= x.initial_vt_year %></td>
<% end %>
<td><%= x.estimated_vt_year %></td>
<td>NA</td>
<td><%= x.trait_code %></td>
<td><%= x.cms_subtype %></td>
<td><%= x.neis %></td>
<td><%= x.root_pidtc1 %></td>
<td><%= x.root_pidtc2 %></td>
<% end %></tr>
</tbody>
</table>
<br />
<% if current_user.admin? %>
<%= link_to "Download Template Upload", download_csv_path %>
<br />
<%= form_tag import_ti_projects_path, multipart: true do %>
<%= file_field_tag :file %><br />
<%= submit_tag "Upload New Projects" %>
<% end %>
<% end %>
</div>
<script>
var $table = $('#table');
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('destroy').bootstrapTable({
exportDataType: $(this).val()
showExport: 'true'
});
});
})
</script>
</body>
I've just done a jsfiddle looking at some issues with export.
This may help you. jsfiddle.
<div id="toolbar">
<select class="form-control">
<option value="">Export Basic</option>
<option value="all">Export All</option>
<option value="selected">Export Selected</option>
</select>
</div>
<table id="table"
data-toggle="table"
data-toolbar="#toolbar"
data-show-export="true"
data-pagination="true"
data-maintain-selected="true"
data-page-size="5"
data-page-list="[5, 25, 50, 100, ALL]"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data2/"
data-export-options='{
"fileName": "test",
"ignoreColumn": ["state"]
}'
>
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">ID</th>
<th data-field="name">Name</th>
<th data-field="price">Price</th>
</tr>
</thead>
</table>
Mine is a little different, one thing I have is refreshOptions instead of destroy in $table.bootstrapTable('destroy').bootstrapTable({
Related
I am trying to access a value from an html <tr> element when it is clicked as follows:
<body>
<table class="table table-hover">
<thead class="thead-light">
<tr>
<th scope="col">#</th>
<th scope="col">Name</th>
</tr>
</thead>
<tbody>
<% viewObj.forEach(function(obj) { %>
<tr onclick="myFunction(this)">
<th scope="row"><%= x %></th>
<td><%= JSON.stringify(obj.completion_date).slice(1,11) %></td>
<td> <%= obj.wo_num %></td>
<td><%= obj.drawing_num %></td>
<td><%= obj.m_programming %></td>
<td><%= obj.m_machining %></td>
<td><%= obj.m_programming + obj.m_machining %></td>
<% x++;}); %>
</tbody>
</table>
</body>
<script>
function myFunction(x) {
alert("name: " + x.cells[0]);
}
</script>
When I click on a row in the table, I get the following alert box:
How do I access the values of the HTMLTableCellElement?
As per #Barmar, to access the values of the HTMLTableCellElement in my case would be:
<script>
function myFunction(x) {
console.log(x.cells[1].textContent);
}
</script>
I have the following table in HTML and I want to remove all whitespaces from variable item.book.How can I do it?
<table>
<theader>
<tr>
<th>Livro</th>
<th>Autor da Review</th>
<th>Review</th>
<th>Link</th>
</tr>
</theader>
<tbody>
<% list.forEach((item,index)=>{ %>
<tr>
<td><%= item.book %></td>
<td><%= item.name %></td>
<td> <%= item.desc %></td>
<td id="link"> <a href=/review/<%= item.email %>/ <%= item.book %>> /review/<%= item.email %>/<%= item.book %> </a></td>
</tr>
<% })%>
</tbody>
</table>
I am getting the error: missing ) after argument list while compiling ejs.
I tried many times, but I can't find the problem.
Here's the ejs that causes errors.
What is the problem with this code?
<%- include('../_layouts/adminheader') %>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (count > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
<% } %>
</tr>
<% }); %>
</tbody>>
</table>>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
<%- include('../_layouts/adminfooter') %>
Before your closing </tr>, the line
<% } %>
is superfluous. The parser therefore interprets this as ending the callback function of forEach() without providing further arguments or closing the
round bracket of the function call. (The error message is actually pretty clear about what's going on, if you think about it. :))
By the way you also got two superflous > behind your closing </tbody> and </table>.
Here's a working fixed code example you can put into https://ionicabizau.github.io/ejs-playground/
<%
var products = [
{title: "foobar", category: "things", image: "", _id: 1, price: 0}
];
var count = products.length;
%>
<h2 class='page-title'>Products</h2>
<br>
Add a new product
<br><br>
<% if (products.length > 0) { %>
<table class="table table-striped">
<thead>
<tr class="home">
<th>Product</th>
<th>Price</th>
<th>Category</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<% products.forEach(function(product) { %>
<tr>
<td><%= product.title %></td>
<td>$<%= parseFloat(product.price).toFixed(2) %></td>
<td><%= product.category %></td>
<td>
<% if (product.image == "") { %>
<img src="/images/noimage.png">
<% } else { %>
<img src="product_images/<%= product._id %>/<%= product.image %>">
<% }%>
</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<% }); %>
</tbody>
</table>
<% } else { %>
<h3 class="text-center">There are no products.</h3>>
<% } %>
I am using Ruby on Rails and rendering the pages using ajax_will_paginate. It is working fine but I used JavaScript table sorting in HTML pages. And when I click on next pages the ajax_will_paginate removes the table sorting functionality.
Here is my _cantacts.html.erb
<table class="tablesorter">
<thead>
<tr>
<th>Name</th>
<th>Office</th>
<th>Fax</th>
<th>Cell</th>
<th>Email</th>
<th>Position</th>
<th>Mainconact</th>
<th></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<% #contacts.each do |contact| %>
<tr>
<td><%= contact.Name.capitalize %></td>
<td><%= contact.Office %></td>
<td><%= contact.Fax %></td>
<td><%= contact.Cell %></td>
<td><%= contact.Email %></td>
<td><%= contact.Position %></td>
<td><%= contact.MainContact %></td>
<td><%= link_to 'Show', edit_contact_path(contact) %></td>
<!--<td><%= link_to 'Edit', edit_contact_path(contact) %></td>-->
<td><%= link_to 'X', contact, :class=>'rmv-fld', method: :delete, data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</tbody>
</table>
And index.js.erb is:
$('.sort_paginate_ajax').html("<%= escape_javascript(render("contacts"))%>")
Update DOM by calling the tablesorter plugin function after rendering partial contents to html element.
index.js.erb.
$('.sort_paginate_ajax').html("<%= escape_javascript(render("contacts"))%>")
$(".tablesorter").tablesorter();
This is the Units Table:
<div id="table_header">Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
This is the Selected Units Table:
<div id="table_header">Selected Units</div>
<table class="gridView location">
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {class: 'location'}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %> current_location">
<td><%= check_box("select", "all", {class: 'current_location'}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</table>
Image button to push
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
By clicking this button, the selected row from the Units table should transferred to the Selected Units table.
Thanks in advance!.
Modified markup
<div class="table_header">Units</div>
<table class="gridView location" id="units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all", {:class => "location"}) %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="current_location">
<td><%= check_box("select", "all", {:class => "current_location"}) %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<div class="table_header">Selected Units</div>
<table class="gridView" id="selected_units">
<thead>
<tr class="gridViewHeader">
<th><%= check_box("select", "all") %></th>
<th>Location Code</th>
<th>Location Reference</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr class="<%= cycle('gridViewclickableRowDialog', 'gridViewAltclickableRowDialog') %>">
<td><%= check_box("select", "all") %></td>
<td><%= current_location_id %></td>
<td><%= current_location.Lo_Reference %></td>
<td><%= current_location %></td>
</tr>
</tbody>
</table>
<%= image_tag("blue_right_arrow.png", id: 'blue_right_arrow', :alt => "arro", title: 'Move to Selected Units') %>
Note down the new classes added.
Jquery code
$(document).ready(function() {
#copying the tr
$("#blue_right_arrow").click(function() {
$("input.current_location").each(function(i, el) {
if($(el).is(":checked")) {
$("table#selected_units tbody").append($(el).parent().parent().html());
$(el).remove()
}
});
});
});