How to dynamically change datatable using jquery? - javascript

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

Related

Centering of Kendo Grid after Populating Grid

I have a kendo grid that, upon the activation of the event listeners below, opens up in the center of the Web page. However, it centers based upon how filled the grid is, and before the grid is populated with rows of data, it of course has 0 rows. I need the grid to center on the screen AFTER the kendo grid has been populated, not BEFORE as it's currently doing. Any insight on this? Thanks.
studentSearchWindow = $("#studentSearchWindow").kendoWindow({
visible: false,
resizable: false,
minWidth: "540px",
maxWidth: "630px",
modal: true
}).data("kendoWindow");
windowSearchResultsGrid = createWindowSearchResultsGrid();
$("#masterMagnifyingGlass").on("click", function () {
refreshWindowSearchResultsGrid();
studentSearchWindow.center();
studentSearchWindow.open();
});
$("#masterSearchBox").on("keydown", function (e) {
if (e.which == 13) {
refreshWindowSearchResultsGrid();
studentSearchWindow.center();
studentSearchWindow.open();
e.preventDefault();
}
});

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 );
} );

jQuery - Automatic change values after resizing the browser window

We have following code (addition, the presence of the plugin DataTables)
$('#myTable').dataTable( {
"scrollY": height, <-- auto height here
"scrollCollapse": true,
} );
I dont' know so well jquery and I have a problem with the automatic changing values.
I have a div element where the height is a percentage (for example: 50%) and
and I want to get this height in pixels. Ofcourse the height is changing as many times as the browser window is changed.
Unfortunately, I don't know how to do, Someone here can help? (preferably an example)
Update 1:
I tried so like that
var ch = $('#dataTableWrapper').height() - 110; // I subtracted the value of the height of my static elements in a div
$('#dataTableID').dataTable( {
"scrollY": ch,
"scrollCollapse": true,
} );
$(window).resize(function(){
ch = $('#dataTableWrapper').height() - 110; // same as above
$('.dataTables_scrollBody').css('height', ch);
});
Apparently it works, but if anyone had a more elegant solution I would ask about throwing code.
You can do like this:
$( window ).resize(function() {
var scroll = $("#yourDiv").height();
});
This might be a dumb thing to suggest, but are you just looking for a simple refactoring?
function getTableHeight() {
return $('#dataTableWrapper').height() - 110;
}
$('#dataTableID').dataTable( {
"scrollY": getTableHeight(),
"scrollCollapse": true,
} );
$(window).resize(function(){
$('.dataTables_scrollBody').css('height', getTableHeight());
});

How to dynamically toggle the `resizable` boolean in the jQuery UI Layout plugin?

Problem
I am using the jQuery UI Layout plugin (layout.jquery-dev.net/index.cfm) in my web application.
Using 2 panels only (center and east), I need to dynamically disable the resizable option of the layout.
function InitializeLayout(sElement) {
var oOptions = {
closable: false,
resizable: true,
slidable: false,
east__livePaneResizing: true,
east__maxSize: 672,
east__minSize: 250,
east__onresize_end: function() {
// GetOverlaySizes();
// SetOverlaySizes();
// SetPaperSizes();
},
east__size: 250
};
oLayout = $(sElement).layout(oOptions);
oLayout.options.east.resizable = false;
console.log(oLayout.options);
}
This doesn't work, even though the resizable option is set to false on the console.
Questions
How do I dynamically disable/enable the resizable option ?
This has nothing to do with my problem, but why does enabling the live pane resizing make Mozilla Firefox (20.0) so slow ?
Thanks,
Solution
oLayout.disableResizable("east");
oLayout.enableResizable("east");
Thanks to #dwaddell.
Here is what you need to do, after the init:
oLayout.disableResizable('east');
Hope that helps.
Here is an updated jsFiddle: http://jsfiddle.net/dwaddell/YE2CQ/

Categories