ColReorder and Scroller...

huyschi

Hi,
Is there a know issue activating ColReorder and Scroller extensions ?
As soon as I drag and drop a column to a new position (reorder of the columns), the stroller bar disappears, I have to refresh the page to get it back...
I'll appreciate any helpful response. Thank you.

Regards,
Nissim

kthorngren

The combination of the two seem to work here:
http://live.datatables.net/piyevete/1/edit

The problem is likely specific to your environment. Please post a link to your page or a test case (update mine if you want) to show the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

huyschi

Hi Kevin,

Thank you for your response.

I have updated your link.
As soon as you reorder the column (Drag and drop a column to a different position), the search fields at the bottom of the columns disappears. Sometimes also the stroller disappears.

I hope this helps to see my problem.
Thank you.

Regards,
Nissim

kthorngren

That helps a lot to understand what you are doing. Note that when you update a live.datatables.net example the number in the link increases. Your example is actually at:
http://live.datatables.net/piyevete/2/edit

As explained in this thread scrollX clones the header and footer. Your example is applying the inputs to the cloned footer which really shouldn't be displayed. Note there is a footer below the scroll bar but this is different table that Datatables builds. All this can be seen by using the browser's inspector. A different jQuery selector will need to be used to apply the inputs. See this example:
http://live.datatables.net/piyevete/4/edit

Based on the thread I linked to I added a class (filterfoot) to the footer to use as the selector for the keyup/change event. This seems to work even with dragging columns.

The developers may provide a simpler/better solution for applying the inputs.

Kevin

huyschi

Hi Kevin,
Thank you for taking the time.
I can still see, that your example has the same issue I have, as soon as you drag the column, e.g. the search field disappear, or even typing a letter in the search field (at the bottom of the column), the search fields disappear.
Maybe I'm missing something here, but I still have the issue.
I can not see where you have added the class (filterfoot), and where did you use it.
Sorry, I'm new to the datatables.

Regards,
Nissim

kthorngren

Are you looking at this example?
http://live.datatables.net/piyevete/4/edit

The class is added in the HTML table tfoot. I don't see the problems you mention with the latest example. If you have problems with this example please provide exact steps to recreate.

Kevin

huyschi

Hi Kevin,
My apology. Yes, I did look at the wrong example. Your example works just the way I would like to have.
I still have some issues which I don't understand where they come from.
I see that you are not having the following files:
colReorder.dataTables.min.css & dataTables.colReorder.min.js (neither for scroller).
As far as I know, these two files are required for e.g. draging columns.

Thank you.

Regards,
Nissim

colin

The CDN allows the files to be concatenated together. Kevin's example has this line:

https://cdn.datatables.net/v/dt/dt-1.10.20/cr-1.5.2/sc-2.0.1/datatables.min.js

The ct-1.5.2 is for the ColReorder.

huyschi

Hi Colin,
Thank you for the hint, but it didn't bring me further.
By the way, where is the class selector - ".dataTables_scrollFootInner" is defined ?

I'm trying to attach a file with screenshots, but I can not, it asks for a URL.

I'm using datatables in a ruby on rails framework environment. The data for the table is provided by the rails controller over (in my example) an @event variable.

Thew following is the code I'm using:

<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/cr-1.5.2/sc-2.0.1/datatables.min.js"></script>

<h1>Dashboard</h1>

<table id="dashboard" class="table thead-dark table-responsive table-striped table-hover footable datatable-basic display responsive nowrap" width="100%" data-paging="true" data-page-size="25" data-sorting="true" data-filtering="true" data-editing="false" data-state="false">
  <thead>
    <tr>
      <th>Name</th>
      <th>Event type definition</th>
      <th>Activities</th>
      <th>Location</th>
      <th>Trainer</th>
      <th>From - To</th>
      <th>Attendees</th>
      <th>Status</th>
      <th>Office</th>
      <th>Vouchers</th>
      <!-- <th colspan="3"></th> - DataTables needs on th per td -->
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  
  <tfoot>
      <tr>
        <th class="filterfoot">Name</th>
        <th class="filterfoot">Event type definition</th>
        <th class="filterfoot">Activities</th>
        <th class="filterfoot">Location</th>
        <th class="filterfoot">Trainer</th>
        <th class="filterfoot">From - To</th>
        <th class="filterfoot">Attendees</th>
        <th class="filterfoot">Status</th>
        <th class="filterfoot">Office</th>
        <th class="filterfoot">Vouchers</th> 
        <th class="filterfoot"></th>
        <th class="filterfoot"></th>
        <th class="filterfoot"></th>                                       
      </tr>
  </tfoot>

  <tbody>
    <% @events.each do |event| %>
      <tr>
        <td><%= event.name %></td>
        <td><%= event.event_type_definition %></td>
        <td>Activities</td>
        <td>Location</td>
        <td>Trainer</td>
        <td>From - To</td>
        <td>Attendees</td>
        <td>Status</td>
        <td>Office</td>
        <td>Vouchers</td>
        <td><%= link_to 'Show', event %></td>
        <td><%= link_to 'Edit', edit_event_path(event) %></td>
        <td><%= link_to 'Destroy', event, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

<script type='text/javascript'>
$(document).ready( function () {
        var table = $('#dashboard').DataTable({
      "ordering": true,
      "order": [ 0, 'asc' ],
      "colReorder": true,
      "pageLength": 4,
      "paging": true,
      "scrollX": true,
    });


    // Setup - add a text input to each footer cell
    $('.dataTables_scrollFootInner table tfoot th').each( function () {
        var title = $('#dashboard thead th').eq( $(this).index() ).text();
        if (title !== '') {
          $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        }
    } );

    // Apply the filter
    $(".filterfoot input").on( 'keyup change', function () {
        table
            .column( $(this).parent().index()+':visible' )
            .search( this.value )
            .draw();
    } );
} );
</script>

=======================================================

Regard,

Nissim

colin

Thank you for the hint, but it didn't bring me further.

I think we really need a link to your page to progress this, or for you to modify Kevin's test case. Without seeing it failing, it's hard to diagnose.

huyschi

yes, I understand, but it is really hard to try and bild something like our environment, because parts of the html are spread, and the system during runtime triggers the different part together.
In Kevin's example, there is the html part and the javascript part. Normally you have the js part in the html part. How does your system gets them together ? sorry, I don't know your example environment, maybe it would give a hint how to do it on my side.
In my latest message, I show how I integrate the js into the html...

Regards,
Nissim

kthorngren

I'm trying to attach a file with screenshots, but I can not, it asks for a URL.

You should be able to drag and drop the screenshot into the text area.

By the way, where is the class selector - ".dataTables_scrollFootInner" is defined ?

That is added by the Scroller Extension. Its possible my selector is not correct for your environment. You can use the browser's inspect tool to see what the footer below the scroll bar looks like. This is from my latest example:

Kevin

huyschi

Hi,
Attached is a jpg file with three screenshots:
The first is during initialization
The second, after I click the column header (for sorting)
The third is after moving a column to a new position

Regards,
Nissim

kthorngren

Looks like you have the Responsive extension enabled - the blue plus signs. You have one or more hidden columns in the last screenshot. This is what is removing the scrollbar. Not sure you can have both working well together.

The blue plus signs suggest you are using Bootstrap. Can't tell by looking at the screenshots (lo resolution) but it looks like you may have two sets of sorting arrows. That combined with having two scrollbars in the second screenshot lead me to believe you have CSS conflicts. You might not be loading the correct Datatables files for Boostrap integration or you may be loading to many. Run through the Download Builder to build the set of files you need for the extensions and styling framework you are using.

Using a different styling Framework may result in different classes being applied.

Without seeing your specific implementation it will be hard to diagnose. Would you be able to build a simple test case that contains your Datatables bootstrap styling and JS code? The data itself doest matter but what does is your CSS and JS files and your Datatables code.

Kevin

huyschi

Hi Kevin,

All looks good now. The issue was the responsive feature. I have now set it to be responsive for different device sizes. And all look good, also from a phone.
Thank you for taking the time and for your patience.

Have a nice day.

Regards,
Nissim