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.
Related
Is it possible to hide a div when the width changes? I know you can do it with bootstrap but I need to somehow do it without it. i need it to display:none when increase and it needs to display:block when it is returned to 612px
<div id="grid" style="width:612px"></div>
You cannot listen for a width change, instead of that you can add a new event listener (different from the kendo-ui event handler) for the same element and check the width. In that case you can show or hide the element depending on the current width.
You'd want to write something that checks the width and shows/hides it based on that width:
function checkGridWidth() {
var gridWidth = $('#grid').width();
if(gridWidth == 612){
$('#grid').show();
}else{
$('#grid').hide();
}
};
You'll probably want to check the width on document ready as well as when certain events happen, such as window width resizes or maybe clicks?? not sure what could affect the width:
$(document).ready(function() {
checkGridWidth();
});
$( window ).resize(function() {
checkGridWidth();
});
$('#someElement').click(function() {
checkGridWidth();
});
EDIT
Based on comments from OP, the need is for an event handler that will allow the #grid to be collapsed when another element is expanded...
See: http://demos.telerik.com/kendo-ui/splitter/api
And: http://demos.telerik.com/kendo-ui/splitter/events
$(document).ready(function() {
function collapseOtherSplitter() {
splitter.size(indexOfPane, 0);// where indexOfPane is the index of the pane you want to collapse
}
function onExpand(e) {
collapseOtherSplitter();
}
// One of your top, horizontal splitters that you want to collapse when the vertical splitter expands:
var splitter = $("#horiz-splitter").kendoSplitter({
orientation: "horizontal",
panes: [
{ collapsible: true, size: "50%" },
],
});
// Your bottom, vertical splitter
$("#vertical-splitter").kendoSplitter({
orientation: "vertical",
panes: [
{ collapsible: true, size: "100px" },
],
expand: onExpand,
});
});
I have a jQuery dataTable
var oTable = $('#table1').dataTable({
'aaData': data,
'aoColumns': cols,
'bScrollInfinite': true,
'bScrollCollapse': true,
'sScrollY': '200px'
});
I want to scroll to the last row of the table. It currently has 500 rows.
$('#table1').scrollTo($('#table tbody tr').last(), 800);
The above code does not work.
Hoever, when i target body tag
$('body').scrollTo('900px', 800);
It works fine.
I am using the plugin http://demos.flesler.com/jquery/scrollTo/
I believe it needs the pixel value as parameter, try this code below:
$('#table1').scrollTo($('#table tbody tr').last().offset().top, 800);
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());
});
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
I am currently in the process of putting together a jQuery touch carousel. I seem to have run into a slight problem when setting the height (or width) of an element, however.
Below is the relevant code from the function:
carousel = function( container, options )
{
this.settings = $.extend({
// General settings:
width: 600,
height: 400,
slides: 'div',
snapTo: true,
mouseSupport: true,
trackMovement: true,
slideWidth: 600,
slideHeight: 400,
// CSS classes:
wrapperCls: 'carousel_wrapper',
innerCls: 'carousel_scroll_inner'
}, options);
this.container = container;
this.scroller = null;
this.slides = this.container.children(this.settings.slides);
this.numSlides = this.slides.length;
this.scrollWidth = this.settings.width * this.numSlides;
this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.container.wrapInner(this.scroller);
this.scroller.width(1500)
this.scroller.css('width', this.scrollWidth);
this.container.css({ width: this.settings.width, height: this.settings.height });
};
This is in turn called by doing something like:
$(function() {
var carousel1 = new carousel($('#myElement'));
});
#myElement definitely exists, and no error is thrown. this.scroller also contains the correct jQuery object which has been wrapped to the contents of this.container. The problem is that I am unable to set the CSS width or height of this.scroller, using either the width(), height() or css() functions.
What am I missing? I have put together a jsFiddle to demonstrate the problem. If you check the element inspector, you can see that the dimensions are never updated for the div.carousel_scroll_inner element.
The problem is that, here:
this.container.wrapInner(this.scroller);
jQuery will use a copy. So this.scroller is not the same element wrapped around whatever is below this.container. Try:
this.container.addClass(this.settings.wrapperCls);
this.scroller = $('<div />').addClass(this.settings.innerCls);
this.scroller.append(this.container.contents());
this.container.append(this.scroller);