128 lines
3.9 KiB
JavaScript
Executable File
128 lines
3.9 KiB
JavaScript
Executable File
/*=========================================================================================
|
|
File Name: datatables-fixedheader.js
|
|
Description: fixed Header Datatable
|
|
----------------------------------------------------------------------------------------
|
|
Item Name: Modern Admin - Clean Bootstrap 4 Dashboard HTML Template
|
|
Version: 1.0
|
|
Author: PIXINVENT
|
|
Author URL: http://www.themeforest.net/user/pixinvent
|
|
==========================================================================================*/
|
|
|
|
$(document).ready(function() {
|
|
|
|
/************************************
|
|
* Basic initialisation *
|
|
************************************/
|
|
|
|
var dataexFixhBasic = $('.dataex-fixh-basic').DataTable( {
|
|
fixedHeader: {
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
}
|
|
});
|
|
|
|
if ($('body').hasClass('vertical-layout')) {
|
|
var menuWidth = $('.main-menu').outerWidth();
|
|
$('.fixedHeader-floating').css('margin-left',menuWidth+'px');
|
|
}
|
|
|
|
/********************************************
|
|
* Enable / disable FixedHeader *
|
|
********************************************/
|
|
|
|
var tableEnablDeisable = $('.dataex-fixh-enabledisable').DataTable({
|
|
fixedHeader: {
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
}
|
|
});
|
|
|
|
$('#enable').on('click', function() {
|
|
tableEnablDeisable.fixedHeader.enable();
|
|
});
|
|
|
|
$('#disable').on('click', function() {
|
|
tableEnablDeisable.fixedHeader.disable();
|
|
});
|
|
|
|
/***************************************
|
|
* Show / hide FixedHeader *
|
|
***************************************/
|
|
|
|
var tableHideHeader = $('.dataex-fixh-hideheader').DataTable({
|
|
fixedHeader: {
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
}
|
|
});
|
|
|
|
var visible = true;
|
|
var tableContainer = $(tableHideHeader.table().container());
|
|
|
|
$('#toggle').on('click', function() {
|
|
tableContainer.css('display', visible ? 'none' : 'block');
|
|
tableHideHeader.fixedHeader.adjust();
|
|
|
|
visible = !visible;
|
|
});
|
|
|
|
/********************************************
|
|
* Enable / disable FixedHeader *
|
|
********************************************/
|
|
|
|
var tableResponsive = $('.dataex-fixh-responsive').DataTable({
|
|
responsive: true
|
|
});
|
|
|
|
new $.fn.dataTable.FixedHeader(tableResponsive,{
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
});
|
|
|
|
/**************************************************
|
|
* Responsive integration (Bootstrap) *
|
|
**************************************************/
|
|
|
|
var tableResponsiveBootstrap = $('.dataex-fixh-responsive-bootstrap').DataTable({
|
|
responsive: true
|
|
});
|
|
|
|
new $.fn.dataTable.FixedHeader(tableResponsiveBootstrap,{
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
});
|
|
|
|
/**************************************
|
|
* ColReorder integration *
|
|
**************************************/
|
|
|
|
var tableColReorder = $('.dataex-fixh-reorder').DataTable({
|
|
fixedHeader: {
|
|
header: true,
|
|
headerOffset: $('.header-navbar').outerHeight()
|
|
},
|
|
colReorder: true
|
|
});
|
|
|
|
// Resize datatable on menu width change and window resize
|
|
$(function () {
|
|
|
|
$(".menu-toggle").on('click', resize);
|
|
|
|
// Resize function
|
|
function resize() {
|
|
setTimeout(function() {
|
|
|
|
// ReDraw DataTable
|
|
dataexFixhBasic.draw();
|
|
tableEnablDeisable.draw();
|
|
tableHideHeader.draw();
|
|
tableResponsive.draw();
|
|
tableResponsiveBootstrap.draw();
|
|
tableColReorder.draw();
|
|
}, 400);
|
|
}
|
|
});
|
|
|
|
|
|
}); |