DataTables.Net Scroller and Column filters does not work simultaneously.

iyerramnath

Hi,

We are using SmartAdmin Template v1.8.6.2 (https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) with DataTables.net (https://datatables.net/) and are facing some issues using scroller along with the column filters simultaneously. Both of them works independently however when the "scrollY" property is added for the datatable with the filter property set to "true" then the scroller works fine however the filter stops working.

Here is the sample code specifying data table configuration. (in typescript) (filename: datatable.component.ts)

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;

@Component({

  selector: 'sa-datatable',
  template: `
      <table class="dataTable {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
      </table>
`,
  styles: [
    require('smartadmin-plugins/datatables-bundle/datatables.min.css')
  ]
})
export class DatatableComponent implements OnInit {

  @Input() public options:any;
  @Input() public filter:any;
  @Input() public detailsFormat:any;

  @Input() public paginationLength: boolean;
  @Input() public columnsHide: boolean;
  @Input() public tableClass: string;
  @Input() public width: string = '100%';

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    Promise.all([
      System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js'),
    ]).then(()=>{
      this.render()

    })
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.paginationLength)
      toolbar += 'l';
    if (this.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        // complete: function (xhr) {
        //
        // }
      }
    }

    options = $.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,         
      responsive: true,
      initComplete: (settings, json)=> {
        element.parent().find('.input-sm', ).removeClass("input-sm").addClass('input-md');
      }
    });

    const _dataTable = element.DataTable(options);

    if (this.filter) {
      // Apply the filter
        element.on('keyup change', 'thead th input[type=text]', function () {
            debugger;
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();

      });
    }


    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }

    if(this.detailsFormat){
      let format = this.detailsFormat
      element.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = _dataTable.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
      })
    }

  }

}

And here is the html for displaying datatable. (filename: datatable.html)

 <sa-datatable [options]="{        
               select: true,
            ajax: 'assets/api/tables/datatables.standard.json',
            columns: [ {data: 'name'}, {data: 'phone'}, {data: 'company'}, {data: 'zip'} ] }
            "
                                    filter="true" tableClass="table table-condenced table-striped table-bordered">
                          <thead>
                              <tr>
                                  <th class="hasinput" [ngStyle]="{width:'17%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Name" />
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'18%'}">
                                      <div class="input-group">
                                          <input class="form-control"
                                                 placeholder="Filter Phone"
                                                 type="text" />
                                      </div>
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'10%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Company" />
                                  </th>                                 
                                  <th class="hasinput" [ngStyle]="{width:'16%'}">
                                      <input type="text" class="form-control"
                                             placeholder="Filter Zip" />
                                  </th>
                              </tr>
                              <tr>
                                  <th data-class="expand">Name</th>
                                  <th>Phone</th>
                                  <th data-hide="phone">Company</th>                                 
                                  <th data-hide="phone,tablet">Zip</th>
                              </tr>
                          </thead>
                      </sa-datatable>

Here, the filter works fine till the time we introduce a property "scrollY" in datatable options in datatable.html or in the datatable.component.ts file.

allan

Could you post a link to a page showing the issue please.

Thanks,
Allan

oji

I'm having the same issue. Here's the link:

https://smartadmin-ng2.github.io/#/tables/datatables

Also, when using a phone or tablet, the columns marked with data-hide="phone,tablet" never hide. Can you shed some light here, @allan, please?

allan

data-hide="phone,tablet"

Responsive doesn't support that. It uses class names. Did you get that from the documentation somewhere?

Regarding the filter issue, you'd need to modify the code a little to insert the filters into the elements returned by column().header() (or columns().headers() for multiple).

Allan

oji

Hi @allan,

Actually, I didn't get this from the documentation. This is just the sample that comes with smartadmin template, so I don't know how they come with this. Anyways, I added "desktop" to a couple of th elements in the above example, but I still don't get the columns to hide when using a mobile. Maybe I misunderstood... Having "desktop" class would only make them visible when in a non-mobile environment, right?

Thanks,
-Javier

allan

That should be the case yes. If that isn't working for you, could you give me a link to a page showing the issue?

Thanks,
Allan

oji

Here's the link: https://oji-datatables.herokuapp.com/#/people

Thanks a lot, @allan!

allan

It doesn't look like Responsive is actually running on that table. And indeed checking the debug trace for that page shows that Responsive isn't installed.

Allan