I am using Bootstrap to build a website that calculates some one-variable statistics and displays the result. However, when the results are displayed, the table looks very uneven, as shown here (in the bottom table:
The contents of the table rows are filled by a JavaScript function (which does work).
.table {
width: 80vw;
content-align: center;
margin: 20px auto;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Statistics</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"> </script>
</head>
<body>
<table class="table">
<thead>
<tr>
<th scope="col">Mean</th>
<th scope="col">Mode</th>
<th scope="col">Standard Deviation</th>
<th scope="col">Variance</th>
<th scope="col">Range</th>
</tr>
</thead>
<tbody>
<tr id="others">
</tr>
</tbody>
</table>
</body>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<table class="table table-striped table-hover responsive" style="width:100%">
<thead>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</thead>
<tbody>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
<tr>
<td>hi 1</td>
<td>hi 2</td>
<td>hi 3</td>
<td>hi 4</td>
<td>hi 5</td>
<td>hi 6</td>
</tr>
</tbody>
</table>
1- THs needs to be inside a TR (table row)
2- TH and TD needs to match (use colspan to match if you don't have the relative TD).
<tbody>
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr id="others">
<td colspan="6"></td>
</tr>
</tbody>
</tbody>
Related
I am having an odd issue using DataTables with fixedColumn. Everything works fine but there is an space between the header and the list of rows that is displayed every-time I scroll the table horizontally.
Datatable issue
However, I can scroll all fixed rows and the table looks fine. (Try this by clicking on any row into the first column and press arrows up and down)
DataTable after scrolling the fixedColumn
Does anyone knows how to avoid this annoying issue? I appreciate any suggestion.
Here the code and libraries I am using.
$(document).ready(function() {
$('#MyTable').DataTable({
paging: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 1
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.3/css/fixedHeader.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedheader/3.1.3/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<table class="table table-bordered text-center" id="MyTable" style="width: 100%;">
<thead style="background-color: black; color: white;">
<tr>
<th style="vertical-align: middle; text-align: center;">Fixed</th>
<th style="vertical-align: middle; text-align: center;">X</th>
<th style="vertical-align: middle; text-align: center;">Y</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
You need to use fixedColumns.bootstrap.min.css instead of fixedColumns.dataTables.min.css
See official example for more information.
See updated example below.
$(document).ready(function() {
$('#MyTable').DataTable({
paging: false,
info: false,
scrollX: true,
fixedColumns: {
leftColumns: 1
}
});
});
.table-style1 thead th {
background-color: black;
color: white;
vertical-align: middle;
text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Data Table-->
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>
<table class="table table-bordered text-center table-style1" id="MyTable" style="width: 100%;">
<thead>
<tr>
<th>Fixed</th>
<th>X</th>
<th>Y</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
You are using too much css files fo dataTables which are conflicting with each other.
Just use dataTables.bootstrap.min.css
Stack Snippet
$(document).ready(function() {
var table = $('#MyTable').DataTable({
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
}
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js"></script>
<table class="table table-bordered text-center" id="MyTable" style="width: 100%;">
<thead style="background-color: black; color: white;">
<tr>
<th style="vertical-align: middle; text-align: center;">Fixed</th>
<th style="vertical-align: middle; text-align: center;">X</th>
<th style="vertical-align: middle; text-align: center;">Y</th>
<th style="vertical-align: middle; text-align: center;">Z</th>
<th style="vertical-align: middle; text-align: center;">Z</th>
</tr>
</thead>
<tbody>
<tr class="success">
<td>row 1</td>
<td>193.38867</td>
<td>150.45493</td>
<td>150.45493</td>
<td>150.45493</td>
</tr>
<tr class="danger">
<td>row 2</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 3</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 4</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="success">
<td>row 5</td>
<td>578.30164</td>
<td>544.329</td>
<td>544.329</td>
<td>544.329</td>
</tr>
<tr class="success">
<td>row 6</td>
<td>934.5156</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr class="danger">
<td>row 7</td>
<td>0</td>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
i have a table there i have included a button for action , because of that the search is not working on that table.
Here is Demo:https://jsfiddle.net/pkxmnh2a/33/
$(document).ready(function() {
var table = $('#examples').DataTable();
$('a.toggle-vis').on('click', function(e) {
e.preventDefault();
var column = table.column($(this).attr('data-column'));
column.visible(!column.visible());
});
$('#examples tfoot th').each(function() {
var title = $('#examples thead th').eq($(this).index()).text();
$(this).html('<input tyepe="text" placeholder="Search ' + title + '"/>');
});
table.columns().eq(0).each(function(colIdx) {
$('input', table.column(colIdx).footer()).on('keyup change', function() {
table
.column(colIdx)
.search(this.value)
.draw();
});
});
});
.widthind {
width: 30px;
height: 30px;
background-color: black;
color: white;
}
form {
margin: 0;
padding: 0;
display: -webkit-inline-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet" />
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
</tr>
<thead class="thead-dark excludeAction" style="background-color: !important;">
<tr>
<th colspan="50">
Delete
</th>
</tr>
</thead>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
</tr>
</tfoot>
</table>
The problem is you are heading thead tags within the rows of the table. This is not within the spec plus it won't work for Datatables. Plus Datatables doesn't support colspan or rowspan within the tbody (rows).
After fixing the buttons the search still doesn't work because of the selector you have on this line:
$('input', table.column(colIdx).footer()).on('keyup change', function () {
This is affecting the global search also. Compare your code to this example:
https://datatables.net/examples/api/multi_filter.html
Kevin
A thead never goes inside tbody.
Check this jsfiddle.net/nfycu6o5/1.
Correct html table:
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Your row is creating inside the thead element, the search given in datatable will search from the tbody element instead of thead
Eg: when you type on the searchbox, keyup event will trigger and find the results from table body and your table header always remains the same
<table class="table table-boardered" id="examples">
<thead class="thead-dark">
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>2PslfYy</td>
<td>He-man </td>
<td>good product 1</td>
<td>Delete</td>
</tr>
<tr>
<td>3lpnSrv</td>
<td>Jhon Doe</td>
<td>good product 2</td>
<td>Delete</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Id</th>
<th>Customer Name</th>
<th>Description</th>
<th></th>
</tr>
</tfoot>
</table>
Check the code bellow. My code currently working fine but when I click "More" button its expends all rows and once i click "Less" it collapse all rows. My goal is: by default display only first 6 rows when I click more it will load reset all available rows. Then when I click "Less" it will collapse only the expended rows the 6 rows will be as like default position. And if the rows less then 6 then this button will just not do anything. Also if possible I wanted slow dropdown not slow hide/show.
How can I achieve that?
$(".table").children("tbody").hide();
$("#expendbtn").html("More");
$("#expendbtn").click(function(){
if ($("#expendbtn").text()=="More") {
$(".table").children("tbody").show("slow");
$("#expendbtn").html("Less");
} else {
$(".table").children("tbody").hide("slow");
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
This will work for you.
A simple tweak inside you script, I have changed this ↓
$(".table").children("tbody").hide();
to this ↓
$(".table").find("tr").hide().slice(0, 7).show();
A working fiddle for you. ↓
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").show();
$("#expendbtn").html("Less");
} else {
$(".table").find("tr").hide().slice(0, 7).show();
$("#expendbtn").html("More");
}
});
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Updated 2 with transition
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
$("#expendbtn").click(function() {
if ($("#expendbtn").text() == "More") {
$(".table").find("tr").removeClass('slideUp');
$("#expendbtn").html("Less");
} else {
$(".table").find("tr:nth-child(6)").nextAll().addClass('slideUp');
$("#expendbtn").html("More");
}
});
.table tbody{
}
.table tr{
transition: all ease-in-out 0.4s;
overflow:hidden;
max-height:100px;
}
.table tr.slideUp{
transform: scaleY(0);
display:block;
max-height:0px;
}
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<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>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th>
<h4>Main Cat</h4>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
</body>
</html>
Here you go with a solution https://jsfiddle.net/v5pvxujp/1/
$("#expendbtn")
.html("More")
.click(function(){
if ($("#expendbtn").text()=="More") {
$('table tr:nth-child(n+7)').fadeIn('slow');
$("#expendbtn").html("Less");
} else {
$('table tr:nth-child(n+7)').fadeOut('slow');
$("#expendbtn").html("More");
}
});
.hideRow {
display: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
<tr class="hideRow">
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
Hope this will help you.
A working, shorter and expendable example:
/**
* Hide every row from +irow+
* If +animateIt+ is true, animate the dropdown
*
*/
function hideRowsStartingAt(irow, animateIt)
{
$(".table tbody").children("tr:nth-child(n+"+irow+")").hide(animateIt ? 'slow' : null);
}
// Set up
hideRowsStartingAt(7);
$("#expendbtn").html("More");
// Wait (for click) and see
$("#expendbtn").click(function(){
// Collapse or expend ?
var doExpend = $("#expendbtn").text() == "More" ;
if ( doExpend )
{
$(".table tbody").children("tr").show('slow');
}
else // doCollapse
{
hideRowsStartingAt(7, true);
}
// Button name is now…
$("#expendbtn").html(doExpend ? 'Less' : 'More') ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-6">
<table class="table table-striped jambo_table">
<thead>
<tr class="headings">
<th><h4>Main Cat</h4></th>
</tr>
</thead>
<tbody>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
<tr>
<td>Sub cat</td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-info" id="expendbtn"></button>
</div>
</div>
</div>
I have the following code, but I can't tell why it is hiding columns on different tables. It seems that it is ignoring the first part of the selector which is the table id.
<html>
<head>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<table id="table1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<table id="table3">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
<th>Col7</th>
</tr>
</thead>
<tbody>
<tr>
<td>Val1</td>
<td>Val2</td>
<td>Val3</td>
<td>Val4</td>
<td>Val5</td>
<td>Val6</td>
<td>Val7</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
</script>
</body>
I tried this solution first https://stackoverflow.com/a/5901376/3658485
Am I going to have to select the table and iterate over its th / tds?
you should put this:
'#table1 td:nth-child(4), #table1 th:nth-child(4)'
$(document).ready(function() {
$('#table1 td:nth-child(4),th:nth-child(4)').hide();
});
Your code is selecting the td:nth-child(4) of table 1, but it is also selecting the th:nth-child(4) of all tables.
Best solution is call the td/th you want hidden and give it the table like so:
$(document).ready(function() {
$('td:nth-child(4),th:nth-child(4)', '#table1').hide();
});
I am getting the below error when I use the jQuery data table.
Error: Unable to get property 'mData' of undefined or null reference
Code
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css">
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#empTable').DataTable();
} );
</script>
<table id="empTable" class="display" width="100%">
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
<tr>
<td>AAAAA</td>
<td>32</td>
<td>Colombo</td>
</tr>
<tr>
<td>BBBBB</td>
<td>29</td>
<td>Kandy</td>
</tr>
</table>
Please suggest me how to fix this issue?
Your html structure is not proper, you need to have a thead element where the header is specified and the content should be in tbody.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>
HTML structures in the table needs to match.
For instance, <th> tags in your <thead> with the <tr>'s in the <tbody>. That is, if in the table you expect 5 columns , there should be 5 <th> tags in the table head and 5 <tr> tags in the table body.
$(document).ready(function() {
$('#empTable').DataTable();
});
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.3.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/css/jquery.dataTables.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.7/js/jquery.dataTables.js"></script>
<table id="empTable" class="display" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Address</th>
</tr>
</thead>
<tbody>
<tr>
<td>K.Senthuran</td>
<td>32</td>
<td>42nd Lane</td>
</tr>
<tr>
<td>S.Senthuran</td>
<td>29</td>
<td>Hampden Lane</td>
</tr>
</tbody>
</table>