Develop Reference

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

Slide Down tabe row smoothly and Slowly

I want to Slide Down tabe row smoothly and Slowly.
The problem now is, it is instantly appearing and hiding, how can i make it smooth.
**Please check this fiddle:**
http://jsfiddle.net/5WT9g/2/
HTML:
Show Content
<br><br><br>
<table width="400" border="1">
<tr id="mainContent" style="display:none;">
<td> THIS IS MAIN CONTENT </td>
</tr>
</table>
JS:
$('#showContent').click(function ()
{
$('#mainContent').slideToggle('slow');
});

I think you mean to use slideToggle() and not toggleslide().
However, the animation still won't work smoothly for table cells. It will work slightly more smoothly if you set a height for the tr. For a completely smooth animation, I recommend using divs instead.
Here is a modified version of your code that has a sort of smooth animation with tables:
http://jsfiddle.net/TS77v/1/
As you can see, you will have to do the animation on the td, not the tr. I also had to set the height of the td for this to work, otherwise it will just appear and disappear.
Why doesn't the animation work properly on tables?
From "Learning jQuery" by Chaffer and Swedberg
Table rows present particular obstacles to animation, since browsers
use different values (table-row and block) for their visible display
property. The .hide() and .show() methods, without animation, are
always safe to use with table rows. As of jQuery version 1.1.3,
.fadeIn() and .fadeOut() can be used as well.
For your reference: https://stackoverflow.com/a/920480/3016565

It would be much easier with divs but if you prefer/need tables then tables it is. I'd do it by putting a div inside the table cell ja use the slideToggle to it. Yes, it still adds the div there but atleast you got the table structure. To make it work you need to do just a minor change to your HTML code, JS stays the same:
HTML
Show Content
<br><br><br>
<table width="400" border="1">
<tr>
<td><div style="display: none;" id="mainContent">THIS IS MAIN CONTENT</div></td>
</tr>
</table>
And a fiddle: http://jsfiddle.net/32HR9/1/
AFTER GETTING THE INFORMATION THAT YOU CAN'T CHANGE THE HTML
I assume you can edit the javascript? You haven't said anything about that. This trick isn't neat but there's no need to change the HTML and it gets the job done:
So, with jQuery
Make the tr visible.
Wrap the content of the tr in a div.
Hide the div.
Make the slideToggle work with the created div.
with code
$('#mainContent').css('display', 'table-row');
$('#mainContent > td').wrapInner("<div class='hideshow'></div>");
$('.hideshow').css('display', 'none');
$('#showContent').click(function (){
$('.hideshow').slideToggle('slow');
});
and a fiddle: http://jsfiddle.net/5E5VS/7/

Try this.
Show Content
<table id="mainContent" width="400" border="1">
<tr>
<td> <p style="display: none"> THIS IS MAIN CONTENT</p></td>
</tr>
</table>
$("#showContent").click(function () {
$('#mainContent').find("p").slideToggle();
});

fixed headers in table, html

i had an table like this
<div style="overflow:auto">
<table>
<thead><tr style="position:fixed"><th></th></tr></thead>
</table>
</div>
Now my problem is when i scroll div the header(that is tr element) is fixed it works fine but when i scroll the scrollbar of window the header tr is not fixed inside the div. I moves along the scroll bar of the window... Can any one help me to find out the solution please

I don't know If I'm getting your question right, but you may find this helpful http://fixedheadertable.com/

Sorry, I tried to do it in CSS alone, but that didn't work out, so you do need a bit of Javascript.
<div style="overflow:auto; position:relative;"
onscroll="document.getElementById('fixedtr').style.top = this.scrollTop+'px';">
<table>
<thead>
<tr style="position:absolute; top:0; left:0" id="fixedtr">
<th>Table header</th>
</tr>
</thead>
See jsFiddle.
This is how you want it, right?

Table - fixed header, scrollable body, most robust/simple solution? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
Looking for a solution to create a table with a scrollable body, and a static/fixed header.
Searching around seems to produce MANY flaky pieces of code, either not working in IE, requiring a huge amount of Javascript and tweaking, or a silly amount of CSS hacks etc.
To be honest, if it's a case of CSS hacks or Javascript, I think I'd prefer to go the Javascript option.
The alternative I guess is to place it all in a div, and just scroll the entire table - but that's a bit naff :D

I've just put together a jQuery plugin that does exactly what you want. Its very small in size and really easy to implement.
All that is required is a table that has a thead and tbody.
You can wrap that table in a DIV with a classname and the table will always resize to fit in that div. so for example if your div scales with the browser window so will the table. The header will be fixed when scrolling. The footer will be fixed (if you enable a footer). You also have the option to clone the header in the footer and have it fixed. Also if you make your browser window too small and all columns can't fit...it will also scroll horizontally (header too).
This plugin allows the browser to size the columns so they aren't fixed width columns.
you just pass the DIV's classname to the plugin like so: $('.myDiv').fixedHeaderTable({footer: true, footerId: 'myFooterId'}); and the plugin will do the rest. FooterID is a element on the page that contains the mark-up for your footer. this is used if you want to have pagination as your footer.
If you have multiple tables on the page it will also work for each table you want to have a fixed header.
check it out here: http://fixedheadertable.mmalek.com/
Keep in mind its still 'beta' so I am adding new features and bug fixes daily.
Supported browsers: IE6, IE7, IE8, FireFox, Safari, and Chrome
Here is a link to my response to another person who had the same question: Frozen table header inside scrollable div

<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 100px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
This creates a fixed column header with the scrollable table below it. The trick is to embed the table you want to scroll in a tag with the overflow attribute set to auto. This will force the browser to display a scrollbar when the contents of the inner table are larger than the height of the surrounding .
The width of the outer must be larger than the width if the inner table to accommodate for the scrollbar. This may be difficult to get exactly right, because some users may have set their scrollbars to be wider or smaller than the default. However, with a difference of around 20 to 30 pixels you'll usually be able to display the scrollbar just fine.
CSS-Tricks also talks about using JavaScript and CSS to help with this as well so you can use highlighting. Here is the link to that article.

If you can fix the column widths - it's a lot easier. If you want the browser to figure out the widths, it gets a lot harder. Basically, have the table in div that scrolls (height, overflow:auto) and have that div inside a position:relative div. In the outer div, have another div position:absolute, overflow:hidden, height: whatever the header height is, set this div's innerHTML to the innerHTML of the inner div; Here is a page that demonstrates. There are lots of gotchas, but it's doable...
<html>
<head></head>
<body onload="doit();">
<div id="outer" style="position:relative;">
<div id="inner" style="height:100px; overflow:auto;">
<script>
var html = '<table><tr><th>Heading 1</th><th>Heading 2</th></tr>';
var width = Math.floor(Math.random() * 100);
var d = '';
for(var i = 0; i < width; i++){d += 'a';}
for(var i = 0; i < 100; i++){
html += '<tr><td>' + d + '</td><td>some more data</td>';
}
html += '</table>';
document.write(html);
</script>
</div>
<div id="secondWrapper" style="position:absolute; background:#fff; left:0; top:0; height:25px; overflow:hidden;"></div>
</div>
<script>
function doit(){
var inner = document.getElementById('inner');
var secondWrapper = document.getElementById('secondWrapper');
secondWrapper.innerHTML = inner.innerHTML;
}
</script>
</body>
</html>
Note as you refresh and the data size changes, the header matches up perfectly. That's the real trick.

I believe that the solution is to set an explicit height for the tbody and set the overflow to auto or scroll. Unfortunately, as you've discovered, tables and CSS are a tricky combination, and IE likes to choke on it.

How about this:
<table style="width: 400px;">
<thead><tr> <th> head </th> </tr>
</thead>
<tbody style="height: 100px; overflow-y: auto; overflow-x: hidden;">
<tr> <th> .. </th> </tr>
</tbody>
</table>

There was also a quiz for just this sort of thing on Sitepoint, for those looking for a non-JS solution. However I found that the table footer was necessary for stopping the table headers from collapsing their widths IF the contents of the cells weren't wide enough. I ended up hiding the tfoot in the application I used this on.
It's pure HTML/CSS and works in IE6 plus modern browsers. There are some styling limitations for the header though.

Hiding entire table resizes it

Having an HTML page with a simple table and js code to do show / hide on it:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>title</title>
<script type="text/javascript">
function showErrorSteps()
{
var el = document.getElementById("t1");
if(el.style.display=="none")
{
el.style.display="block";
}
else
{
el.style.display="none";
}
}
</script>
</head>
<body>
<br />
<span onclick="showErrorSteps()">[click]</span>
<br />
<br />
<table id="t1" border="1" width="100%" style="table-layout: fixed">
<tr>
<td>s</td>
<td>d</td>
<td>a</td>
</tr>
</table>
</body>
</html>
What happens is that on Mozilla the table gets resized after you click twice(even with the table-layout: fixed css). IE works fine.

Tables shouldn't be set to display: block. Table rows and cells shouldn't either. They have different display values. My advice? Don't do it this way. Use a class:
.hidden {
display: none;
}
and dynamically add it and remove it from the table to avoid problems of setting the right display type on an element that you show.
Edit: To clarify the comment as to why do it this way and what's going on. Try this:
<table>
<tr>
<td>Cell 1</td>
<td style="display: block;">Cell 2</td>
</tr>
</table
It will (or should) screw up your table layout. Why because a <td> element, by default, has display: table-cell not block. Tables are the same. They have display: table.
Unsetting CSS attributes is... problematic.
Thus you are best off using classes to set and unset attributes. It's easier to change (the class resides in a CSS file and isn't code), avoids problems like setting the value back to the correct original value and generally provides a cleaner solution, especially when used with a library like jQuery. In jQuery, you can do:
$("table").toggleClass("hidden");
Done.
Or you can use addClass() and removeClass() if that's more appropriate. For example:
<input type="button" id="hide" value="Hide Table">
...
<table id="mytable">
...
and
$(function() {
$("#hide").click(function() {
if ($("#mytable").is(".hidden")) {
$("#hide").val("Hide Table");
$("#mytable").removeClass("hidden");
} else {
$("#hide").val("Show Table");
$("#mytable").addClass("hidden");
}
});
});
And there you have a robust, succinct and easy-to-understand solution (once you get your head around the jQuery syntax, which doesn't take that long).
Messing about with Javascript directly is so 2002. :-)

This is not a direct answer to your question, but a serious recommendation. I have recently discovered the joys of JQuery. All this kind of stuff can be done effortlessly and there is extensive online examples and references available.
If you haven’t got time to get into it now then I’m sure someone will offer a solution here, but I would recommend anyone who does anything beyond the most cursory JavaScript DOM manipulation to consider JQuery (or a similar framework).
JQuery offers browser independent Hide(), Show() and Toggle() methods. Here’s one of my favourite references.

This might be because you set the style.display to "block". Try to set it to "". You should also set the table width using CSS. (width: 100%;)