When I try to remake this example of Group Columns: http://issues.wenzhixin.net.cn/bootstrap-table/index.html#options/group-columns.html
from the Bootstrap table documentation, I get a wrong result. The header gets duplicated and shown twice.
My code is here:
TYPE html>
<html>
<head>
<title>Group Columns</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.min.css">
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/bootstrap-table.js"></script>
</head>
<body>
<div class="container">
<h1>Group Columns</h1>
<p>Use <code>rowspan, colspan</code> options to set the group columns header.</p>
<table id="table" data-toggle="table">
<thead>
<tr>
<th colspan="2">Item Detail</th>
<th data-field="id" rowspan="2" data-valign="middle">Item ID</th>
</tr>
<tr>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="border: 1px solid black">1</td>
<td style="border: 1px solid black">2</td>
<td style="border: 1px solid black">3</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and it is shown in the following JSFiddle http://jsfiddle.net/mwe2ufzg/.
Try updating to bootstrap-table version 1.9.0
I got the same issue here. I found that it will generate two headers in the HTML. One is used for fixed header and another in the tbody.
I resolve it by hide the header in body.
var th = $(".fixed-table-body > thread");
th.hide();
Related
I am using bootgrid table. Here I am trying to show the columns based on user preference.
For example, there are 4 columns in the table. If the user uncheck the 3rd column. Remaining 1st, 2nd and 4th column will be visible.
My issue is that, after the page load, bootgrid shows all the columns. But I want to show only the columns which is preferred by users before page load.
$(function() {
$('#data-table').bootgrid();
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#3.1.1/dist/css/bootstrap.min.css"
rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.1.1/dist/js/bootstrap.min.js">
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.2.0/jquery.bootgrid.min.js'>
</script>
<table class="table table-bordered" id="data-table">
<thead>
<tr>
<th data-column-id="id" data-type="numeric">ID</th>
<th data-column-id="sender" data-visible="false">Sender</th>
<th data-column-id="received" data-order="desc">Received</th>
<th data-column-id="imgsrc"
data-identifier="true"
data-type="string"
data-visible="false">Img src</th>
<th data-column-id="image" data-formatter="link">Link</th>
<th data-column-id="commands"
data-formatter="commands"
data-sortable="false">Commands</th>
</tr>
</thead>
<tbody>
<tr>
<td>10238</td>
<td>eduardo#pingpong.com</td>
<td>14.10.2013</td>
<td>
https://placeholdit.imgix.net/~text?txtsize=23
</td>
</tr>
<tr>
<td>10243</td>
<td>eduardo#pingpong.com</td>
<td>19.10.2013</td>
<td>https://placeholdit.0&h=50</td>
</tr>
<tr>
<td>10248</td>
<td>eduardo#pingpong.com</td>
<td>24.10.2013</td>
<td>https://placeholdit.imgix.n&h=50</td>
</tr>
</tbody>
</table>
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
<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 am using a jQuery table to show my data. There I have 2 buttons previous and next for pagination. But I want to add a scroll bar in the bottom of the table. I wrote
overflow:scroll
in CSS, but it didn't work.
Here is my code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Query Result Page</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="css/jdpicker.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
</head>
<body>
//this is the jQuery function for table //
<script type="text/javascript">
$(document).ready(function() {
$('#tableData').dataTable();
} );
</script>
// these are the CSS classes that will create the table look and feel
<table class="tableData context-menu-one" id="tableData" style="overflow-x: scroll ">
<thead> // this is column for tables which will contain the values from the database //
<tr style="font-size: 14px;" >
<th width="20%" align="left">Name</th>
<th width="20%" align="left">Class</th>
<th width="20%" align="left">Roll</th>
<th width="20%" align="left">Address</th>
<th width="20%" align="left">Marks</th>
</tr>
</thead>
// this is table values here we will list some values dynamically which will come from database
<tr style="font-size: 14px;" >
<th width="20%" align="left">john</th>
<th width="20%" align="left">9</th>
<th width="20%" align="left">47</th>
<th width="20%" align="left">mumbai</th>
<th width="20%" align="left">52</th>
</tr>
<tbody>
<tbody>
</tbody>
</table>
</body>
</html>
Someone please help me
The overflow property must be applied on the table container and not the table itself.
If the scrollbar is not appearing, it's because the table width is less than the container width.