We Keep Coding

DataTables: how to put variable in table initialization code

I found that DataTables plug-in is very handsome and practical until you know at code start all necessary parameters. But, in my case I wish to change parameter scrollX according to detected document' height (60% of available height). I understand that here we talk about some kind of object but push and other tricks doesn't help. Here is problematic code:
$(document).ready(function() {
table = $('#example').DataTable( {
language: {
info: "Show _START_ til _END_ of _TOTAL_ recs" },
scrollY: "300px",
scrollX: true,
scrollCollapse: true,
paging: false,
rowReorder: false,
ordering: false,
fixedColumns: {
leftColumns: 2,
rightColumns:0}
});
});
and instead "300px" I planned to put some kind of Javascript variable that contain document height, but classic object manipulation doesn't show result. So, I tried to check:
console.log(Table.scrollX);
but got error. Then tried to make table as public var but then got undefined value. Also:
table.push({'scrollX': '300px'});
and some weird combination, but nop. Any suggestion, please? Thanks.

Something like
$(document).ready(function() {
var myScrollY = '300px';
var table = $("#example").DataTable({
scrollY: myScrollY
});
);

Here the solution I'm using in my project:
You need to handle resize event. In the handler calculate the available area for scrollable part of the table:
$( window ).resize(function() {
var scrollWidth = "300px";
// scrollWidth should be calculated based on your needs
table.find( '.dataTables_scrollBody' ).width( scrollWidth );
})
I've done the same for height
Update:
Setting scrollY: "300px" works only for initialization.
When you change height of the document, the event domready is triggered and you have to recalculate new height of your scrollable area of datatables:
$( window ).resize(function() {
var newScrollHeight = Number($(window).height() - $('#IdOfAnElement').height() - other heights) + "px"; //
table.find( '.dataTables_scrollBody' ).height( newScrollHeight );
})
.dataTables_scrollBody is the element of datatables containing scrollable area.

Html table with fixed columns

I'm trying to make my first 3 columns of my table fixed so that they always show when scrolling horizontally. But they need to move when scrolling vertically
I made a excel table with what it needs to do :
I have tried http://jsfiddle.net/YMvk9/5294/
.headcol {
position:absolute;
width:5em;
left:0;
top:auto;
border-right: 0px none black;
border-top-width:3px;
margin-top:-3px;
with scrollTop of jquery of the right scrollbar so I move the top value of the yellow cells.
The current problem is that when I fill up the html table with the database the yellow cells are shown even tho my overflow is "scrolled" since they are absolute.
See next image :
Any way to fix this problem. So that they are hidden?
Or any other solution to what I have to do would be appreciated

You could use the JQUERY scroll function and move the column you want to "freeze" in the opposite way.
You also need to set the z-index so the column stays on top of the others.
In your css:
.frezedCell
{
z-index: 1000;
position:relative;
}
In your page :
$(document).ready(function () {
$(".divTableParts").scroll(function () {
var divTable = $(".divTableParts");
$(".frezedCell").css("left", 0 + divTable.scrollLeft());
});
});

You could use datatables for it: https://datatables.net/extensions/fixedcolumns/
Basically you'd have datatables as it's dependency and use this piece of code:
$(document).ready( function () {
var table = $('#example').DataTable( {
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
} );
new $.fn.dataTable.FixedColumns( table );
} );

How to dynamically change datatable using jquery?

I'm making a website which is responsive so I'm working with datatables since it is responsive I want to change the datatable appearance in different #media screens. What I want to do is when I'm in desktop version the table will be in a normal state and for tablet form I want it to be in FIXED COLUMNS and when in mobile version I want it to be like
Responsive Table like so. What is best approach for this? Do I need to create multiple table or just use a script? Please let me know.

This should do the trick. You need to destroy the first DataTable before initializing it again.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
destroy : true,
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
destroy : true,
responsive: true
});
}
}

I would suggest using a single script to change the look of the table based on media screen properties. Below is an example script that would load different views of a table based on screen width.
$(window).on('resize load', function () {
var width = $(window).width();
if (width < 720) {
//for screens with less than 720px
var table = $('#example').DataTable({
"scrollY": "300px",
"scrollX": "100%",
"scrollCollapse": true,
"paging": false
});
new $.fn.dataTable.FixedColumns(table);
} else {
$('#example').DataTable({
responsive: true
});
}
}
Responsive and Fixed Column code is taken from datatables website links you have provided. This piece of code should fire on window resize and when loading as explained here.

You can use bootstrap's class as shown in given link
http://getbootstrap.com/2.3.2/scaffolding.html#responsive

adding a class to a table row with infinite scrolling enabled in jQuery DataTables

I have a dataTable with infinite scrolling
$('#table1').dataTable({
'bScrollInfinite': true,
'bColumnCollapse': true,
'sScrollY': '20px',
'aaData': data,
'aoColumns': columns,
'iDisplayLength': 20
});
Now I get a table with 20 rows shown out of the total say (showing 20 of 100).
Now I add a class to each row of the dataTable
$('#table1 tbody tr').each(function(index, values){
$(this).addClass('newRow');
});
However, I can see only 20 rows in the DOM. How can a class be added in case of infinite scrolling?

Isotope Jquery plugin layout issues

i am trying to set up isotope on this site, it needs to handle the layout and i need to be able to append items to the container.
The issue is that it does not seem to initialize the images properly, here is how i init it:
$(document).ready(function(){
var $container = $('#container');
$container.isotope({
masonry: {
columnWidth: 400,
gutterWidth: 10
},
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: true
},
resizesContainer: true,
});
load_more();
});
The images are completly unaffected by the masonry options, and if i specify "Width" in my CSS i have loading issues.
load_more preforms an ajax call and on success it calls this function with the data returned:
function data_loaded(data) {
var newItems = "";
for (var i = 0; i < data['posts'].length; i++) {
newItems += '<div class="item" ><img class="gallery_img" src="'+data['posts'][i]['images'][0]['path']+'" /></div>';
}
/* append images*/
var $newItemsObj = $(newItems);
$('#container').isotope( 'insert', $newItemsObj );
}
The site is http://www.hotchinesebabes.com/
The site is safe for work, there are no nude images
It also seems like the site needs a refresh to load properly, i guess the images get catched the second time, so it fails the first time due to triggering isotope prior to image load ?

Isotope will not work because your images haven't loaded yet, so the width and height of images are 0. Use https://github.com/desandro/imagesloaded or fix the height and width of your images with CSS.