We Keep Coding

Can't fetch selected row in bootstrap table

I have defined the following bootstrap table in my ASP.NET web page:
<table class="display table table-bordered" data-click-to-select="true"
data-pagination="true" data-sortable="true" data-show-refresh="true" data-single-select="true" data-maintain-selected="true"
data-show-toggle="true" data-id-field="customer_id" id="customers" name="customers">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Customer_ID" data-sortable="true">Acct. #</th>
<th data-field="Company_Name" data-sortable="true">Company</th>
<th data-field="Federal_EIN" data-sortable="true">EIN</th>
<th data-field="City" data-sortable="true">City</th>
<th data-field="State" data-sortable="true">State</th>
<th data-field="Creation_Date" data-sortable="true">Added</th>
</tr>
</thead>
</table>
And, following sample code on SO, I am trying to use the following jQuery/JavaScript code to fetch and display info from the selected row:
$('#customers').on('check.bs.table', function (e, row) {
checkedRows.push({ id: row.id, name: row.name, forks: row.forks });
console.log(checkedRows);
$.each(checkedRows, function (index, value) {
$(console.log(value.id + " | " + value.name + " | " + value.forks));
});
});
$('#customers').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function (index, value) {
if (value.id === row.id) {
checkedRows.splice(index, 1);
}
});
console.log(checkedRows);
});
The problem is, the console shows the values of the checked row as undefined. What am I doing wrong?

So, I figured out that the issue is, the row object's fields are case-sensitive, based on the fields the table is populated with (although interestingly, the bootstrap table doesn't care if the data-field parameters observe case-sensitivity!). So, once I used the proper case sensitivity in referring to the fields of the row, everything showed up.
Thank you everyone for your help!

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

JQuery doesn't recognize 'tbody' and 'tr' of datatable using hover() method

So I am working with a datatable and trying to create a hover window which will display data from the datatable and a picture, not important, thing is I am trying to append a div with premade css classes for this project into either a cell or row using hover(), but jquery doesn't recognize the body and row of the datatable. Here is a fiddle I tested it on https://jsfiddle.net/r6tbv9uz/6/ and it works just fine,
and here is a code I am using in the project:
$('.datatable-sort').find('tbody').hover(
function () {
console.log('hovered in');
var iDiv = CreateHoverElement();//the div is a bit complex so I have separate function for it
var element = $(this).closest('tr');
element.append(iDiv);
},
function () {
var element = document.getElementById('tablehover');
element.parentNode.removeChild(element);
console.log('hovered out');
}
);
The thing is when I use the hover as such:
$('.datatable-sort').hover(function(){...},function(){...})
The hover function works perfectly but that wont help me as I need the hover out part to work within a row and only in tbody.
I have tried lot of googling around and lot of trial and error but can't figure it out, if anyone has ideas i would appriciate it, Thanks.
EDIT: html snippet of the datatable:
<table class="table table-striped datatable-sort compact fixedHeader-locked">
<thead>
<tr>
<th scope="col">Time</th> <!--Created-->
<th scope="col">Lane</th> <!--LaneNumber-->
<th scope="col">Credence(%)</th> <!--Credence-->
<th scope="col">LPN</th> <!--Plate-->
<th scope="col">LPN(%)</th> <!--PlateConfidence-->
<th scope="col">Country</th> <!--CountryCode-->
<th scope="col">Country(%)</th> <!--CountryConfidence-->
<th scope="col">Speed(km/h)</th> <!--Speed-->
<th scope="col">Speed change(km/h)</th> <!--SpeedDifference-->
<th scope="col">Width(cm)</th> <!--Width-->
<th scope="col">Height(cm)</th> <!--Height-->
<th scope="col">Length(cm)</th> <!--Length-->
<th scope="col">Weight(kg)</th> <!--Weight-->
<th scope="col">Axles</th> <!--Axles-->
<th scope="col">VehicleID</th> <!--ID-->
<th scope="col">ClassEUR13</th> <!--Classification-->
<th scope="col">Version</th> <!--null-->
<th scope="col">Title</th> <!--null-->
<th scope="col">Direction</th> <!--Direction-->
<th scope="col">Certainty</th> <!--null-->
<th scope="col">Axles Count</th> <!--AxleCount-->
<th scope="col">Gross Weight</th> <!--null-->
<th scope="col">Axles 1 weight(kg)</th> <!--Axles[0].Weight-->
<th scope="col">Axles 2 weight(kg)</th> <!--Axles[1].Weight-->
<th scope="col">Heading (sec)</th> <!--Height-->
<th scope="col">Gap (sec)</th> <!--Gap-->
<th scope="col">Digital Signature</th> <!--null-->
<th scope="col">Checksum</th> <!--Checksum-->
</tr>
</thead>
</table>
Rows are added to the table via JS script.

It sounds like you are adding these elements dynamically. If that is correct, then the event handlers when they are defined are not able to attach to the elements themselves because they are not present in the DOM at the time of binding. To solve this, try using dynamic event handlers:
$('.datatable-sort').on('mouseenter', 'tbody', function () {
console.log('hovered in');
var iDiv = CreateHoverElement();//the div is a bit complex so i have separate function for it
var element = $(this).closest('tr');
element.append(iDiv);
}).on('mouseleave', 'tbody', function () {
var element = document.getElementById('tablehover');
element.parentNode.removeChild(element);
console.log('hovered out');
});
I'm not aware of a way to delegate the .hover() event but according to the docs for .hover(), it is a shorthand syntax for two events: mouseenter and mouseleave, so delegating each of these should provide the same effect.

removing and re-populating boostrapTable

I want basically to refresh the data held in a table. First instantiation works just fine, but no luck after removing and re-fetching of the data.
html
<table id="tablePendByOrg" class="table table-bordered table-hover table-condensed table-striped">
<thead>
<tr>
<th data-field="Date">Time</th>
<th data-field="Organization">Org</th>
<th data-field="f24hs"><24Hs</th>
<th data-field="f48Hs"><48Hs</th>
<th data-field="f48Hs">>48Hs</th>
<th data-field="fTotal">Total</th>
</tr>
</thead>
</table>
js to populate after ajax call.
$('#tablePendByOrg').bootstrapTable({
data: d.Table
});
js to remove data
$("#tablePendByOrg tbody tr").remove();
And after a new call to the ajax code, I get the proper data in d.Table but no tbody are showing on the page, just the framed th that I set from the get go.

As they describe:
$table = $('#tablePendByOrg');
$table.bootstrapTable('load', data); // removes old data, no need to remove it by yourself
also the removal o all items is not to be done as you did:
$("#tablePendByOrg tbody tr").remove();
use:
$table.bootstrapTable('removeAll');

How to make href work in jquery-bootgrid basic plugin

Am using bootgrid-basic to show my data,
<table id="grid-basic"
class="table table-bordered table-striped table-condensed mb-none">
<thead>
<th data-column-id="aa">aa</th>
<th data-column-id="ss" data-order="desc">ss</th>
<th data-column-id="dd">dd</th>
<th data-column-id="ff">ff</th>
<th data-column-id="aaa">aaa</th>
<th data-column-id="aaaaa" >aaaAa</th>
</tr>
</thead>
<tbody>
#foreach($alldata as $data)
<tr>
<td>{{$data->aa}}</td>
<td>{{$data->ss}}</td>
<td>0</td>
<td>{{$data->dd}}</td>
<td>{{$data->ff}}</td>
<td>ASSSsdf</td>
</tr>
#endforeach
</tbody>
</table>
and initialized $("#grid-basic").bootgrid(); in script.
Everything is working fine like search,data ordering ,pagination but those links doesnt see to work.
If i use formatter links work and remaining doesnt work.
$("#grid-basic").bootgrid(
formatters: {
"action": function (column, row)
{
return '<a href=\"/model/' + row.actions + '"\>' +row.actions+ '</a>' ;
}});
A jsfiddle link here : http://jsfiddle.net/6xpyxbcg/

There is a parentheses missing in your JS, it should be bootgrid({ and you need to add data-formatter="link" to the th tag of the column you wish to use the formatter on (i.e. the link column).
HTML
<th data-column-id="link" data-formatter="link" >Received</th>
JQuery
$(function()
{
$("#grid-basic").bootgrid({
formatters: {
"link": function(column, row)
{
return "" + row.link + "";
}
}
}
)
});
Demo in jsFiddle
P.S. trying using the built in snippet next time, as there is a one click button that allows you to copy the code to the answer section and amend it accordingly.