I am using jQuery Datatable to design a grid and below I am using the same example given in Datatables.net.
<table id="example" class="stripe row-border order-column" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
</tbody>
</table>
$(document).ready(function() {
var table = $('#example').DataTable({
proccessing: true,
serverSide: true,
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
fixedColumns: {
left: 0,
right: 1
}
});
});
My requirement is to freeze right side column but it is not working in my side. Its always freezing left side column whatever I use left or right in fixedColumns.
If anyone having any idea to fix this then it will be appreciated.
Thanks in advance.
Related
I have a problem with data table header alignment. All things will go fine until I did not use ScrollY.
On the page, I have a side navbar, that can be expanded. Now When I expand the side navbar and move the content area toward the right side, the table header goes out of the page.
1. Table:
<table class="flex-fill flex-grow-1 table table-striped table-hover table-bordered " id="data_table" style="background:red ;width: 100%">
<thead>
<tr>
<th>Header-1</th>
<th>Header-2</th>
<th>Header-3</th>
<th>Header-4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
2. Script.
$(document).ready( function () {
$('#data_table').DataTable( {
paging: true,
ordering:false,
scrollY:315,
scrollCollapse:true,
scrollX:true
});
});
html view
Are you using css bootstrap?
Please try to use the following script
Html
<div class="table-responsive">
<table class="flex-fill flex-grow-1 table table-striped table-hover table-bordered" id="data_table" style="background:red ;width: 100%">
<thead>
<tr>
<th>Header-1</th>
<th>Header-2</th>
<th>Header-3</th>
<th>Header-4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
Javascript
Add the script below after datatable initiation
table.columns.adjust().draw();
And the script will be like this
$(document).ready(function () {
var table = $("#data_table").DataTable({
paging: true,
ordering: false,
scrollY: 315,
scrollCollapse: true,
scrollX: true
});
table.columns.adjust().draw();
});
example : codepen
I have a table in html bootstrap, the table looks fit when the page loads, but after the page loads fully the table becomes scrollable
My code is:
<div class="table-responsive">
<table class="table table-striped table-borderd" id="orderTable">
<thead>
<tr>
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</thead>
<tfoot>
<tr class="sn">
<th>S.No</th>
<th>Order ID</th>
<th>Ordered By</th>
<th>Branch name</th>
<th>Order Date </th>
<th>Order Time </th>
<th>Status</th>
<th>Invoice Status</th>
<th>Actions</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
Can anyone please tell me how to make it fit to the screen and avoid the scrolling. Thanks in advance
As it turns out, Main issue in this case is the width of the <input/> elements which was making all our columns follow the same width.
I have solved it with the following CSS for Desktop Screen. For smaller screens, it is best to have the scroll for us to not loose any of our data.
#media (min-width:1320px{
tfoot th input {
width: 90px !important;
}
}
Later you can adjust this for even larger screen break point as per your requirement.
I'm trying to create an html table with a scrollable body so that you can always see the header. I want the table to be inside a div, and have a max height of 100% of the div height. The table items are dynamically generated, so if there are too many items, you will get the scrollbar on the body. But if there are very few items, I want the table to shrink and not use the full height of the div.
I can set the height of the table to 100%, and set the display for tbody to block and give it a max height of 100%. The problem with this is even if there are no items, the table body still uses the full height to show a blank table.
I can set some fixed max-height for tbody, and set height for the table to auto. This way the table shrinks when there are few items instead of showing a blank body. The problem with this is the height is not being controlled by the div anymore.
html:
<div>
<table>
<thead>
<tr>
<th > col1</th>
<th> col 2</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
css
tbody{
display: block;
max-height: 100%;
overflow: auto;
}
table{
height: 100%;
border: 1px solid black;
}
div{
height: 300px;
}
Use DataTable for this problem. Here is the demo:
$(document).ready(function() {
$('#example').DataTable({
"scrollY": 100,
"scrollX": true
});
});
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="example" class="display nowrap" style="width:100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
<td>5421</td>
<td>t.nixon#datatables.net</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
<td>8422</td>
<td>g.winters#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
<td>1562</td>
<td>a.cox#datatables.net</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
<td>6224</td>
<td>c.kelly#datatables.net</td>
</tr>
<tr>
<td>Airi</td>
<td>Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
<td>5407</td>
<td>a.satou#datatables.net</td>
</tr>
</tbody>
</table>
Here is the details: https://datatables.net/examples/basic_init/scroll_xy.html
I'm using Bootstrap and have a table with the following structure and style:
<table class="table table-bordered">
<tr>
<th>Keyword</th>
<th>AdWords top</th>
<th>AdWords right</th>
<th>AdWords total</th>
<th>URLs of top AdWords</th>
<th>URLs of right AdWords</th>
<th>Non-Adwords results</th>
<th>Non-Adwords urls</th>
<th>Total links on page</th>
<th>Total SERP results</th>
<th>Cached SERP</th>
</tr>
....
However, when I'm printing out my data, it looks really ugly:
That is why I have several questions:
How to make a normal width of a column with a text inside <th> elements in order to fit the text inside the cell
How to make al the text inside <th> aligned by center
It seems like you are missing "thead". For bootstrap styles to correctly apply, you need to make sure you're html markup is correct.
<table class="table table-bordered">
<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>
</tbody>
</table>
Solved!
In SCSS file add a new custom class:
.withoutTransfer{
white-space: nowrap;
}
Then use it in table:
<thead>
<tr class="withoutTransfer">
....
</tr>
</thead>
Now the table headers looks pretty.
try this
setting widths for your table cells if you apply the rule 'table-layout: fixed' to the table - this has helped me with a lot of cell-sizing issues when using tables. I would not recommend switching to using just DIVs to arrange your content if it fits the purpose of tables - to display multidimensional data.
`table-layout: fixed; width: 100%`;
http://jsfiddle.net/6ecr4/8/
$(document).ready(function () {
$(".items").tablesorter();
$('.items tr:even').addClass('ItemEvenRow');
$('.items tr').hover(function () {
$(this).addClass("ItemRowHover");
}, function () {
$(this).removeClass("ItemRowHover");
});
});
HTML :
<table class="items">
<thead>
<tr class="">
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td >Bach</td>
<td >Frank</td>
<td >fbach#yahoo.com</td>
<td >$50.00</td>
<td >http://www.frank.com</td>
</tr>
<tr >
<td >Doe</td>
<td >Jason</td>
<td>jdoe#hotmail.com</td>
<td >$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
The even rows do not possess the hover, but only the odd ones.
Require both, even, as well as, odd rows to change their background on mouse-over.
The headers should be as they are without any changes.
The hover isn't working on even rows because of css precedence. Make the selector more specific like this (add a tr in front; updated demo):
tr.ItemRowHover {background-color:#A00000; }