Bootstrap table not showing some filters - javascript

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"

Related

bootstrap table stuck "loading please wait"

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,
});

Bootstrap-table search is not working properly for rowspan

I'm using bootstrap-table plugin, if you search data which is rowspan row table format is getting changed, even the row count is not correct, in the attached screenshot i ve 3 rows which contains one one sub row, after rowspan count should be 3 right but in the pagination it's displaying count as 6
var $table = $('#table')
function buildTable($el, cells, rows) {
var columns = []
var data = []
var classes = $('.toolbar input:checked').next().text()
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
exportDataType: "all",
exportTypes: ['csv', 'excel'],
exportOptions: {
fileName: 'Data Export -',
},
search: true,
stickyHeader: true,
stickyHeaderOffsetLeft: '0',
stickyHeaderOffsetRight: '0',
theadClasses: classes,
pageSize: 25,
pagination: true
})
}
$(function() {
$('.toolbar input').change(function() {
buildTable($table, 0, 0)
})
buildTable($table, 0, 0)
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
<script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.16.0/dist/extensions/export/bootstrap-table-export.min.js"></script>
<style>
table td {
overflow: hidden;
}
table {
width: 600px;
table-layout: fixed;
}
td {
word-wrap: break-word;
}
</style>
</head>
<body>
<table class="table table--cells table--comfy table--hover table--striped table--dark" data-page-list="[50, 100, 150, ALL]" data-toolbar="#toolbar" id="table" data-show-columns="true" data-search="true" data-export-header="true" data-show-export="true"
style="text-align:center; ">
<thead name="theadClasses" class="bg-dark text-white">
<tr>
<th style="text-align:center" rowspan=2>Header 1</th>
<th style="text-align:center" rowspan=2>Header 2</th>
<th style="text-align:center" rowspan=2>Header 3</th>
<th style="text-align:center" colspan=3>Colspan Header</th>
</tr>
<tr>
<th style="text-align:center">Sub_header 1 </th>
<th style="text-align:center">Sub_header 2 </th>
<th style="text-align:center">Sub_header 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" rowspan=2>some_data1</td>
<td align="center" rowspan=2>some_data2</td>
<td align="center" rowspan=2>some_data3</td>
<td align="center">some_data4</td>
<td align="center">some_data5</td>
<td align="center">some_data6</td>
</tr>
<tr>
<td align="center">some_data7 </td>
<td align="center">some_data8 </td>
<td align="center">some_data9</td>
</tr>
<tr>
<td align="center" rowspan=2>some_data10</td>
<td align="center" rowspan=2>some_data11</td>
<td align="center" rowspan=2>some_data12</td>
<td align="center">some_data13</td>
<td align="center">some_data14</td>
<td align="center">some_data15</td>
</tr>
<tr>
<td align="center">some_data16 </td>
<td align="center">some_data17 </td>
<td align="center">some_data18</td>
</tr>
<tr>
<td align="center" rowspan=2>some_data19</td>
<td align="center" rowspan=2>some_data20</td>
<td align="center" rowspan=2>some_data21</td>
<td align="center">some_data22</td>
<td align="center">some_data23</td>
<td align="center">some_data24</td>
</tr>
<tr>
<td align="center">some_data25 </td>
<td align="center">some_data26 </td>
<td align="center">some_data11</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Table image.
after search
search for value some_data26
please help me to fix this.

Quick and dirty workaround:
.no-records-found{
width: max-content;
display:block;
}
This will cause the 'Not found' text to be on the left but at least it doesn't break the thead. Couldn't make it go 100% for some reason.

bootstrap-table header and body alignments are mismatching

<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>

Align 2 table, search table

For my homework i have to do multiple table with tabs.
So i want to align my table, i can align 1 but when i want align another one, thats broke everything. And i have problem with my search bar too, i have multiple search bar, and, when i search on the 2nd table that broke my 1st table.
I try to use different JS for resize my table, but, thats didnt work
function resizeTables() {
console.log("executeResize:");
var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny = $(".filter-table")[0];
var cellWidths = new Array();
for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
var cell = tableArrOrigin.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
console.log('IE ejecutado')
} else {
cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
//tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
$(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
}
}
function resizeTables2() {
console.log("executeResize2:");
var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny2 = $(".filter-table2")[0];
var cellWidths2 = new Array();
for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
var cell2 = tableArrOrigin2.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths2[j] = $(cell2).width() + 2;
console.log('IE ejecutado')
} else {
cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {
$(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Pen by Augusto</title>
<link rel='stylesheet' href="jquery-ui.css">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CodePen - A Pen by Augusto</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function change_onglet(name) {
document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_' + name).style.display = 'block';
anc_onglet = name;
}
</script>
</head>
<body>
<h1>Table Sorter Final</h1>
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
<!-- chercher le resize -->
<br/>
<br/>
<div id="combito">
<div id="separator"></div>
<div class="opt-combito" id="asc">
<!-- <img src="images/hmenu-asc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Ascending</span>
</div>
<div class="opt-combito" id="desc">
<!-- <img src="images/hmenu-desc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Descending</span>
</div>
</div>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Tableau</h1>
<table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
</thead>
</table>
<table border="1" id="tablita" class="sortable search-table">
<thead>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
<th data-field="Status" data-sortable="true" class="menu">Status</th>
<th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
</tr>
</thead>
<tbody id="tbody">
<div id="tabs1" class="tabs">
</div>
</tbody>
</table>
</div>
<!-------------------------------------------------2eme tableau------------------------------------------------------------->
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Tableau 2</h1>
<table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
</thead>
</table>
<table border="1" id="tablita2" class="sortable search-table2">
<thead>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
</tr>
</thead>
<tbody id="tbody2">
<div id="tab2" class="tabs2">
</div>
</tbody>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_hallo">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</div>
</div>
<script type="text/javascript">
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
</script>
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
<!-- non utiliser -->
<script src="js/index.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="tableau.js"></script>
<script src="tableau2.js"></script>
<script src="./script.js"></script>
<button id="ToggleIdCol">Hide/show 1st</button>
<script>
var onoff = false;
$(document).ready(function() {
$("#ToggleIdCol").click(function() {
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
onoff = !(onoff);
});
$("#tablita").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
$(value).find("td:nth-child(1)").toggle();
});
});
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle(50);
});
$("#tablita").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1)").toggle();
$(value).find("td:nth-child(1)").toggle();
});
});
</script>
</body>
</html>
I want align the search bar table, with my table on both table, so on the 1st one that's works but not on the 2nd one, and i don't understand how i can do it.
Currently it looks like this, my data are not aligned:

To have header rows of the same size (i.e. align header cells) just use one table with double header rows. One for select and one for title/labels
UPDATED
If you use JUST ONE (one - means one table which contains both filter and data/content, in your example two tables instead of four) table it is no problem with getting all columns to be aligned (i.e. remove <table id="tablita"> and merge it as shown <table id="test">). If you need to have html template structure as shown (you can not use one table) you need to sync table columns programmatically using javascript.
function syncWidth() {
const origin = $("#test > thead > tr:first-child > th");
const target= $("#tablita > thead > tr:first-child > th");
target.each((i, cell) => {
let related = origin.eq(i),
oWidth = related.outerWidth();
$(cell).css({
"min-width": oWidth
}).width(related.width());
});
}
something like this code sniplet, but you have to call that method after anything table updates (i.e. add/remove/update rows into table(s) or other data/styling/smth else size changes one of the tables). IMHO simpler change template structure to have JUST ONE table. And result of using one table instead of separated
function resizeTables() {
console.log("executeResize:");
var tableArrOrigin = $(".search-table")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny = $(".filter-table")[0];
var cellWidths = new Array();
for (j = 0; j < tableArrOrigin.rows[0].cells.length; j++) {
var cell = tableArrOrigin.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths[j] = $(cell).width() + 2; //2=padding, apply fix for IE due to box model managed differently
console.log('IE ejecutado')
} else {
cellWidths[j] = $(cell).width(); //cellWidths[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin.rows[0].cells.length; j++) {
//tableArrDestiny.rows[0].cells[j].style.width = cellWidths[j]+'px !important;';
$(tableArrDestiny.rows[0].cells[j]).attr('style', 'width:' + cellWidths[j] + 'px !important');
}
}
function resizeTables2() {
console.log("executeResize2:");
var tableArrOrigin2 = $(".search-table2")[0]; //var tableArr = document.getElementsByTagName('table');
var tableArrDestiny2 = $(".filter-table2")[0];
var cellWidths2 = new Array();
for (j = 0; j < tableArrOrigin2.rows[0].cells.length; j++) {
var cell2 = tableArrOrigin2.rows[0].cells[j];
if ($('body.ie').length > 0) { //IE browser
cellWidths2[j] = $(cell2).width() + 2;
console.log('IE ejecutado')
} else {
cellWidths2[j] = $(cell2).width(); //cellWidths2[j] = cell.clientWidth - $(cell).css('padding-right')-$(cell).css('padding-left');
console.log('No IE ejecutado')
}
}
for (j = 1; j < tableArrOrigin2.rows[0].cells.length; j++) {
$(tableArrDestiny2.rows[0].cells[j]).attr('style', 'width:' + cellWidths2[j] + 'px !important');
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A Pen by Augusto</title>
<link rel='stylesheet' href="jquery-ui.css">
<link rel="stylesheet" href="./style.css">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CodePen - A Pen by Augusto</title>
<link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
<link rel="stylesheet" href="style.css">
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
function change_onglet(name) {
document.getElementById('onglet_' + anc_onglet).className = 'onglet_0 onglet';
document.getElementById('onglet_' + name).className = 'onglet_1 onglet';
document.getElementById('contenu_onglet_' + anc_onglet).style.display = 'none';
document.getElementById('contenu_onglet_' + name).style.display = 'block';
anc_onglet = name;
}
</script>
</head>
<body>
<h1>Table Sorter Final</h1>
<input type="search" class="light-table-filter" data-table="search-table" placeholder="Search..">
<!-- chercher le resize -->
<br/>
<br/>
<div id="combito">
<div id="separator"></div>
<div class="opt-combito" id="asc">
<!-- <img src="images/hmenu-asc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Ascending</span>
</div>
<div class="opt-combito" id="desc">
<!-- <img src="images/hmenu-desc.gif" alt="" /> -->
<!-- non utiliser -->
<span>Sort Descending</span>
</div>
</div>
<div class="systeme_onglets">
<div class="onglets">
<span class="onglet_0 onglet" id="onglet_quoi" onclick="javascript:change_onglet('quoi');">Tableau</span>
<span class="onglet_0 onglet" id="onglet_pourquoi" onclick="javascript:change_onglet('pourquoi');">Pourquoi</span>
<span class="onglet_0 onglet" id="onglet_hallo" onclick="javascript:change_onglet('hallo');">hallo</span>
</div>
<div class="contenu_onglets">
<div class="contenu_onglet" id="contenu_onglet_quoi">
<h1>Tableau</h1>
<table id="test" class="filter-table" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width:95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
<th data-field="Status" data-sortable="true" class="menu">Status</th>
<th data-field="Vehicle" data-sortable="true" class="menu">Vehicle</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>1</td>
<td>Person1 Name</td>
<td>Person1 Phone</td>
<td>Person1 Email</td>
<td>Person1 City</td>
<td>Person1 State</td>
<td>Person1 Zip Code</td>
<td>Person1 Status</td>
<td>Person1 Vehicle</td>
</tr>
<tr>
<td>2</td>
<td>Person2 Name</td>
<td>Person2 Phone</td>
<td>Person2 Email</td>
<td>Person2 City</td>
<td>Person2 State</td>
<td>Person2 Zip Code</td>
<td>Person2 Status</td>
<td>Person2 Vehicle</td>
</tr>
</tbody>
</table>
</div>
<!-------------------------------------------------2eme tableau------------------------------------------------------------->
<div class="contenu_onglet" id="contenu_onglet_pourquoi">
<h1>Tableau 2</h1>
<table id="test2" class="filter-table2" style="border-spacing: 0px;" border="1">
<thead>
<tr>
<th style="padding: 0px; width: 20px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<div style="width:95px"> </div>
</th>
<th style="padding: 0px;"><input type="text" style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn" /></th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
<th style="padding: 0px;">
<select style="display:block;width: 95%;margin-left: auto;margin-right: auto;" class="searchByColumn">
<option selected="true" value="">--All--</option>
</select>
</th>
</tr>
<tr>
<th id="column-a" class="menu" style="width: 10px;">ID</th>
<th data-field="Name" data-checkbox="true" class="menu">Name</th>
<th data-field="Phone" data-filter-control="input" data-sortable="true" class="menu">Phone</th>
<th data-field="Email" data-filter-control="select" data-sortable="true" class="menu">Email</th>
<th data-field="City" data-filter-control="select" data-sortable="true" class="menu">City</th>
<th data-field="State" data-sortable="true" class="menu">State</th>
<th data-field="Zipcode" data-sortable="true" class="menu">Zip Code</th>
</tr>
</thead>
<tbody id="tbody2">
<div id="tab2" class="tabs2">
</div>
</tbody>
</table>
</div>
<div class="contenu_onglet" id="contenu_onglet_hallo">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</div>
</div>
</div>
<script type="text/javascript">
var anc_onglet = 'quoi';
change_onglet(anc_onglet);
</script>
<script src='https://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
<!-- non utiliser -->
<script src="js/index.js"></script>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="tableau.js"></script>
<script src="tableau2.js"></script>
<script src="./script.js"></script>
<button id="ToggleIdCol">Hide/show 1st</button>
<script>
var onoff = false;
$(document).ready(function() {
$("#ToggleIdCol").click(function() {
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1),td:nth-child(1)").toggle();
onoff = !(onoff);
});
});
$("#test").find("tr").each(function(key, value) {
$(value).find("th:nth-child(1),td:nth-child(1)").toggle(50);
});
});
</script>
</body>
</html>

Table cells unintentionally change size after a click event

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>

Categories

Resources