Features - ScrollResize: Support for DataTables 2+

pull/583/head
Allan Jardine 7 months ago
parent a3912c9889
commit 8939a585fb

@ -41,7 +41,7 @@
// Browser // Browser
factory( jQuery, window, document ); factory( jQuery, window, document );
} }
}(function( $, window, document, undefined ) { }(function( $, window, document ) {
'use strict'; 'use strict';
var DataTable = $.fn.dataTable; var DataTable = $.fn.dataTable;
@ -112,13 +112,13 @@ ScrollResize.prototype = {
var t = dt.table(); var t = dt.table();
var offsetTop = $(settings.table).offset().top; var offsetTop = $(settings.table).offset().top;
var availableHeight = settings.host.height(); var availableHeight = settings.host.height();
var scrollBody = $('div.dataTables_scrollBody', t.container()); var scrollBody = $('div.dt-scroll-body', t.container());
// Subtract the height of the header, footer and the elements // Subtract the height of the header, footer and the elements
// surrounding the table // surrounding the table
availableHeight -= offsetTop; availableHeight -= offsetTop;
availableHeight -= availableHeight -=
settings.container.height() - (offsetTop + scrollBody.height()); settings.container.height() - (offsetTop + scrollBody.height());
$('div.dataTables_scrollBody', t.container()).css({ $('div.dt-scroll-body', t.container()).css({
maxHeight: availableHeight, maxHeight: availableHeight,
height: availableHeight, height: availableHeight,
}); });

@ -72,13 +72,13 @@ ScrollResize.prototype = {
var t = dt.table(); var t = dt.table();
var offsetTop = $(settings.table).offset().top; var offsetTop = $(settings.table).offset().top;
var availableHeight = settings.host.height(); var availableHeight = settings.host.height();
var scrollBody = $('div.dataTables_scrollBody', t.container()); var scrollBody = $('div.dt-scroll-body', t.container());
// Subtract the height of the header, footer and the elements // Subtract the height of the header, footer and the elements
// surrounding the table // surrounding the table
availableHeight -= offsetTop; availableHeight -= offsetTop;
availableHeight -= availableHeight -=
settings.container.height() - (offsetTop + scrollBody.height()); settings.container.height() - (offsetTop + scrollBody.height());
$('div.dataTables_scrollBody', t.container()).css({ $('div.dt-scroll-body', t.container()).css({
maxHeight: availableHeight, maxHeight: availableHeight,
height: availableHeight, height: availableHeight,
}); });

@ -5,7 +5,7 @@
<title>DataTables page resize example</title> <title>DataTables page resize example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css">
<style type="text/css"> <style type="text/css">
#resize_wrapper { #resize_wrapper {
position: absolute; position: absolute;
@ -16,8 +16,8 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script> <script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready( function () { $(document).ready( function () {

@ -5,7 +5,7 @@
<title>DataTables page resize example</title> <title>DataTables page resize example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css">
<style type="text/css"> <style type="text/css">
div.container { div.container {
margin: 0 auto; margin: 0 auto;
@ -28,8 +28,8 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script> <script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready( function () { $(document).ready( function () {

@ -5,7 +5,7 @@
<title>DataTables page resize example</title> <title>DataTables page resize example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css">
<style type="text/css"> <style type="text/css">
div.container { div.container {
margin: 0 auto; margin: 0 auto;
@ -47,8 +47,8 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script> <script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready( function () { $(document).ready( function () {

@ -5,7 +5,7 @@
<title>DataTables page resize example</title> <title>DataTables page resize example</title>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.0/css/dataTables.dataTables.min.css">
<style type="text/css"> <style type="text/css">
#resize_wrapper { #resize_wrapper {
height: 200px; height: 200px;
@ -15,8 +15,8 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/2.0.0/js/dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script> <script type="text/javascript" language="javascript" src="dataTables.scrollResize.js"></script>
<script type="text/javascript" charset="utf-8"> <script type="text/javascript" charset="utf-8">
$(document).ready( function () { $(document).ready( function () {

@ -91,7 +91,7 @@ ScrollResize.prototype = {
var t = dt.table(); var t = dt.table();
var offsetTop = $(settings.table).offset()!.top; var offsetTop = $(settings.table).offset()!.top;
var availableHeight = settings.host.height(); var availableHeight = settings.host.height();
var scrollBody = $('div.dataTables_scrollBody', t.container()); var scrollBody = $('div.dt-scroll-body', t.container());
// Subtract the height of the header, footer and the elements // Subtract the height of the header, footer and the elements
// surrounding the table // surrounding the table
@ -99,7 +99,7 @@ ScrollResize.prototype = {
availableHeight -= availableHeight -=
settings.container.height() - (offsetTop + scrollBody.height()!); settings.container.height() - (offsetTop + scrollBody.height()!);
$('div.dataTables_scrollBody', t.container()).css({ $('div.dt-scroll-body', t.container()).css({
maxHeight: availableHeight, maxHeight: availableHeight,
height: availableHeight, height: availableHeight,
}); });

Loading…
Cancel
Save