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,
});
Related
I am attempting to format my table using DataTables, however I can't seem to get it working properly. I searched stack overflow, youtube, and the DataTables website for solutions and I have tried everything that I have found but still haven't gotten the result I'm looking for, particularly a horizontal scroll bar. I am very new to html and javascript so any help would be much appreciated.
Here are some of the changes I have tried, but there are many more I cannot remember.
using scrollX: true instead of "sScrollX" : "100%
setting the style tag of the table to style="overflow-x:auto;"
Removing the divs before the table
Here is what my code currently looks like:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#recon-table').DataTable({
"sScrollX": "100%",
"sScrollXInner": "110%"
});
});
</script>
<html>
<head>
<title>Recon Table</title>
</head>
<body>
<div class="box-transparent">
<div class="box-content table-scroll-box">
<table class="display nowrap" id="recon-table" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Username</th>
<th>Date of Birth</th>
<th>Language</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>somet#email.com</td>
<td>1234567890</td>
<td>uname</td>
<td>English</td>
<td>Male</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Your HTML is the issues, your missing a td tag line for the DOB column, just add that and it should work like so:
$(document).ready(function() {
$('#example').DataTable({
scrollX: true,
});
});
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone Number</th>
<th>Username</th>
<th>Date of Birth</th>
<th>Language</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>somet#email.com</td>
<td>1234567890</td>
<td>uname</td>
<td>01-June-1982</td>
<td>English</td>
<td>Male</td>
</tr>
</tbody>
</table>
I hope this helps
I'm trying to implement tablesorter with the pager function. I imported all the js files provided on the tablesorter website. Here I have my 'head' section of my Html file:
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
<script src="/js/jquery.tablesorter.pager.min.js"></script>
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js" integrity="sha512-qzgd5cYSZcosqpzpn7zF2ZId8f/8CHmFKZ8j7mU4OUXTNRd5g+ZHBPsgKEwoqxCtdQvExE5LprwwPAgoicguNg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
<script type="text/javascript">
$(function() {
$("#myTable")
.tablesorter({
theme : "bootstrap",
sortList: [[0, 0]]
},
widthFixed: true
})
.tablesorterPager({
size: 2,
container: $("#myContainer")
});
});
</script>
</head>
With the following table:
<table class="table table-bordered table-striped" id="myTable">
<thead class="thead-dark">
<tr>
<th scope="col">№</th>
<th scope="col">Name</th>
<th scope="col">Price</th>
</tr>
</thead>
<tbody>
...
</tbody>
<tfoot>
<tr>
<th colspan="3" class="ts-pager" id="myContainer">
...
</th>
</tr>
</tfoot>
</table>
However, I get this error:
$(...).tablesorter(...).tablesorterPager is not a function
What's wrong? I do everything like in the demo section and in youtube tutorials but this error appears and can't realize why.
<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>
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>
I'm using bootstrap table. In that I want to get Item ID value/values of selected table rows after clicking 'Add to cart' button present on same page.
Table code:
<table data-toggle="table" id="table-style" data-row-style="rowStyle" data-url="tables/data2.json" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="name" data-sort-order="desc" data-single-select="false" data-click-to-select="true" data-maintain-selected="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id" >Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Actual Price</th>
<th data-field="discount_price" data-sortable="true">Discount Price</th>
<th data-field="stock_avail" data-sortable="true">Stock Available</th>
</tr>
</thead>
</table>
JQuery code:
$(document).ready(function()
{
$("#add_cart").click(function()
{
//foreach selected row retrieve 'Item ID' values in array;
//call ajax for otherpage.php?arr='Item ID array';
});
});
As I'm new in bootstrap I'm trying to tackle this but not getting proper solution anybody please advise me this.
Just use the check.bs.table and uncheck.bs.table events to collect your checked rows.
BS-Table Basic Events
Here is an example:
var checkedRows = [];
$('#eventsTable').on('check.bs.table', function (e, row) {
checkedRows.push({id: row.id, name: row.name, forks: row.forks});
console.log(checkedRows);
});
$('#eventsTable').on('uncheck.bs.table', function (e, row) {
$.each(checkedRows, function(index, value) {
if (value.id === row.id) {
checkedRows.splice(index,1);
}
});
console.log(checkedRows);
});
$("#add_cart").click(function() {
$("#output").empty();
$.each(checkedRows, function(index, value) {
$('#output').append($('<li></li>').text(value.id + " | " + value.name + " | " + value.forks));
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.js"></script>
<table id="eventsTable"
data-toggle="table"
data-height="300"
data-url="https://api.github.com/users/wenzhixin/repos?type=owner&sort=full_name&direction=asc&per_page=100&page=1"
data-pagination="true"
data-search="true"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-toolbar="#toolbar">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button id="add_cart">Add to card</button>
<ul id="output"></ul>
To get the selected (checked) rows, use getSelections method.
Note that if you are using pagination, then you have to use the maintainMetaData table option.
Here is an example which displays selected product's names when user clicks on Show Selected Rows button:
var $table = $('#myTable');
function getRowSelections() {
return $.map($table.bootstrapTable('getSelections'), function(row) {
return row;
})
}
$('#showSelectedRows').click(function() {
var selectedRows = getRowSelections();
var selectedItems = '\n';
$.each(selectedRows, function(index, value) {
selectedItems += value.name + '\n';
});
alert('The following products are selected: ' + selectedItems);
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.15.5/dist/bootstrap-table.min.js"></script>
<div id="toolbar">
<button id="showSelectedRows" class="btn btn-primary" type="button">Show Selected Rows</button>
</div>
<table id="myTable" data-toolbar="#toolbar" data-toggle="table" data-maintain-meta-data="true">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">Item ID</th>
<th data-field="name" data-sortable="true">Product Name</th>
<th data-field="price" data-sortable="true">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>1</td>
<td>Chair</td>
<td>$80</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>Sofa</td>
<td>$500</td>
</tr>
<tr>
<td></td>
<td>3</td>
<td>Desk</td>
<td>$300</td>
</tr>
<tr>
<td></td>
<td>4</td>
<td>Rug</td>
<td>$200</td>
</tr>
</tbody>
</table>
Here is example give it to you :
HTML
<table id="table-style">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="id">Item ID</th>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>15</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>10</td>
</tr>
</thead>
</table>
<button>Add to cart</button>
JS
var arr;
$('button').click(function(){
arr = $('#table-style').find('[type="checkbox"]:checked').map(function(){
return $(this).closest('tr').find('td:nth-child(2)').text();
}).get();
console.log(arr);
});
DEMO
Bootstrap table has a function getSelections
with the javascript funciton you can get all selected rows. (your checkobx fiels should be bound to data-field="state")
function getIdSelections() {
return $.map($table.bootstrapTable('getSelections'), function (row) {
return row.Id
});
}