How to fixed thead with the plugin jscrolpane? - javascript

Who knows what the problem is? I want to combine the table and jscrollpane, when I start to use this plug-in everything breaks, it is impossible to fix thead. Someone faced with this? If you delete the class scroll-pane, then everything works correctly, only without the scroll styles.
It seems impossible to me. Can eat any bypass ways?
$(document).ready(function () {
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
};
$('.scroll-pane').jScrollPane({
showArrows: false,
contentWidth: '0px',
autoReinitialise: true
}).bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
});
.table-cont{
max-height: 170px;
overflow: auto;
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
thead{
background-color: #ddd;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/script/jquery.jscrollpane.js"></script>
<h1 >132 qwe 123qwe </h1>
<div class='table-cont scroll-pane' id='table-cont'>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>


With some CSS overrides and tweaking, we can make it appear as if it is all the same table. The trick is, use a separate table for the head and body:
$(document).ready(function () {
window.onload = function(){
var tableCont = document.querySelector('#table-cont')
function scrollHandle (e){
var scrollTop = this.scrollTop;
this.querySelector('thead').style.transform = 'translateY(' + scrollTop + 'px)';
}
tableCont.addEventListener('scroll',scrollHandle)
};
$('.scroll-pane').jScrollPane({
showArrows: false,
contentWidth: '0px',
autoReinitialise: true
}).bind(
'mousewheel',
function(e)
{
e.preventDefault();
}
);
});
.table-cont{
max-height: 170px;
overflow: auto;
background: #ddd;
margin: 20px 10px;
box-shadow: 0 0 1px 3px #ddd;
}
.table-head{
background-color: #ddd;
margin-left: 9.5px;
margin-bottom: -18px;
width: 97%;
display: block;
box-shadow: 0 0 1px 3px #ddd;
}
table th, table td{
min-width: 80px;
text-align: left;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/style/jquery.jscrollpane.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jScrollPane/2.2.0/script/jquery.jscrollpane.js"></script>
<h1 >132 qwe 123qwe </h1>
<table class="table table-striped table-head">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
</table>
<div class='table-cont scroll-pane' id='table-cont'>
<table class="table table-striped">
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">9</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">10</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">11</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">12</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">13</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>

Related

How can I put another content under each row in my table? [duplicate]

This question already has answers here:
Hide div by default and show it on click with bootstrap
(4 answers)
Closed 1 year ago.
I Googled a lot but I can't find something for my case. I have a Bootstrap table where I want on click on my rows to show additional info for the main row.
I can't find a way to do this.
I have this code:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
And if I try this:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<div class="additionl-info">
<p>Some additional info for the first row...</p>
</div>
</tr>
</tbody>
</table>
Then my table is broken.
How can I achieve this - on click show additional info for each of my rows?

Add another <tr> after the current one with a colspan which spans all columns and then put another <td> with a <table> therein.
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
<tr>
<td colspan="3">
<table>...</table>
</td>
</tr>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
The new table will then appear between the rows.

Merging two html table in jquery

I want to merge two html table in jquery.I want to merge the table tbl1 and tbl2 and recreate a table joined.I just want to copy the tag not to cut the tag.need to have 3 tables
I have tried as
$('button').click(function(){
$('#tbl2 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl1 thead tr').find('th').insertAfter('#joined thead tr');
$('#tbl2 tbody tr').wrap('#joined tbody tr');
$('#tbl1 tbody tr').wrap('#joined tbody tr');
});
#joined{background:#ff0;margin-bottom:10px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>click</button>
<table id="joined"><thead><tr></tr><thead>
<tbody><tr></tr><tbody>
</table>
<table id="tbl1">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
<table id="tbl2">
<thead style="background-color: #00f; color: #fff">
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>
I need the html table as
<table id="joined">
<thead >
<tr>
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
<th></th> <!-- empty cell -->
<th>Opportunity</th>
<th>Pipeline Count</th>
<th>Pipeline Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>Proposal Submitted</td>
<td>4</td>
<td>1595050</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>4</td>
<td>1595050</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>14</td>
<td>4573200</td>
<td></td> <!-- empty cell -->
<td>TEst</td>
<td>14</td>
<td>4573200</td>
</tr>
<tr>
<td>Proposal Submitted</td>
<td>6</td>
<td>1193328</td>
<td></td> <!-- empty cell -->
<td>TEst Submitted</td>
<td>6</td>
<td>1193328</td>
</tr>
</tbody>
</table>

Is it possible to make a sticky table header with rotated header cells?

The table below contains a sticky table header, however I would like a few of the table header cells to be rotated. The issue here is that currently these table header cells (<th> elements) will be appearing outside of the screen or table header itself (<thead> element).
Is it possible to make a sticky table header with rotated header cells?
Working table with sticky header (optional sample code):
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
Broken table with sticky header (this piece of code contains what I am trying to do):
Added style="transform: rotate(-90deg); text-align: center;" to a <th> element.
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" style="transform: rotate(-90deg); text-align: center;">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
JSFiddle
(To replicate the problem, please try to scroll down and see the result. The table header will not be entirely visible and when assigning a background-color to all the <th> elements, it will appear outside of the <thead> as well).
The reason for the rotation is because I want to save some space in width of the table by changing table header orientation.
Am I required to rather write some JavaScript for this kind of behaviour or will plain CSS be able to solve this issue too?

You could instead of rotating the text as a block, have the text written in a top-to-bottom instead of left-to-right orientation:
(Thanks to Константин Ван for the inspiration)
.example {
padding: 5px;
margin: 5px 0;
border-radius: 2px;
background-color: #afc8f0;
text-align: center;
}
.sticky-table thead tr th {
position: sticky;
top: -1px;
background-color: #fff;
}
.sticky-table thead tr th.vertical {
-webkit-text-orientation: upright;
-webkit-writing-mode: vertical-rl;
text-orientation: upright;
writing-mode: vertical-rl;
text-align: center;
}
.sticky-table thead tr th.vertical span.chromeFix
{
text-orientation: upright;
writing-mode: vertical-rl;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
<table class="table table-striped table-hover table-sm sticky-table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="vertical"><span class="chromeFix">First</span></th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<div class="example">
... Sample content ...
</div>
<!-- ...
Some other elements
.. -->
</div>
</div>
</div>
Notes
Having checked in Edge, this might not be the best solution, as it's not compatible with all browsers.
Thanks to Turnip for pointing out that this only works in Chrome if you wrap the text in a span or some such thing.

Fix table head while scrolling tbody and thead column aligned to tbody column

Here is table with fixed outer height, and i need when scroll start, thead will be fixed and tbody will be scroll that show heading of each column.Is there any idea to fix heading of table on top and inner content of table will be scroll.
.max_height{max-height:100px;overflow:auto;}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

Check this with updated css
.max_height{margin:0px;max-width:450px;}
table thead,table tbody{
display:block;
}
table tbody{
max-height:100px;
overflow:auto;
}
table tr{
display:table;
width:100%;
table-layout:fixed;
}
<div class="max_height">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr> <tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>

jquery table columns Drag and Drop with re-order

I want to allow the user to reorder the columns in the table by dragging and dropping them. I am using jquery.dragtable.js to allow drag and drop and save the order after drag and drop even reload the page. Here I used localStorage to store table order as option provide by plugin JS. Its working with only a single table. In More than one table with name column header, its not working.
Actually, It's overwrite the previous localStorage variable with another table order value.
HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Table Reorder</title>
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="jquery.dragtable.js"></script>
<link rel="stylesheet" type="text/css" href="dragtable.css" />
</head>
<body>
<table id="tblReg" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
<hr>
<table id="tblRegMaster" class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
<th>Password</th>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody class="sort">
<tr>
<th>1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>545trt574</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
<td>yffft5456</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
<td>fgfhgf444</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>4</th>
<td>Rima</td>
<td>the Bird</td>
<td>#twitter</td>
<td>jjk8899</td>
<td>Na#email.com</td>
<td>7788994320</td>
</tr>
<tr>
<th>5</th>
<td>Sundar</td>
<td>the Bird</td>
<td>#twitter</td>
<td>76767687hjh</td>
<td>na#email.com</td>
<td>7788994320</td>
</tr>
</tbody>
</table>
Jquery -
$(document).ready(function(){
var tblReg = $('#tblReg').attr('id');
var tblRegMaster = $('#tblRegMaster').attr('id');
processDnD(tblReg);
processDnD(tblRegMaster);
});
function processDnD(cuTable){
$('#'+cuTable).find('th').each(function() {
var ctxt = $(this).text();
if(ctxt == 'First Name'){
$(this).attr('id','firstName');
}else if(ctxt == 'Password'){
$(this).attr('id','password');
}else if(ctxt == 'Email'){
$(this).attr('id','iemail');
}else if(ctxt == 'Username'){
$(this).attr('id','Username');
}else if(ctxt == 'Last Name'){
$(this).attr('id','lastName');
}else if(ctxt == '#'){
$(this).attr('id','slNo');
}else if(ctxt == 'Phone'){
$(this).attr('id','phone');
}
})
$('#'+cuTable).dragtable({
persistState: function(table) {
if (!window.localStorage) return;
var ss = window.localStorage;
table.el.find('th').each(function(i) {
if(this.id != '') {table.sortOrder[this.id]=i;}
});
ss.setItem('setTableOrder', JSON.stringify(table.sortOrder));
},
restoreState: eval('(' + window.localStorage.getItem('setTableOrder') + ')')
});
$('#'+cuTable).each(function(){
$(this).dragtable({
placeholder: 'dragtable-col-placeholder',
items: 'thead th:not(.notdraggable):not(:has(.dragtable-drag-handle)), .dragtable-drag-handle',
appendTarget: $(this).parent(),
scroll: true
})
});
}
I would like to work reoder multipule table. Please suggest any solution. Thanks
Plugin Refer: https://github.com/akottr/dragtable

I have solved this problem you can check on jsFiddle from below url. I hope this snippet help you.
jsfiddle.net/raeeshalam/rn8sxxba

Categories