We Keep Coding

Bootstrap Table conditional show/hide columns

I need to show/hide columns in my bootstrap table. If a condition is true I want to show some colums and hidding some others.
I tried various methods, without success
I use thymeleaf for my views.
This is my html page code:
MY TABLE:
<table data-toggle="table"
th:data-url="#{/certificato/list/{idCommessa}(idCommessa=${commessa.id})}"
data-pagination="true"
data-search="true"
data-classes="table table-hover"
data-striped="true" id="tableCertificato"
data-side-pagination="client">
<thead>
<tr>
<th data-sortable="true" data-field="numeroCertificato" th:text="#{numeroCertificato}"></th>
<th data-sortable="true" data-field="dataCertificato" th:text="#{dataCertificato}" data-formatter="dateFormatter"></th>
<th data-field="nFabbrica" th:text="#{nFabbrica}" ></th>
<th data-field="modulo" th:text="#{modulo}" ></th>
<th data-field="categoriaRischio" th:text="#{categoriaRischio}"></th>
</thead>
My JS:
$(function(){
var tipoCertVar = [[${commessa.tipoAttivita}]];
if(tipoCertVar == 'TPED'){
$('#tableCertificato').bootstrapTable('hideColumn', 'nFabbrica');
$('#tableCertificato').bootstrapTable('hideColumn', 'modulo');
$('#tableCertificato').bootstrapTable('hideColumn', 'categoriaRischio');
}else{
$('#tableCertificato').bootstrapTable('showColumn', 'nFabbrica');
$('#tableCertificato').bootstrapTable('showColumn', 'modulo');
$('#tableCertificato').bootstrapTable('showColumn', 'categoriaRischio');
});
The condition is true, I debugged it with an alert message.
But the hide/show column not run. The columns are always shown.
I try to change my code without success so:
<th th:if="${commessa.tipoAttivita != 'TPED' }" data-field="nFabbrica" th:text="#{nFabbrica}"></th>
and using a conditional data-visible.
Same results.
Anyone can help me?

I had a similar problem and I had resolved with this step:
set data-visible="false" for all the conditional columns of your table;
change your javascript insert this var: $table = $('#tableCertificato').bootstrapTable({ }); and use this in your if-statement:
$table = $('#tableCertificato').bootstrapTable({ });
if(tipoCertVar != 'TPED') {
$table.bootstrapTable('showColumn', 'nFabbrica');
$table.bootstrapTable('showColumn', 'modulo');
$table.bootstrapTable('showColumn', 'categoriaRischio');
}
I hope this solution will help you.

Show only one element of a panel using Angularjs

I am new to Angularjs and I am trying to figure out how it's different modules work. So, I am working on a project on which I wanna achieve an accordion-like style for a page, in which a table is shown when I click a panel button. The HTML code that creates(dynamically from a database) the div elements I modify is posted below.The problem is that in this panel, any number of tables can be shown,while I need to only have one opened at a time,so when one opens,the one opened before it should close.Any ideas how I can achieve this functionality?(I assume the error is because the showDB variable is local to each table scope, but I don't know how to work around it.) Thanks!' `
<div ng-repeat="(key, value) in data.services">
<div ng-show="showSection(key)" class="top_panel-section">
<button class="btn top_btn btn-header" type="button" name="showDB"
ng-click="showDB=!showDB">{{key}}</button>
<table ng-show="showDB"
class="n-table toptable table-responsive n-table-standard n-table-striped n-table-hover">
<thead class="n-table-thead">
<tr>
<th width="70%">VM Name</th>
<th width="30%">Status</th>
</tr>
</thead>
<tbody class="n-table-body">
<tr ng-repeat="vm in value.vms">
<td width="76%">{{vm.vm}}</td>
<td width="24%" ng-style="getStatusStyle(vm.status)">
{{vm.status}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

Yes, you should remove that local showDB variable to achieve what you need.
You can easily replace it with a $scope.activeKey and evaluating it by the
<button ... name="showDB" ng-click="activateKey(key)">{{key}}</button>
And in your controller:
$scope.activeKey = null;
$scope.activateKey = function (keyToBeActivated) {
$scope.activeKey = keyToBeActivated;
}
Now you can reach that exclusivity by checking:
<table ng-show="activeKey === key" ... >
Using table $index as unique field: (available from ng-repeat)
<button ... name="showDB" ng-click="activateKey($index)">{{key}}</button>
And
<table ng-show="activeKey === $index" ... >

Change table header with response to button click ,where rows update using JSTL for loop

<div class="btn-group" >
<button type="submit" onclick="display">DISPLAY SCHEDULE</button>
<button type="submit" onclick="open" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<!-- column headers -->
<% Result result = (Result)request.getAttribute("result");%>
<thead>
<tr>
<th id="change"> Transfer Switch </th>
</tr>
</thead>
<!-- column data -->
<tbody>
<c:forEach var="row" items="${result.rows}">
<tr>
<td>
<c:out value="${row.Schedule_ID}"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
I am trying to change my table header name with button click, so what i did was added a simple java script as follows.
<script>
function display(){
document.getElementById("change").innerHTML="display"
}
function open(){
document.getElementById("change").innerHTML="open"
}
</script>
but since my JSTL result row gets updated for every loop my header changed too thus ending myself with the same header Transfer switch.
Can i solve this using Jquery on load ??, not sure how to use it.
I heard of solutions to make 2 tables but that's not the solution i am looking for since the table is responsive uses bootstrap and also has some buttons in its rows .

Two things I have changed from your code, now it looks fine,
Don't use the JS reserved keyword(s) like open. Use openSchedule() instead.
For better practice, Use span tag for change the text instead of giving id to th.
Your HTML with rendered table rows (Assume I could not able to reproduce jsp values here.)
<div class="btn-group" >
<button type="button" onclick="displaySchedule()">DISPLAY SCHEDULE</button>
<button type="button" onclick="openSchedule()" >OPEN SCHEDULE</button>
</div>
<table class="table table-striped responsive">
<thead>
<tr>
<th><span id="change">Transfer Switch</span></th>
</tr>
</thead>
<tbody>
<!-- Here I assumed two rows, since It's JSP value I couldn't reproduce -->
<tr>
<td>Text1</td>
</tr>
<tr>
<td>Text2</td>
</tr>
</tbody>
</table>
Your Script,
window.displaySchedule = function(){
document.getElementById("change").innerHTML="display";
}
window.openSchedule = function(){
document.getElementById("change").innerHTML="open";
}
See fiddled demo here for live sample.

Data Table hangs sporadically (No data available in table) when data sorted or loaded with Knockout binding

I am binding data to a table using Knockout JS and the JQuery/Bootstrap based; Data Table API. The table becomes unresponsive sporadically when sorted or loaded. There are no errors in the log.
It also shows 0 of 0 data as illustrated in the screenshot below:
I have seen similar errors/issues but could not get a solutions for them, E.g. This post:
Code:
function viewModel(){
var self = this;
self.Data = ko.observableArray([]);
$.getJSON('https://restcountries.eu/rest/v1/all', function(data){
self.Data(data);
});
}
ko.applyBindings(viewModel());
$(document).ready(function() {
$('#example').dataTable();
});
HTML:
<div class="table-responsive">
<table id="example" cellspacing="0"
class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Data">
<tr>
<td data-bind="text: name"></td>
<td data-bind="text: capital"></td>
<td data-bind="text: population"></td>
<td data-bind="text: region"></td>
</tr>
</tbody>
</table>
</div>
Here is a full working example (JSFiddle) utilizing a REST API so that the exact problem is accurately replicated:

I think the problem with your example may be with how you're dealing with your data when you get it back from the API call.
I've put together a quick example that achieves what I think you're trying to achieve and the sorting and searching work quickly for me.
When I get the JSON data back from the API, I use the Knockout arrayMap utility function to create an array of "Country" objects that have observable properties that I have mapped the JSON data to. I've bound the table to my observableArray of Country objects.
Initialising the data table in the same way you have works fine for me in this case.
The full working solution is here: http://plnkr.co/edit/eroIox6zqBFOVnf86Mdk?p=preview
script.js
var ViewModel = function(jsonData) {
var countries = ko.utils.arrayMap(jsonData, function(item) {
return new Country(item)
});
this.Countries = ko.observableArray(countries);
};
var Country = function(jsonItem) {
this.Name = ko.observable(jsonItem.name);
this.Capital = ko.observable(jsonItem.capital);
this.Population = ko.observable(jsonItem.population);
this.Region = ko.observable(jsonItem.region);
};
window.onload = function() {
$.getJSON('https://restcountries.eu/rest/v1/all', function(data) {
ko.applyBindings(new ViewModel(data));
$("#example").dataTable();
});
}
index.html
<table id="example" cellspacing="0" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</thead>
<tfoot>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
<th scope="col">Region</th>
</tr>
</tfoot>
<tbody data-bind="foreach: Countries">
<tr>
<td data-bind="text: Name"></td>
<td data-bind="text: Capital"></td>
<td data-bind="text: Population"></td>
<td data-bind="text: Region"></td>
</tr>
</tbody>
</table>

Tables are fairly slow to render within Knockout, and if your table is based on a computed, I could see how you could have some issues with redrawing time. But that's not happening here.
Apart from loading the data and binding it to the table rows, there's no data manipulation going on in your viewmodel. All the data manipulation is done by the dataTable plug-in, which you initialize with a single jQuery call. Properly, that should be done within a binding handler. You also need to know what is going on within the plug-in when it sorts, filters, or whatever it does, because you may need to mediate those changes back to your observableArray within your binding handler.
Bottom line: you need a binding handler for the dataTable. There may be one already written; I haven't Googled for it. Give that a try.

Populate Table in jQuery Mobile

I am using fooTable jQuery plugin as date grid in jQuery mobile. I have list of data I need to populate in the table. Initially with filtering and cell formatting. First I want to populate data in the table. I am using an external .js file to keep JavaScript separately.
HTML5 code, "$.App.initGridView" is not calling from "data-init" tag. Why isn't it working?
<div data-role="view" data-title="Platform" onloadeddata="$.App.initGridView" data-init="$.App.initGridView">
<table class="footable table" id="my-table">
<thead >
<tr data-theme="b">
<th >Ticket#</th>
<th >Date</th>
<th data-hide="phone">Operator Name</th>
<th data-hide="phone">Lease Name</abbr></th>
<th >Tank#</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
jQuery Code:
initGridView: function () {
var rtList = $.App.tempDB.getTicketList();
// I want to populate table here
}