0

I have a navigation bar in my wesite with a anchor element as toggle for side navigation bar.

<a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button" onclick="toggle_click()">
     <span class="sr-only">Toggle navigation</span>
 </a>

when i click the toggle the side navigation will hide/display.

there are dataTable in the content. those datatable columns are not auto resizing themselves when this toggle event is triggered.but the columns gets auto resized on other events like (zoom,window size change, any event on the datable like (search, changing the number of entries to display)).

image of taggle sidebar enter image description here

image of closed side bar enter image description here

so i want to know how to make this happen when the toggle is triggered.

i tried 

function toggle_click() {
       var mtable = $('#open_ticket_table').DataTable();
       mtable.responsive.recalc();
}

function toggle_click() {
       var mtable = $('#open_ticket_table').DataTable();
       mtable.columns.adjust();
}

all the possible thigs in the internet

Boopathi T
  • 117
  • 1
  • 12

1 Answers1

0

As suggested by @skobaljic we can trigger a javascript resize event. but his code dint work, i dont know why.

after some googling i got this stackoverflow page on triggering resize event by using the below code.

 window.dispatchEvent(new Event('resize'));

unfortunately i dint get any datatables plugin solution for this problem.

Community
  • 1
  • 1
Boopathi T
  • 117
  • 1
  • 12