<thead>
<tr>
<th rowspan="2" data-field="id">SL</th>
<th rowspan="2" data-field="name">Region</th>
<th rowspan="2" data-field="price">PG Type</th>
<th rowspan="2" data-field="Fullname">Status</th>
<th colspan="2">CPO Patients</th>
<th colspan="5">Billing and Contract</th>
</tr>
<tr>
<th data-field="Email">Met</th>
<th data-field="Id">Possible</th>
<th data-field="Name">Billable</th>
<th data-field="Surname">Last Paid</th>
<th data-field="Fullname">Contract Info.</th>
<th data-field="Email">Payment Info.</th>
<th data-field="Iame">In Person Visit</th>
</tr>
</thead>
</table>
With this code i am getting the body aligned mismatch and when i have few columns then it is working fine. I am using bootstrap 3 version.
With this code i am getting the body aligned mismatch and when i have few columns then it is working fine. I am using bootstrap 3 version.
This will align all the th in one line ,
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<tdble style="border : 1px solid black">
<thead>
<tr>
<th colspan="2" data-field="id">PR</th>
<th colspan="2" data-field="id">SL</th>
<th colspan="2" data-field="name">Region</th>
<th colspan="2" data-field="price">PG Type</th>
<th colspan="2" data-field="Fullname">Status</th>
<th colspan="1">CPO Patients</th>
<th colspan="5">Billing and Contract</th>
</tr>
<tr style="text-align: center">
<th data-field="Email">Met</th>
<th data-field="Id">Possible</th>
<th data-field="Name">Billable</th>
<th data-field="Surname">Last Paid</th>
<th data-field="Fullname">Contract Info.</th>
<th data-field="Email">Payment Info.</th>
<th data-field="Iame">In Person Visit</th>
</tr>
</thead>
</table>
</body>
</html>
Related
Question
When I click the table header row, I would like a generic function to get the id of the clicked <th> element, so I don't have to create a separate function for each header item.
I'm using jQuery, and have the following code:
HTML
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
JavaScript
$("#h-tr").click(function(item) {
console.log(item);
// get the id of the clicked <th>
});
if you include the th to the selector then you can access the id using $(this)
$("#h-tr th").click(function(item) {
console.log($(this).prop('id'));
});
With plain Vanilla JS
You can call querySelectorAll() on all th elements and use a loop
to iterate and console.log() attributes once the EventListener is
triggered by the element clicked.
document.querySelectorAll('th').forEach(element => {
element.addEventListener('click', () => {
console.log(element.getAttribute('id'))
})
})
th{cursor:pointer}
<div id="title">
<table class="policies sortable">
<thead id="h-th">
<tr id="h-tr">
<th width="3%" id="h-client">Client</th>
<th width="7%" id="h-company-code">Company Code</th>
<th width="9%" id="h-unique-reference">Unique Reference</th>
<th width="8%" id="h-doc-date">Document Date</th>
<th width="8%" id="h-post-date">Posting Date</th>
<th width="7%" id="h-doc-type">Document Type</th>
<th width="5%" id="h-trip-id">Trip Id</th>
<th width="7%" id="h-ticket-no">Ticket Number</th>
<th width="6%" id="h-calc-tax">Calculate Tax</th>
<th width="15%" id="h-passenger-name">Passenger Name</th>
<th width="4%" id="h-error">Valid</th>
<th width="4%" id="h-processed">Processed</th>
<th width="4%" id="h-payment">Payment</th>
<th width="11%" id="h-updated">Updated</th>
</tr>
</thead>
</table>
</div>
I'm trying to insert some data from an API into a table with bootstrapTable but I'm stuck on "loading.."
What's wrong in my code??
Many thanks for your help!
<table id="table" data-toggle="table" data-height="460" data-ajax="ajaxRequest" data-search="true"
data-side-pagination="server" data-pagination="true">
<thead>
<tr>
<th data-field="Country" data-sortable="true">Country</th>
<th data-field="CountryCode" data-sortable="true">CountryCode</th>
<th data-field="Confirmed" data-sortable="true">Confirmed</th>
<th data-field="Deaths" data-sortable="true">Deaths</th>
<th data-field="Recovered" data-sortable="true">Recovered</th>
<th data-field="Active" data-sortable="true">Active</th>
<th data-field="Date" data-sortable="true">Date</th>
</tr>
</thead>
<script>
$.get("https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z", function (data) {
$(function () {
$('#table').bootstrapTable({
data: JSON.parse(data)
});
});
});
I've added these first:
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<link href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/extensions/export/bootstrap-table-export.min.js"></script>
Just define the table with the data-url there and quit the <script>
<table
data-toggle="table"
data-url="https://api.covid19api.com/country/italy?from=2020-03-01T00:00:00Z&to=2020-04-01T00:00:00Z"
data-pagination="true"
data-search="true">
<thead>
<tr>
<th data-field="Country" data-sortable="true">Country</th>
<th data-field="CountryCode" data-sortable="true">CountryCode</th>
<th data-field="Confirmed" data-sortable="true">Confirmed</th>
<th data-field="Deaths" data-sortable="true">Deaths</th>
<th data-field="Recovered" data-sortable="true">Recovered</th>
<th data-field="Active" data-sortable="true">Active</th>
<th data-field="Date" data-sortable="true">Date</th>
</tr>
</thead>
</table>
Thanks all guys, the data wasn't a JSON string anymore, but already a JavaScript object.. my bad!
$("#table").bootstrapTable({
data: data,
});
<table id="table-DataView-Ceft-History" class="table table-bordered v-table">
<thead>
<tr>
<th style="width:auto;">Date</th>
<th style="width:auto;">MBSL Account No</th>
<th style="width:auto;">Reference No</th>
<th style="width:auto;">Amount(LKR)</th>
<th style="width:auto;">Reason</th>
<th style="width:auto;">Third Party Acc No</th>
<th style="width:auto;">Transfer status</th>
<th style="width:auto;">Target Bank</th>
<th style="width:auto;">Transfer By</th>
</tr>
</thead>
</table>
Using jQuery, it can be done by css method
$('#table-DataView-Ceft-History thead th').css('text-align', 'right');
OR, we can use text-align: right; css property for right alignment of text in th tags
th {
text-align: right;
}
<table id="table-DataView-Ceft-History" class="table table-bordered v-table">
<thead>
<tr>
<th style="width:auto;">Date</th>
<th style="width:auto;">MBSL Account No</th>
<th style="width:auto;">Reference No</th>
<th style="width:auto;">Amount(LKR)</th>
<th style="width:auto;">Reason</th>
<th style="width:auto;">Third Party Acc No</th>
<th style="width:auto;">Transfer status</th>
<th style="width:auto;">Target Bank</th>
<th style="width:auto;">Transfer By</th>
</tr>
</thead>
</table>
I have been trying to display this bootstrap table with data-filter-controlbut I still haven't been able to do so. The filters are not working in two ways:
The filter does not display all the categories included in that column
The filter does not work at all
Could anyone please help me figure this out? Below is the whole script. Thanks!
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
<link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
<meta name="apple-mobile-web-app-title" content="CodePen">
<link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
<link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111">
<title>CodePen - Bootstrap Table - Filter control</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css">
<link rel="stylesheet" href="https://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css">
<style>
.container {
width: 1100px;
padding: 2em;
}
.bold-blue {
font-weight: bold;
color: #0277BD;
}
</style>
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
</head>
<body translate="no">
<div class="container">
<h1>Bootstrap table with filters</h1>
<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-search="true"
data-filter-control="true"
data-show-export="true"
data-click-to-select="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="Income Assets" data-filter-control="select" data-sortable="true">Income Assets</th>
<th data-field="Employed Full" data-filter-control="select" data-sortable="true">Employed Full</th>
<th data-field="Bachelor" data-filter-control="select" data-sortable="true">Bachelor</th>
<th data-field="High School" data-filter-control="select" data-sortable="true">High School</th>
<th data-field="English" data-filter-control="select" data-sortable="true">English</th>
<th data-field="Age" data-filter-control="select" data-sortable="true">Age</th>
<th data-field="HH Member +5" data-filter-control="select" data-sortable="true">HH Member +5</th>
<th data-field="Health" data-filter-control="select" data-sortable="true">Health</th>
<th data-field="Benefit M1" data-filter-control="select" data-sortable="true">Benefit M1</th>
<th data-field="Cit" data-filter-control="select" data-sortable="true">Cit</th>
<th data-field="Sample Used Benefits" data-filter-control="select" data-sortable="true">Sample Used Benefits</th>
<th data-field="Total Sample" data-filter-control="select" data-sortable="true">Total Sample</th>
<th data-field="Total Weighted Pop." data-filter-control="select" data-sortable="true">Total Weighted Pop.</th>
<th data-field="Weighted Used Benefits" data-filter-control="select" data-sortable="true">Weighted Used Benefits</th>
<th data-field="Use Rate" data-filter-control="select" data-sortable="true">Use Rate</th>
</tr>
</thead>
<tbody>
<tr><td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>7218</td><td>38725</td><td>273927698.951485</td><td>44936410.729928</td><td>0.164044785912237</td></tr>
<tr><td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>6902</td><td>37851</td><td>267669426.039534</td><td>42804442.2445731</td><td>0.159915321215098</td></tr>
<tr><td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6818</td><td>36928</td><td>259231128.693021</td><td>41949287.17618</td><td>0.161821951660196</td></tr>
<tr><td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>6638</td><td>36499</td><td>256169883.708981</td><td>40725041.7232831</td><td>0.158976695986435</td></tr>
<tr><td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>*</td><td>YES</td><td>*</td><td>*</td><td>5445</td><td>32836</td><td>240442125.749909</td><td>35317041.6922081</td><td>0.146883752512413</td></tr>
</tbody>
</table>
</div>
<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-9bf952ccbbd13c245169a0a1190323a27ce073a3d304b8c0fdf421ab22794a58.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js"></script>
<script src="https://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script id="rendered-js">
//exporte les données sélectionnées
var $table = $('#table');
$(function () {
$('#toolbar').find('select').change(function () {
$table.bootstrapTable('refreshOptions', {
exportDataType: $(this).val() });
});
});
var trBoldBlue = $("table");
$(trBoldBlue).on("click", "tr", function () {
$(this).toggleClass("bold-blue");
});
//# sourceURL=pen.js
</script>
</body></html>
Filters don't work when there is a space in the data-field attribute, like data-field="Income Assets"
I am dynamically building a table using JS but, for some reason, after clicking on the btn_dropdown0 "button", which is supposed to hide and show the tbody, the button itself gets slightly moved left and right. The reason for this, after inspecting my code behavior, is that the two blank th are resizing, probably due to the fact that when the tbody is visibile, the cells on the row below contain some data and so they get stretched.
This is my table replicated and the jQuery handling the effects:
$('#btn_dropdown0').click(function() {
if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
$(this).css({'transform': ''});
$('#tbody0').hide();
}else{
$(this).css({'transform': 'rotate(180deg)'});
$('#tbody0').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
<thead class="thead-dark">
<tr>
<th scope="col">Bangkok</th>
<th scope="col">Milan</th>
<th scope="col">Flight type: international</th>
<th scope="col"></th>
<th scope="col"></th>
<th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
</tr>
</thead>
<tbody id="tbody0" style="display: none;">
<tr>
<td>Monday</td>
<td>15:00</td>
<td>16:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
<tr>
<td>Tuesday</td>
<td>22:00</td>
<td>23:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
</tbody>
</table>
Add width to th, it will remain in same position. As there is no width to th so it is taking according to content size in it. Now when you click it is flickering due to scrollbar. Check it in full page mode.
$('#btn_dropdown0').click(function() {
if($(this).css('transform') == 'matrix(-1, 0, 0, -1, 0, 0)'){
$(this).css({'transform': ''});
$('#tbody0').hide();
}else{
$(this).css({'transform': 'rotate(180deg)'});
$('#tbody0').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-hover text-center">
<thead class="thead-dark">
<tr>
<th scope="col" width="15%">Bangkok</th>
<th scope="col" width="15%">Milan</th>
<th scope="col" width="45%">Flight type: international</th>
<th scope="col" width="10%"></th>
<th scope="col" width="10%"></th>
<th scope="col"><i class="fas fa-chevron-circle-down" id="btn_dropdown0"></i></th>
</tr>
</thead>
<tbody id="tbody0" style="display: none;">
<tr>
<td>Monday</td>
<td>15:00</td>
<td>16:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
<tr>
<td>Tuesday</td>
<td>22:00</td>
<td>23:00</td>
<td>Supported airplanes: 1,4,5</td>
<td><button class="btn btn-info">Reserve</button></td>
</tr>
</tbody>
</table>