We Keep Coding

bootstrap-table: how to dynamically pull params required for ajaxRequest(params) call

I have used bootstrap-table successfully to load AJAX data into a single table using the following call:
function ajaxRequest(params) {
$.getJSON( 'ajax.php?action=doSomething' + $.param(params.data), {format: 'json'}).then(function (res) {
params.success(res)
});
}
But now I'd like to work with multiple tables, each with their own ID, which will be populated by an onClick event bound to a button. Can anyone tell me how I can get the params for any given table required by the function?
The HTML for each table is in the format:
<table id="table-{$id}" class="my-table" data-toggle="table"
data-search="false"
data-ajax="ajaxRequest"
data-side-pagination="server"
data-pagination="true">
<thead>
<tr>
<th data-field="field1" data-sortable="true">Field 1</th>
...
</tr>
</thead>
</table>
Thanks!

Why my table filter is removing the table headers?

I'm trying to implement this table filter which i found at this tutorial but for some reason my filter is removing my table headers and in the examples it doesn't remove the headers, I wonder what I'm doing wrong here?
This is my table:
<input type="text" id="inputFilter" placeholder="Procurar agendamentos..">
<table class="table table-hover table-dark" id="tableAgendamentos">
<thead>
<tr>
<th scope="col">Data</th>
<th scope="col">Animal</th>
<th scope="col">Procedimento</th>
<th scope="col">Status</th>
<th scope="col">Valor</th>
<th scope="col">Nota Fiscal</th>
</tr>
</thead>
<tbody>
#foreach (Agendamento agendamento in Model.ListaAgendamentos)
{
<tr>
<th scope="row">#agendamento.DataHoraInicio</th>
<td>#agendamento.nomeAnimal</td>
<td>#agendamento.NomeServico</td>
#if(agendamento.prioridadeAgendamento == 3)
{
<td class="text-success">Em até 7 dias</td>
}else if(agendamento.prioridadeAgendamento == 2)
{
<td class="text-primary">Em até 30 dias</td>
}else
{
<td class="text-danger">Atrasado/Vencido</td>
}
<td>R$100,00</td>
<td>Baixar</td>
</tr>
}
</tbody>
</table>
This is my script:
<script>
$(document).ready(function(){
$("#inputFilter").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#tableAgendamentos tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
This is how my table looks without searching anything
This is how my table looks after searching for some data
Thanks in advance.

Looks like the header is getting filtered out.
I think you could give it a try with an id for tbody instead of the whole table id in the script.
Looking at the tutorial, there seems to be a point at the end stating
Note that we start the search in tbody, to prevent filtering the table headers.

I think error is about this
$("#tableAgendamentos tr")
I think give a class name to tr instead of above code then try again

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.

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.

jQuery Mobile is rendering layout in strange way

I am creating an application using Marionette and jQuery Mobile and I have a problem with rendered html code.
To compile the html code I use _.template(htmlCode, modelVars) (underscore's method) inside CompositeView's template method.
I write that code to get my goal:
Marionette.CompositeView.extend({
template : function() {
var tpl = App.Templates.get('my-vehicles-table'); //returns html template
return _.template(tpl, {});
},
itemView : Module.View.MyVehicleRow,
itemViewContainer: "tbody"
});
Table rows are rendered by JQM when are defined in tpl variable:
var htmlCode = '<table data-role="table" id="my-vehicles-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr class="ui-bar-d">
<th data-priority="2">Reg No.</th>
<th>VIN</th>
<th data-priority="3">Model</th>
<th data-priority="1">Type</th>
<th data-priority="5">Client</th>
</tr>
</thead>
<tbody>
<tr><td>DW 12345</td><td>QWER123</td><td>F12</td><td>No Contract</td><td>John Smith</td></tr>
</tbody>
</table>';
Situatuion is different when tpl is only template for the table (doesn't contain rows):
var tpl = '<table data-role="table" id="my-vehicles-table" data-mode="reflow" class="ui-responsive table-stroke">
<thead>
<tr class="ui-bar-d">
<th data-priority="2">Reg No.</th>
<th>VIN</th>
<th data-priority="3">Model</th>
<th data-priority="1">Type</th>
<th data-priority="5">Client</th>
</tr>
</thead>
<tbody></tbody>
</table>';
And table rows are inserted to <tbody> only by CompositeView methods.
Funny is taht if there are some rows declared in tpl (inside <tbody>) and CompositeView method inserts dynamic other rows, result table has good and bad rendered rows. These are good if were declared in template and those are bad if were added by CompositeView.
What I want? To have all rows rendered by jQuery Mobile (html with special attibutes added to tags when page is rendered).
Thanks!
--- Edit ---
The problem is timing of course. You have to be sure you have fetched all data before rendering a view component (VC). If you want to put data from async request to the VC, before you initialize new instance of it check model's/collection's sync event.
I.e.:
var collection = new CustomCollection();
collection.fetch();
$.when(collection).done(function(collectionRecords){
collectionRecords.on('sync', function() {
//collectionRecords has all the data you want to put into the VC
});
});