Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 81728

Duplicate wrapper with browser forward/back button

$
0
0

I think this is related to using Turbolinks, but I haven't been able to get to the bottom of what's happening.

I'm giving all tables I'd like to display as DataTables the class "enable-data-table," then initializing such tables on the turbolinks:load event.

$(document).on "turbolinks:load", ->
  $('table.enable-data-table')
    .DataTable()

This works great when I'm clicking to navigate. But when I use the browser forward or back buttons, I get a DataTables wrapper div nested in another DataTables wrapper div. The table is only displayed once, but the search box and pagination are displayed twice.

The html produced looks much like this:

<div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
  <div class="dataTables_length" id="DataTables_Table_0_length">
    <label>Show
      <select name="DataTables_Table_0_length" aria-controls="DataTables_Table_0" class="">
        <option value="25">25</option>
        <option value="100">100</option>
        <option value="250">250</option>
      </select>
     entries
    </label>
  </div>
  <div id="DataTables_Table_0_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="" placeholder="" aria-controls="DataTables_Table_0"></label>
  </div>
  <div id="DataTables_Table_0_wrapper" class="dataTables_wrapper no-footer">
    <div class="dataTables_length" id="DataTables_Table_0_length">
      *Identical to DataTables_Table_0_length above*
    </div>
    <table class="enable-data-table dataTable no-footer" data-order="[[ 0, &quot;desc&quot; ]]" id="DataTables_Table_0" role="grid" aria-describedby="DataTables_Table_0_info">
      *Thead, tbody content here*
    </table>
    <div class="dataTables_info" id="DataTables_Table_0_info" role="status" aria-live="polite">Showing 1 to 20 of 20 entries
    </div>
    <div class="dataTables_paginate paging_simple_numbers" id="DataTables_Table_0_paginate">
      *Pagination here*
    </div>
  </div>

Any idea how to display the header & footer only once? Thanks!

Chris


Viewing all articles
Browse latest Browse all 81728

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>