Jquery table: customize seanmacisaac table / insert tbody into div - javascript

I am trying to adjust a Jquery sort-able, searchable table set up by seanmacisaac
Ref: http://www.seanjmacisaac.com/projects/code/tablesort/#index-member-4
How do I set the tbody height to a fixed value. Also allowing vertical scroll (overflow-y)?
<table class="table-sort table-sort-search table-sort-show-search-count">
<thead>
<tr><th class="table-sort">head1</th><th class="table-sort">head2</th><th class="table-sort">head3</th></tr>
</thead>
<tbody>
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
<tr><td>4-1</td><td>4-2</td><td>4-3</td></tr>
</tbody>
</table>

Just wrap the table into a div :
<div style="overflow:auto;height:500px;width:100%">
<table></table> // with any number of row
</div>
Put the css into a class and add a class to the container div

If you want to scroll only the data section of the table not with headers then you should make html like:
<div class="header-table" style="width:100%">
<table class="header"></table>
</div>
<div class="table-data" style="overflow:auto;height:500px;width:100%">
<table class="data"></table>
</div>

If you want to keep the header fixed while scrolling, for simple tables, I create a two separate tables:
the first for the header and the second in a div with fixed height and overflow-y:auto, just for the tbody.
Not that elegant but just do the job.
Don't know where this table will be but I think you should use a paginator for 100+ rows tables...
If the problem is sorting data and paginate I'd give jqGrid a chance: http://trirand.com/blog/jqgrid/jqgrid.html

Related

Fixed inner divs on scrollable outer

I have some page content in a React web app where certain fields should remain fixed as the user scrolls. The part that's throwing me off is this content is contained within a scrollable outer div. That outer div must remain scrollable because it occasionally loads different components that need it.
Here is the div structure:
<div class="inner"><!-- overflow-y: auto; (this must remain)-->
<div class="wrapper">
<div class="titleBar"> <!-- I need this to not scroll -->
<div class="mainTable">
<table>
<th>...</th> <!-- I need this to not scroll -->
<tbody>
...
</tbody>
</table>
</div>
</div>
</div>
</div>
So as the user scrolls down the page, the title bar and table header should remain fixed, with the table body content being the only thing on the page that is scrolling. I'm not able to just make the table body scrollable because that will put a scrollbar on the table itself, it needs to scroll on the actual page scroll.
Most posts on this I've been able to find are using JQuery, but since this is within ReactJS I'm looking for other solutions.
Correct table head structure is:
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
</table>
Then try customize thead th css as following:
thead th {
position:sticky;
top: 0
}

datatable js DOM elements positioning issue

I have a small formatting issue. It can be because I don't fully understand the data tables formatting.
HTML code
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
<h1 class="page-header">Test Runs</h1>
<div class="table-responsive">
<table class="table table-striped" id="tests">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
</tr>
</tbody>
</table>
</div>
The outer div is present because i have a side menu bar which is not shown here.
JS code
$(document).ready(function() {
$('#tests').DataTable( {
dom:
"<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-3'i><'col-sm-6 text-center'B><'col-sm-3'p>>"
} );
} );
In the above js code, if I don't add "dom" element the filter results and search bar are not in the same row , they are one below the other.
The same applies to information and pagination.
I want the four elements to be in four corners of the screen.
eg:
length changing input control : top left
filtering input : top right
table information summary : bottom left
pagination control : bottom right.
With the current code (with the "dom" added) I am able to achieve this but now there is a horizontal scroll which I don't want.
Can someone tell me what mistake I made.
You can place the relevant elements in the bootstrap panel.
$(document).ready(function() {
var table = $('#example').DataTable({
"dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
}); });
Demo : http://jsfiddle.net/a62hqqf9/
You can also look again for the use of DOM elements : datatable dom
The main reason for horizontal scroll is negative margins of .row. You need to remove negative margins with custom class. I have added .no-gutters in the snippet example as you are probably using Bootstrap 3. If you are using Bootstrap 4, the class comes with Bootstrap CSS.
Demo: Working example

adjust main container width according to table width

Is it possible ..if table width increase then its main container widths increase according to that. Is it possible ??
<div class="container main-con">
<table class="table table-hover"> <tr><td></td></tr>
</table>
</div>
here if data increase in table then table is coming outside the container. so is it possible to increase width of main container according to table width
Having a container that is wider than the screen is almost always a very bad user experience. People (with good reason) don't like to scroll left and right. Instead you are better off making only your table scroll left/right.
You should be able to achieve this quite easily by making the table responsive. from the Bootstrap docs:
Create responsive tables by wrapping any .table in .table-responsive to make them scroll horizontally
For example:
<div class="table-responsive">
<table class="table table-hover">
<tr>
<td></td>
</tr>
</table>
</div>

Column toggle not working when append the table rows dynamically

In jQuery mobile v 1.4.5 i used table rows append dynamically with column toggle but it does not work for the rows which are dynamically generated.
<table id="tab" data-role="table" data-mode="columntoggle" class="ui-responsive">
<tbody id="tb" >
<thead id="th">
<tr id="tr1">
<th>First</th>
<th data-priority="1">Second</th>
<th data-priority="2">third</th>
</tr>
</thead>
</tbody>
</table>
Here is the Fiddle what I tried.
I referred this jQuery mobile document.
Note: I want to insert the table rows at the top of the previous rows (dynamically added rows that why I used "after" property).
Edited:
New link is the below to locate created new row on the top of the table
http://jsfiddle.net/txej8qhj/6/
The below link works fine;
http://jsfiddle.net/txej8qhj/3/
Probably you too know. Sometimes we may overlook somethings. You should separate the thead and tbody element. Actually thead element first comes in a table like the below;
<table>
<thead>
</thead>
<tbody>
</tbody>
</table>
Check the below link out to use as guide;
http://demos.jquerymobile.com/1.4.5/table-column-toggle/#&ui-state=dialog
You need to call refresh and trigger create functions on the table element.
Please, try the below:
$("#tr1").after(newrow);
$('#tab').table("refresh").trigger("create");

Resizing table columns, that can be hidden

I have a standard table with option to hide columns and I want to use a plugin for re-sizing the width of the columns.
I tried with colResizable and resizableColumns but the things get messy when I hide a column and then try re-sizing.
Edit: My table:
<table id="mytable">
<thead>
<tr><th class="column1"></th>text 1 <th class="column2">text 2</th></tr>
</thead>
<tbody>
<tr><td class="column1"> cell00 </td> <td class="column2"> cell01 </td></tr>
<tr><td class="column1"> cell10 </td> <td class="column2"> cell11 </td></tr>
<tr><td class="column1"> cell20 </td> <td class="column2"> cell21 </td></tr>
</tbody>
</table>
Activating colResizable:
$("#mytable").colResizable({
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
Function for hidding / displaying columns:
function toggleColumn(index){
if(something){
$('.column'+index).hide();
}else{
$('.column'+index).show();
}
$("#"+tableID).colResizable({
disable:true
});
$("#"+tableID).colResizable({
disable:false,
liveDrag:false,
gripInnerHtml:"<div class='grip'></div>",
draggingClass:"dragging",
minWidth:50
});
}
After each toggle i restart colResizable, so it can get the new values.
The problem comes when I re-size any columns beyond the hidden ones.
I also need the option to set default widths to each column. All suggestions are welcomed.
colResizable 1.5 is compatible with hidden columns. You can download it on http://www.bacubacu.com/colresizable
if you want to change column visibility after colResizable is already activated, those are the steps you have to follow:
call colResizable (as usual)
before you perform any DOM modifications (such as hiding a column), destroy colresizable using disable:true
change columns visibility
call colResizable again
It looks like Datatables has everything you may want.
Check out this fiddle. You get everything: Show, hide columns, resized columns, and many more cool options. And using it is very easy
$(document).ready( function () {
$('#example').dataTable( {
"option": value;
} );
} );
option 1:
Use a class name on the TD. Give the class name in a style element that is added dynamically to the document. To resize, delete the style element from the document then add again with new specifics.
option 2:
Cycle through the rows collection of the table setting style.width on .cells[0], .cells[1], ....
To hide, set style.display to none, then to unhide, inline.

Categories

Resources