We Keep Coding

Vue Js History mode is not removing # when using # ids in menu links

I am putting together a SPA using Vue with VueRouter. The site works and I am able to click the link and get to the menu items. I see in the url that the # still preceedes the link name. For example, if I click on Services in the menu, the url states https://sitename.com/#services
I am using mode: 'history' which is supposed to take care of this but, I believe I am missing something. If anyone can look over my code and help me out with this, I would sure appreciate it. Thank you.
In my root directory, I have the router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
function load(componentName) {
return () => import(`#/components/${componentName}`);
}
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: load('Home')
}
,
{
path: '/services',
name: 'Services',
component: load('Services')
},
{
path: '/portfolio',
name: 'Portfolio',
component: load('Portfolio')
},
{
path: '/about',
name: 'About',
component: load('About')
},
{
path: '/team',
name: 'Team',
component: load('Team')
},
{
path: '/contact',
name: 'Contact',
component: load('Contact')
},
{
path: '/privacy',
name: 'Privacy',
component: load('Privacy')
},
{
path: '/success',
name: 'Success',
component: load('Success')
}
]
});
export default router;
in my source directory and within components, I have the Nav.vue component
You can see I am using a conditional that says if the index of 0 is # etc. Which I thought was supposed to eliminate the hash but it does not.
Nav.vue
<template>
<div>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="/">
<span class="first-r">R</span>
<span class="second-r">R</span>
<span class="spark">Spark</span>
</a>
<button
class="navbar-toggler navbar-toggler-right"
type="button"
data-toggle="collapse"
data-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav text-uppercase ml-auto">
<li class="nav-item" v-for="(linkObj, ind) in navList" :key="ind">
<a
class="nav-link js-scroll-trigger"
:href="linkObj.path"
v-if="linkObj.path.indexOf('#') === 0"
>{{linkObj.name}}</a>
<router-link
class="nav-link"
js-scroll-trigger
v-else
:to="linkObj.path"
>{{linkObj.name }}</router-link>
</li>
</ul>
</div>
</div>
</nav>
</div>
</template>
<script>
export default {
data: () => ({
navList: [
{
name: "Services",
path: "#services"
},
{
name: "Portfolio",
path: "#portfolio"
},
{
name: "About",
path: "#about"
},
{
name: "Team",
path: "#team"
},
{
name: "Contact",
path: "#contact"
}
]
})
};
</script>
<style lang="">
</style>
in SRC in my App.vue
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
</style>
main.js
import Vue from 'vue';
import App from './App.vue';
import router from '../router';
import VueResource from "vue-resource"
import './assets/css/style.css'
import './assets/vendor/bootstrap/css/bootstrap.min.css';
import './assets/vendor/fontawesome-free/css/all.min.css';
Vue.config.productionTip = false
Vue.use(VueResource);
new Vue({
router,
render: h => h(App),
}).$mount('#app')
For the sake of space, I will only show the minimum of the Home.vue component
<template>
<div>
<Nav></Nav>
<div>
<header class="masthead">
<div class="container">
<div class="masthead-holder">
<img src="../assets/img/RRLogo2.png" class="mt-5 logo" alt />
<div class="intro-text">
<div class="intro-lead-in">Welcome RR Spark Web Studio!</div>
<div class="intro-heading text-uppercase">Hire Us For Your Next Web Project</div>
<a
class="btn tell-me btn-xl text-uppercase js-scroll-trigger"
href="#services"
>Tell Me More</a>
</div>
</div>
</div>
</header>
</div>
<div>
<section class="page-section" id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Delivering your ideal website is what we do.
</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x icon-color"></i>
<i class="fas fa-paint-brush fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Web Design</h4>
<p
class="text-muted text-justify"
>We take the time to really know your company to get a better understanding of your goals, vision and where you want to go in order to create that perfect, unique website that will help you reach your specific target audience. Your site needs to be user friendly, functional and visually pleasing and that is where are designer comes in to ensure the design is exactly what you want.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x icon-color"></i>
<i class="fas fa-globe fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Web Development</h4>
<p
class="text-muted text-justify"
>Working hand in hand with our designer, we use the latest in web technology, such as HTML; CSS3; JavaScript, to bring you a site that is fast, SEO (Search Engine Optimization) friendly as well as highly responsive. Keeping up with the latest Standards from W3C, your project will be built for a superior user experience on mobile, tablet as well as PC.</p>
</div>
<div class="col-md-4">
<span class="fa-stack fa-4x">
<i class="fas fa-circle fa-stack-2x icon-color"></i>
<i class="fas fa-laptop fa-stack-1x fa-inverse"></i>
</span>
<h4 class="service-heading">Content Management</h4>
<p
class="text-muted text-justify"
>Keeping up with changes on your site in this fast-paced world means that your site will constantly need new and fresh content. Using a content management system (CMS), such as WordPress allows you, the user, the ability to quickly add new content whenever you wish, maintain and implement marketing campaigns and monitor analytics all from within the user dashboard. We provide either WordPress modifications or Custom theming solutions.</p>
</div>
</div>
<div class="row mt-5">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Ready? So Are We</h2>
<div class="row">
<div class="col-lg-6 p-5">
<h3
class="section-subheading text-muted mb-4"
>For a no-obligation quote, click the button below and tell us all about your project.</h3>
<a
class="btn tell-me btn-xl mt-0 mb-4 text-uppercase js-scroll-trigger"
href="#contact"
>CLICK ME</a>
</div>
<div class="col-lg-6 p-5">
<h3
class="section-subheading text-muted mb-4"
>If you don't like contact forms, ask us a question via WhatsApp using the button below.</h3>
<a
class="btn tell-me btn-xl mt-0 text-uppercase js-scroll-trigger"
href="https://api.whatsapp.com/send?phone=525517043338"
target="_blank"
>WhatsApp</a>
</div>
</div>
<!--end row CTA-->
</div>
</div>
</div>
</section>
</div>
<!--other sections-->
<div>
<section class="page-section" id="contact">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Contact Us</h2>
<h3
class="section-subheading text-white"
>We are ready to get your project up and live.</h3>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<Contact></Contact>
</div>
</div>
</div>
</section>
</div>
<Footer></Footer>
</div>
</template>
<script>
import Nav from "./Nav";
import Footer from "./Footer";
import Contact from "./Contact";
export default {
name: "App",
components: {
Nav,
Contact,
Footer
},
data: () => ({
portfolioJSON: [
{
linkToModal: "#portfolioModal1",
image: require("../assets/img/portfolio/icoimanismall.jpg"),
header: "Imani Luz Y Harmonía",
caption: "Graphic Design"
},
{
linkToModal: "#portfolioModal2",
image: require("../assets/img/portfolio/icopsicliliansmall.jpg"),
header: "Transformando Vidas",
caption: "Web Development"
},
{
linkToModal: "#portfolioModal3",
image: require("../assets/img/portfolio/icopsicovintsmall.jpg"),
header: "Viaje a tu Interior",
caption: "Web Development"
},
{
linkToModal: "#portfolioModal4",
image: require("../assets/img/portfolio/algovisolutionsthumb.png"),
header: "Algovi Solutions Landing Page",
caption: "Web Development"
},
{
linkToModal: "#portfolioModal5",
image: require("../assets/img/portfolio/naplesdentalthumb.png"),
header: "Naples Dental Clinic",
caption: "Web Development"
},
{
linkToModal: "#portfolioModal6",
image: require("../assets/img/portfolio/xploreflythumb.png"),
header: "Xplorefly Travel Agency",
caption: "Web Development"
}
]
})
};
</script>
<style lang="">
</style>
Again, thank you for looking at this as I am new to VueJS and learning.

In Nav.vue your navList array containing the paths has a #. The paths has to be identical with the path you defined on your router.js. Try changing your array
from:
navList: [
{
name: "Services",
path: "#services"
},
{
name: "Portfolio",
path: "#portfolio"
},
{
name: "About",
path: "#about"
},
{
name: "Team",
path: "#team"
},
{
name: "Contact",
path: "#contact"
}
]
to
navList: [
{
name: "Services",
path: "/services"
},
{
name: "Portfolio",
path: "/portfolio"
},
{
name: "About",
path: "/about"
},
{
name: "Team",
path: "/team"
},
{
name: "Contact",
path: "/contact"
}
]
if you can't modify the array try modifing the string like:
<router-link :to="linkObj.path.replace('#','/')">{{ linkObj.name }}</router-link>
Conclusion
For routing Navigation to render other components in the <router-view /> tag, try to use exclusive the <router-link to="/path"> tag. The <a href="/path"> tag will also navigate you but this will reload the page.
If you want to navigate to anchors in your page you can still use the <a href="#anchorId">

it bcs your tag contain # in a href="#".
its not part VueRouter, you need to remove it and make new function to scroll to specific area or div.
let say:
<a class="btn tell-me btn-xl text-uppercase js-scroll-trigger" href="#services">Tell Me More</a>
You need to remove the '#' inside the 'href' then add #click="goToSection('yourAreaWantToJump')"
then need to add scroller to specific div. in this case u need to scroll to section 'services'

How to retain jQuery & Bootstrap functionality with no-refresh page loading?

Problem
I'm currently implementing non-refresh page loading in my website, and I am using ajax to load the page accordingly to the content section of my website when a user selects a page on the sidebar.
However, when I try to load a page, it loses all of its Bootstrap functionality (such as drop-downs, toggleables, etc') and the DataTables don't load either.
Example: I have a function that adds the class 'active' to the initial tab which works if I load the page through the URL.
However, it does not seem to get called through the dynamic page loading method that gets triggered when a person clicks on the page on the menu. Also, the DataTables won't load.
This is the no-refresh page-loading part after attempts to remedy the issue:
$(document).on('click', 'a[name=user], a[name=moderator], a[name=admin], a[name=groups]', function(e) {
e.preventDefault();
var href = $(this).attr('href');
$.get('preloader.html', function(html) {
$("#inner_content").append(html);
});
if(location.pathname != href) {
loadContent( '#css', href, '#css' );
loadContent( '#script_elements', href, '#script_elements' );
window.history.pushState('page2', 'Title', href);
}
loadContent( '#inner_content', href, '#inner_content' );
});
//Content Loading Function
function loadContent(target, url, selector) {
$.ajax({
url: url,
success: function(data,status,jqXHR) {
$(target).empty();
$(target).html($(data).find(selector).addBack(selector).children());
}
});
}
The structure of the page that should be loaded is something along those lines (blade):
#extends('user.layouts.main')
#section('extra_css')
<style>
/* Safari */
#-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}
.dataTables_length !important {
margin-left:20px;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.colorpicker-alpha {display:none !important;} .colorpicker{ min-width:128px !important;}
</style>
#endsection
#section('title', 'Group')
#section('content')
<div class="row" id="content">
<div class="col">
<div class="tabs tabs-dark rounded-0 shadow">
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link" href="#group1" name="groupSelector" data-toggle="tab" value="{{ $user->group->id }}">{{ $user->group->name }}</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="group1">
<div id="#{{ $user->id }}" class="tab-pane active ">
<div class="row">
<div class="col-xl-12">
<section class="card">
<header class="card-header">
<div class="card-actions">
<div class="dropdown-menu" role="menu">
<a class="dropdown-item text-1 popup-with-zoom-anim ws-normal" href="#chooseRole">Choose Role</a>
<a class="dropdown-item text-1" href="#" id="admin">Admin</a>
<a class="dropdown-item text-1" href="#" id="moderator">Moderator</a>
<a class="dropdown-item text-1" href="#" id="user">User</a>
</div>
<i id="loading" class="fa fa-spinner fa-spin fa-fw"></i>
<a href="#" class="card-action-toggle" data-card-toggle></a>
</div>
</header>
<div class="card-body pt-0" style="margin-top:-13px;">
<table class="table table-bordered table-striped" id="{{ $user->id }}" style="border: 1px solid #E3E4E7;" name="usersTable">
<thead>
<tr>
<th>#</th>
<th>{!! __('groups.user') !!}</th>
<th>{!! __('groups.rank') !!}</th>
<th>{!! __('groups.lastOn') !!}</th>
<th>{!! __('groups.activity') !!}</th>
<th>{!! __('groups.xyz') !!}</th>
<th></th>
</tr>
</thead>
</table>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
#section('bottom_elements')
<script>
$(document).ready(function() {
var id = $(this).attr('id');
var usersTable = $('table[name=usersTable]#' + id).DataTable({
autoWidth: false,
"processing": true,
"serverSide": true,
"paging": true,
"fnInitComplete": function() {
$('#loading').hide();
},
"order": [ 2, 'desc' ],
dom: "<'row mt-0 mb-0 pt-4 pb-0'<'col-sm-12 col-md-5 pt-0 mb-0 pb-0 'B<'pt-3 mt-4 mb-0'l>><'col-sm-12 mt-4 mb-0 pt-0 col-md-7'p>>",
"buttons": [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'CSV'
}
],
"ajax":{
"url": "/groups/populate",
"type": "POST",
"dataType": "json",
"headers": { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
"data": function ( d ) {
d.group = group;
return $.extend( {}, d, {
group: group,
type: 'members'
});
},
error: function (xhr, error, thrown) {
console.log(xhr);
}
},
"columns": [
{ "data": "user" },
{ "data": "rank" },
{ "data": "lastOn" },
{ "data": "activity" },
{ "data": "xyz" }
]
});
});
$('.dataTables_processing').addClass('dataTables_empty');
$('.dt-button').addClass('btn btn-default btn-sm');
$('.tab-content div:first').addClass('active');
});
</script>
#endsection
The main file looks like so:
<!doctype html>
<html class="fixed">
#include('user.includes.head')
<section id="css">
#yield('extra_css')
</section>
<body>
<section class="body">
#include('user.layouts.navbar')
<div class="inner-wrapper">
#include('user.layouts.sidebar')
<section role="main" class="content-body">
<header class="page-header">
<h2 id="title">#yield('title')</h2>
</header>
#if (session('message_error'))
<div class="row message">
<div class="col-xl-12">
<div class="alert alert-danger">
<strong>Error:</strong> {{ session('message_error') }}
</div>
</div>
</div>
#endif
<div id="innerContent">
#yield('content')
</div>
</section>
</div>
</section>
#include('user.includes.footer')
<div id="bottom_elements">
#yield('bottom_elements')
</div>
</body>
</html>
What have I tried so far?
I tried to change the sequence of the loadContent function calls, however, the functionality of the bootstrap classes still did not work (such as drop-downs, etc').
What am I looking for?
I need that when you click on the menu to load the page (groups), it will load the page and retain all the content of it as well as the bootstrap functionality, as it does not get loaded once the content of the target page loads.
Thanks.

I would suggest including jQuery and bootstrap .js files in your page file, the file that is being loaded dynamically.There is possibly a better way of doing this but this works fine.

How can show and hide a <li> inside the panel?

I have an app that has a login page. In order to login the user has the permission to see two voice inside the panel (if user is admin). If user is not admin I’d like to not display this voices. My problem is how to hide and show its. I have the panel inside index.html.This are the voice that I'd like to display or not in order users permission.
<li id="company" display="none">
<a href="/aziende/" class="panel-close" >
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">home</i>
<i class="material-icons md-only">home</i>
</div>
<div class="item-inner">
<div class="item-title">Company</div>
</div>
</div>
</a>
</li>
<li id="users" display="none">
<a href="/users/" class="panel-close">
<div class="item-content">
<div class="item-media">
<i class="f7-icons ios-only">person</i>
<i class="material-icons md-only">account_circle</i>
</div>
<div class="item-inner">
<div class="item-title">Users</div>
</div>
</div>
</a>
</li>
this is app.js
{
name: 'login',
path: '/login/',
url: './pages/login.html',
on:{
pageInit: function(){
app.navbar.hide('.navbar');
if(user.checkPermission() == 'true'){
app.router.navigate('/home/');
}
}
},
},
{
name: 'home',
path: '/home/',
url: './pages/home.html',
on: {
pageInit: function(e, page) {
app.navbar.show('.navbar');
if(user.checkPermission() == 'true'){
addVoicesToNavbar();
}
}
page.router.clearPreviousHistory();
}
},
}
this method said me that Cannot set property ‘display’ of null
function addVoicesToNavbar(){
document.getElementById("company").display = "block";
document.getElementById("users").display = "block";
}

display is not a valid html attribute, it is a CSS property.
So setting display="none" on your <li> in the example doesn't do anything.
Instead in your markup you need to set an inline CSS style like this to initially hide the element:
<li id="users" style="display:none;">
And in your function change that inline CSS style like this to show it:
document.getElementById("users").style.display = "block";

Here is an example of what you could do:
function addVoicesToNavbar(){
companyElement = document.getElementById("company");
companyElement.style.display = "block";
...
}
Hope it helps!

Algolia search result is overidding css format

I am searching using algolia search. Everything works but instead of the search result to displaying in columns it's only showing in a list format
This is the display in normal html code
but when algolia search result is used to populate the container using the code below this is what it shows
I have this html file
<div class="row isotope-grid" id="hits" >
<!-- Load more -->
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
this is the JS format
var search = instantsearch({
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: `
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="images/product-03.jpg" alt="IMG-PRODUCT">
<a href="#" class="block2-btn flex-c-m stext-103 cl2 size-102 bg0 bor2 hov-btn1 p-lr-15 trans-04 js-show-modal1">
Quick View
</a>
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
<a href="product-detail.html" class="stext-104 cl4 hov-cl1 trans-04 js-name-b2 p-b-6">
Only Check Trouser
</a>
<span class="stext-105 cl3">
$25.50
</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
`
,
}
})
);
search.start();
I have been able to rule out the css and discovered that ALgolia is overriding the display. How do I modify the code to show a custom display of columns instead of the default Algolia list display?
after implementing Dipen Shah's answer, it partially worked and produced to wierd overlap upon rendering but the overlapp disappears if the window is width or height is decreased and return back to full size.
here is what the overlap looks like

Your code is missing very crucial function call which is why your search result is not being rendered properly.
Remove isotope-grid class from div#hits
<!-- Load more -->
<div class="row" id="hits">
<div class="flex-c-m flex-w w-full p-t-45">
<a href="#" class="flex-c-m stext-101 cl5 size-103 bg2 bor1 hov-btn1 p-lr-15 trans-04">
Load More
</a>
</div>
</div>
Initialize hits div with isotope grid after search result is render.
search.on('render', function(){
$grid = $("#hits");
$grid.isotope('destroy');
$grid.isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
After this changes, search result will be rendered correctly.
Explanation:
In the original theme file, on page load event script calls following call to initialize grids.
$(window).on('load', function () {
var $grid = $topeContainer.each(function () {
$(this).isotope({
itemSelector: '.isotope-item',
layoutMode: 'fitRows',
percentPosition: true,
animationEngine : 'best-available',
masonry: {
columnWidth: '.isotope-item'
}
});
});
});
When algolia widget renders search result, your template sets correct css classes but you still need to initialize isotope grid for your search result container. My code does exactly that by intercepting render event of the widget.

Problem
I don't think you're using the correct method for a template.
The docs for Aloglia gives this example:
Javascript:
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
item: document.getElementById('hit-template').innerHTML,
empty: "We didn't find any results for the search <em>\"{{query}}\"</em>"
}
})
);
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="hit">
<div class="hit-image">
<img src="{{image}}" alt="{{name}}">
</div>
<div class="hit-content">
<h3 class="hit-price">${{price}}</h3>
<h2 class="hit-name">{{{_highlightResult.name.value}}}</h2>
<p class="hit-description">{{{_highlightResult.description.value}}}</p>
</div>
</div>
</script>
Solution
This means you need something like this: (replacing the placeholders accordingly)
Javascript:
// Replace with your own values
appId: 'E525782525525',
apiKey: 'xxxxxxxxx,
indexName: 'Listing',
urlSync: true,
searchParameters: {
query: "2",
// hitsPerPage: 10
}
});
search.addWidget(
instantsearch.widgets.hits({
container: '#hits',
templates: {
empty: 'No results',
item: document.getElementById('hit-template').innerHTML,
}
})
);
search.start();
HTML:
<!-- Add this to your HTML document -->
<script type="text/html" id="hit-template">
<div class="col-sm-6 col-md-4 col-lg-3 p-b-35 isotope-item ">
<!-- Block2 -->
<div class="block2">
<div class="block2-pic hov-img0">
<img src="{{image}}" alt="{{name}}">
Quick View
</div>
<div class="block2-txt flex-w flex-t p-t-14">
<div class="block2-txt-child1 flex-col-l ">
${{product_name}}
<span class="stext-105 cl3">${{price}}</span>
</div>
<div class="block2-txt-child2 flex-r p-t-3">
<a href="#" class="btn-addwish-b2 dis-block pos-relative js-addwish-b2">
<img class="icon-heart1 dis-block trans-04" src="images/icons/icon-heart-01.png" alt="ICON">
<img class="icon-heart2 dis-block trans-04 ab-t-l" src="images/icons/icon-heart-02.png" alt="ICON">
</a>
</div>
</div>
</div>
</div>
</script>

Datatables header align when sidebar is collapsed: trigger class change

I'm using datatables with scrollY actived and AdminLTE2 theme:
acquisitionTable = $('#acquisitionsTable').DataTable({
responsive: true,
// "bLengthChange": false,
deferRender: true,
scrollY: '60vh',
scrollCollapse: true,
scroller: true,
the problem is the header align when sidebar is collapsed
and this problem is widespread but all the solutions that I tryed have failed.
I thought to call acquisitionTable.columns.adjust(); but how can I catch the collapse and expand events?
This is the sidebar:
<!-- Left side column. contains the logo and sidebar -->
<aside class="main-sidebar">
<!-- sidebar: style can be found in sidebar.less -->
<section class="sidebar">
<!-- Sidebar user panel -->
<div class="user-panel">
<div class="pull-left image">
<img th:src="#{/static/assets/dist/img/fca.jpg}" class="img-circle"
alt="User Image">
</div>
<div class="pull-left info">
<p sec:authentication="principal.name"></p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<!-- sidebar menu: : style can be found in sidebar.less -->
<ul class="sidebar-menu">
<li class="header">MAIN NAVIGATION</li>
<li><a th:href="#{/}"> <i class="fa fa-dashboard"></i> <span>Dashboard</span>
</a></li>
<li sec:authorize="hasRole('ROLE_ADMIN')" class="treeview"><a
href="#"> <i class="glyphicon glyphicon-cog"></i> <span>Administration</span>
<span class="label label-primary pull-right">5</span>
....
From the documentation (and I check it with debug mode) when the sidebar is collapsed the class .sidebar-collapse is added to body tag.
Thanks

At the moment I fixed the problem with this code:
divW = jQuery("#contentAreaId").width();
setInterval(function(){
var w = jQuery("#contentAreaId").width();
if (w != divW) {
acquisitionTable.columns.adjust();
divW = w;
}
},100);

Have you tried css min-width option, such as :
.dataTables_scrollHead table {
min-width: 100%;
}
also you may want to add :
table-layout: fixed;