Answers

• mmssix Posts: 3Questions: 1Answers: 0

  March 28

      //Creates main datatable
      table = $("#utable").DataTable({
          ajax: {
              "url": dash_table_data,
              "type": 'GET',
              "data": function(d){
                  d.tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
              },
          },
          stateSave: true,
          stateSaveParams: function (settings, data) {
              data.search.search = "";
              delete data.order;
              data.start = 0;
              delete data.columns;
          },
          serverSide: true,
          processing: true,
          buttons: [
              {
                  // Powers the clear-all button.  Resets column and table search.
                  text: 'Clear Filters and Refresh Data',
                  className: 'btn btn-secondary btn-light btn-sm dbutton',
                  action: function ( e, dt, node, config ) {
                      $("input.form-control:text").val("");
                      table.columns().search('');
                      table.search('');
                      table.order([4, 'desc']).draw();
                  }
              },
              {
                  // Powers the Export all button.
                  text: 'Export to CSV',
                  className: 'btn btn-secondary btn-light btn-sm dbutton',
                  action: function ( e, dt, node, config ) {
                      $.ajax({
                          url: dash_table_data,
                          type: 'GET',
                          data: {
                              data: JSON.stringify(table.ajax.params()),
                              type: 'report',
                              tz: Intl.DateTimeFormat().resolvedOptions().timeZone
                          },
                          success: function(response, status, xhr) {
                                  // check for a filename
                                  var filename = "";
                                  var disposition = xhr.getResponseHeader('Content-Disposition');
                                  if (disposition && disposition.indexOf('attachment') !== -1) {
                                      var filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
                                      var matches = filenameRegex.exec(disposition);
                                      if (matches != null && matches[1]) filename = matches[1].replace(/['"]/g, '');
                                  }
  
                                  var type = xhr.getResponseHeader('Content-Type');
                                  var blob = new Blob([response], { type: type });
  
                                  if (typeof window.navigator.msSaveBlob !== 'undefined') {
                                      // IE workaround for "HTML7007: One or more blob URLs were revoked by closing the blob
                                      // for which they were created. These URLs will no longer resolve as the data backing the URL has been freed."
                                      window.navigator.msSaveBlob(blob, filename);
                                  } else {
                                      var URL = window.URL || window.webkitURL;
                                      var downloadUrl = URL.createObjectURL(blob);
  
                                      if (filename) {
                                          // use HTML5 a[download] attribute to specify filename
                                          var a = document.createElement("a");
                                          // safari doesn't support this yet
                                          if (typeof a.download === 'undefined') {
                                              window.location.href = downloadUrl;
                                          } else {
                                              a.href = downloadUrl;
                                              a.download = filename;
                                              document.body.appendChild(a);
                                              a.click();
                                          }
                                      } else {
                                          window.location.href = downloadUrl;
                                      }
                                      setTimeout(function () { URL.revokeObjectURL(downloadUrl); }, 100); // cleanup
                                  }
                              },
                          error: function (response) {
                              alert("There was an error communicating. Please reload the page and try again.")
                          }
                      });
                  }
              }
          ],
          pagingType: 'simple_numbers',
          orderCellsTop: true,
          dom: "<'row mt-3 justify-content-between'<'col-md-auto me-auto'i><'text-center col-sm-4'B><'col-md-auto ms-auto'f>>" +
              "<'row mt-2 justify-content-md-center'<'col-sm-12'tr>>" +
              "<'row mt-2 justify-content-between'<'col-md-auto me-auto'><'col-md-auto ms-auto'l>>",
          order: [[4, 'desc']],
          scrollY: window_height,
          scrollCollapse: true,
          scroller: {
              rowHeight: 40
          },
          columns: [
              {data: "ip"},
              {data: "port"},
              {data: "status"},
              {data: "switch"},
              {data: 'created_at',
                  render: function (data, type, row) {
                      return moment.utc(data).local().format('MM/DD/YY, h:mma');
                  }
              }
          ],
          initComplete: function () {
              $('#date-range1').val('')
              // Modifies general search so that it only fires on enter
              $('.dt-search input').unbind().bind('keyup', function(e) {
                  if(e.keyCode == 13) {
                      table.search($(this).val()).draw();
                  }
              });
  
              // Setup - add a text input to each lower header cell
              $('#utable thead tr:eq(1) th').each( function () {
                  const title = $(this).text();
                  if (title === 'Created On') {
                      $(this).html('<input type="text" class="form-control head_search" id="date-range1" placeholder="Enter date range"/>');
                  } else {
                      $(this).html('<input type="text" class="form-control head_search" id="' + title + '" placeholder="Filter ' + title + '" />');
                  }
              });
  
              // Apply and send the single column search. Takes column search variables and submits to datatables
              $.each($('.foot-th', table.table().header()), function () {
                  // https://stackoverflow.com/questions/32525504/sorting-and-searching-issue-with-complex-header
                  const column = table.column($(this).index());
  
                  $( 'input', this).on( 'keyup change', function (event) {
                      if ( column.search() !== this.value && event.keyCode === 13 ) {column.search( this.value ).draw();}
                  });
  
                  $( 'select', this).on( 'keyup change', function () {
                      if ( column.search() !== this.value ) {
                          column.search( this.value ).draw();
                      } else if ( column.search() !== "" ) {
                          column.draw();
                      }
                  });
              });
  
              /*$( '.foot-th'  ).on( 'keyup', ".head_search",function () {
                  // https://live.datatables.net/giharaka/1/edit
                  let all_header_column_names = table.columns().header().map(d => d.textContent).toArray()
                  table
                      .column( all_header_column_names.indexOf(this.id) )
                      .search( this.value )
                      .draw();
              } );*/
          }
      });
  

  Thats my rendering code if it helps at all.
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  March 28 Answer ✓

  Doh! Thank you for letting me know about that. I've committed a fix which will be in the nightly soon, and in the next release of Scroller.

  Allan
• mmssix Posts: 3Questions: 1Answers: 0

  March 28

  Much appreciated Sir. You guys are the best.
• Wooly65 Posts: 66Questions: 19Answers: 0

  April 30

  Since the examples are broken do you plane to push release 2.4.2 soon.
  https://datatables.net/extensions/scroller/examples/initialisation/simple.html
• allan Posts: 61,972Questions: 1Answers: 10,160 Site admin

  April 30

  Sorry it slipped my mind. Yes, I'll get that done by the end of the week.

  Allan