So I want to add a class to my table rows except the header but I can't figure out how to do it. Does somebody know how i can do this?
this is my table:
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
and this is currently where i add the data and want to add the classes to the rows
$('#table').bootstrapTable({
data: returnValue
});
look at the bootstrap table documentation and use the row style properties,
I'm not familiar with that plugin but I guess it should be something like this
$('#table').bootstrapTable({
data: returnValue,
rowStyle : function(row, index) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
});
read the docs here http://bootstrap-table.wenzhixin.net.cn/documentation/
1st : add tbody tag in html table
2nd : simple add the class for you tbody tr only like this
$('#table tbody tr').addClass("newclass");
HTML :
<table id="table" class="hidden table table-bordered table-striped table-hover">
<thead>
<tr>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody> //tbody added here
<tr>
....
</tr>
</tbody>
</table>
In jquery
$('#table tbody tr').addClass("newclass");
Related
I have a script that was working to parse a table to json.
It worked fine like this
<thead id="itemspecthead" class="itemspectheadc">
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
With the script logic:
var headers = [];
$(rows.shift()).find('th:first:not(:empty), th:nth-child(2):not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
But trying to stylize my table, I added a couple other rows to my table header.
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
If I remove the two extra rows in my thead, the script works fine.
It seems the error is in this logic .find('th:first:not(:empty), th:nth-child(2):not(:empty)')
I've tried changing it to .find('th.ishead:first:not(:empty), and .find('.ishead th:first:not(:empty), to find it via classname with no luck.
How can I target my ishead th rows while keeping the extra colspan="2" rows in my thead?
Here's my onclick function that is now returning name,value,name,value (duplicating it twice for some reason..). This is literally my entire on click function script, I removed everything else.
$(document).on('click', '#editjson', function() {
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
alert('headers: ' + headers);
console.log(headers);
});
returns name,value,name,value...
Apply :not(:empty) directly to all th (not on any particular-one)
Do like below:-
$(rows.shift()).find('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
Working sample:-
$(document).ready(function(){
var headers = [];
$('th.ishead:not(:empty)').each(function () {
headers.push($(this).text().toLowerCase());
});
console.log(headers);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead id="itemspecthead" class="itemspectheadc">
<tr><td colspan="2" class="tdheader"><span>Item Specifics:</span></td></tr>
<tr><td colspan="2" class="speccaption"><span>(Generated from Unique Values from All Listings)</span><br /></td></tr>
<tr>
<th class="ishead isheadname">Name</th>
<th class="ishead isheadvalue">Value</th>
</tr>
</thead>
</table>
So i got this table
<table id="table" class="table table-bordered table-hover">
<thead>
<tr>
<th data-field="id" class="hidden">ID</th>
<th data-field="variant">Variant</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
it will be filled with data trough
$('#table').bootstrapTable({
data: returnValue
});
then i can click the rows which will add the class .bg-info to it and i want to check if a row has the class and then save the row data in a var
this was my attempt:
var item = $.map(table.rows('.bg-info').data(), function (item) {
return item[0]
});
but table.rows can't be used as a method apparently
If you want to select all the rows with the class bg-info in your table. Use a jQuery selector based on that class :
var bgInfoRows = $("#table tbody .bg-info");
You will have every item in tbody that has the class bg-info.
I'm currently trying to fill dynamically a table with content retrieved from a JSON Object.
Here is the table:
<table id="datatable_tabletools" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand">Nom</th>
<th data-hide="phone">Commentaires</th>
<th data-hide="phone,tablet">Date</th>
<th data-hide="phone,tablet">Attachements</th>
<th data-hide="phone,tablet">Actions</th>
</tr>
</thead>
<tbody id="table">
</tbody>
</table>
I have multiple interesting features in the table such as a search option, a filter, sort, export as PDF, etc,....those features are working properly if I'm including static content such as:
<tr>
<td>33</td>
<td>Bevis</td>
<td>1-955-717-0835</td>
<td>Est Ac Inc.</td>
<td>7424</td>
<td>Ichtegem</td>
</tr>
but as soon as I retrieve data table content from My JSON object, I'm not able to use those features anymore, sort doesn't work, search neither.
Here is the JavaScript I'm using:
$(document).ready(function() {
$.get('getAllDocuments', function(responseJson) {
if (responseJson != null) {
var table1 = $("#table");
$.each(responseJson, function(key, value) {
var rowNew = $("<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>");
rowNew.children().eq(0).text(value['id']);
rowNew.children().eq(1).text(value['nom']);
rowNew.children().eq(2).text(value['commentaire']);
rowNew.children().eq(3).text(value['date']);
rowNew.children().eq(4).text(value['id']);
rowNew.children().eq(5).html("Voir Supprimer");
rowNew.appendTo(table1);
});
}
});
});
My table is filled correctly, but not all the functions associated. any idea on how I can fill my table with JSON content in a proper way?
I think you can use ajax option of DataTables like:
var table = $('#example').DataTable( {
ajax: 'data.json'
});
P.S. here is the documentation
I have a table in HTML on my webpage, and when using JQuery to export it to Excel, it will not work if I have any id or class tags in the table header.
the JQuery i am using is
//wont work unless the table has no class or id
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' + $("#tableForExcel").html());
e.preventDefault();
});
The table I am using is
<table id='SearchTable' class='table table-bordered table-striped table-hover table blue '>
<tr>
<th class='ReportManager'>Report Manager</th>
<th class='ReportDetail'>Report Detail</th>
<th class='Form'>Form</th>
</tr>
<tr>
<td class='ReportManager'></td>
<td class='ReportDetail'></td>
<td class='Form'></td>
</tr>
<tr>
<td class='ReportManager'></td>
<td class='ReportDetail'></td>
<td class='Form'></td>
</tr>
</table>
I would be grateful if you could help me \ show me how i should adjust my code to get this to export.
I've solved the problem this way:
$("#btnExport").click(function (e) {
window.open('data:application/vnd.ms-excel,' +'<table>' +$("#SearchTable").html()+ '</table>');
e.preventDefault();
});
I hope it helps you.
I have the following html code for table:
<table id="employeeDetails" class="table table-bordered table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
<th>Team</th>
</tr>
</thead>
</table>
And the following code for dataTable initialization:
$('#employeeDetailsTable').dataTable({
"processing":true,
"ajax" : {
"url" : '/fetchSearchResults',
"type" : 'POST'
}
}
});
I read in many places on the internet that sorting feature and search box in datatable is not provided if colspan is used. Even after not using colspan I'm not getting these features in my datatable. What can be the possible reason for this?