Answers

• allan Posts: 63,189Questions: 1Answers: 10,411 Site admin

  August 14

  Happy to take a look at a test case showing the issue so I can debug it and provide some assistance.

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

  August 18

  I do not know how to provide a test case.
  Rails 7, datatables, importmap, stimulus controller
  Instead, I'm attaching a view of the problem:

  

  importmap:

  // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
  import "@hotwired/turbo-rails"
  import "controllers"
  import "@popperjs/core"
  import "bootstrap"
  import "jquery"
  import "datatables.net"
  import "datatables.net-bs5"
  import "datatables.net-responsive"
  import "datatables.net-responsive-bs5"
  import "bootstrap-datepicker"
  import "moment"

  stimulus controller:

  import { Controller } from "@hotwired/stimulus"
  import { Turbo } from "@hotwired/turbo-rails"
  import $ from 'jquery'
  import DataTable from 'datatables.net-bs5'
  import 'datatables.net-responsive-bs5';

  //Turbo.session.drive = false

  // Connects to data-controller="scans"
  export default class extends Controller {

  connect() {
  $('#scans-datatable').DataTable({
  stateSave: true,
  responsive: true,
  processing: true,
  serverSide: true,
  ajax: {
  url: $('#scans-datatable').data('source'),
  type: 'GET'
  },
  columns: [
  {
  'data': 'lot_name'
  },
  {
  'data': 'date',
  'render': DataTable.render.date()
  },
  {
  'data': 'raw_image',
  'render': function(data){
  if (data == '')
  return ""
  else
  return "<img src =" + data + "width=\"120\" height=\"90\">"
  }
  },
  {
  'data': 'processed_image',
  'render': function(data, type, row){
  if (data == '')
  return ""
  else
  return '<a href="' + '/scans/' + row['DT_RowId'] + '/show_processed_image' + '">'+
  '<img src ="' + data + 'width="120" height="90">' +
  '</a>'
  }
  },
  {
  'data': 'average',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'min',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'p25',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'p50',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'p75',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'max',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'standard_deviation',
  'render': DataTable.render.number( null, '.', 2, null ),
  'className': "text-end"
  },
  {
  'data': 'show',
  'searchable': false,
  'sortable': false
  },
  {
  'data': 'edit',
  'searchable': false,
  'sortable': false
  },
  {
  'data': 'destroy',
  'searchable': false,
  'sortable': false
  }
  ]
  });
  }
  }
• kthorngren Posts: 21,160Questions: 26Answers: 4,921

  August 18

  the datatable start loading but it shows a sort of spinning image and it never finishs to load the datatable

  Take a look at the browser's console for errors.

  Kevin
• jbonany Posts: 3Questions: 1Answers: 0

  August 19

  I do not know how to interpret it:

  
• allan Posts: 63,189Questions: 1Answers: 10,411 Site admin

  August 19

  To provide a test case there are a few options:

  1. Link to the page you are working on, if you can make it public
  2. Use Stackbltiz to create an example showing the issue
  3. Create a minimal git repo that demonstrates the issue and link to that.

  I don't immediately know what is causing the issue you are seeing, so I would need a test case showing it to be able to diagnose the problem.

  Allan