datatables in a modal: did not show in table format

arfam

Please, how to fix it?

Bootstrap 5

<!-- Modal -->
<div class="modal fade" id="stdEnrollsModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Matriculas do aluno</h5>
      </div>
        <table id="teste" class="display nowrap" style="width:100%"></table>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fechar</button>
        <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
      </div>
    </div>
  </div>
</div>



<script>
function showStdEnrolls(dataArray){
  // 'show': show modal
  $('#stdEnrollsModal').modal('show');
  // table: to check on click - new version
  let table = $('#teste').DataTable({
    data: dataArray,
    
    // TABLE HEADINGS BELOW
    columns: [
      {"title":"Id"},
      {"title":"Col-1"},
      {"title":"Col-2"},
      {"title":"Col-3"},
      {"title":"Col-4"},
      {"title":"Col-5"},
      {"title":"Col-6"},
      {"title":"Col-7"},
      {"title":"Col-8"},
      {"title":"Col-9"},
      {"title":"Col-10"},
      {"title":"Col-11"},
      {"title":"Col-12"},
    ],    
    responsive: true,    
    retrieve: true,
    "language": {
      "url": "https://cdn.datatables.net/plug-ins/1.11.5/i18n/pt-BR.json"
    },
  })
  
  $('#teste').html(dataArray)
}
</script>

kthorngren

Since you marked everything out its hard to see what the display looks like. It looks like you are using the default Datatables styling instead of using the Bootstrap5 style integration files. You can get the proper files from the Download Builder. You might also need to use columns.adjust() and responsive.recalc() to have Datatables update its display when when the modal is shown, ie, in the show.bs.modal event. Similar to this example.

If you still need help please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

arfam

Hi Kevin,

Thank you for your quick reply!

Bellow 2 updated images of the issue. I'll try all yours tips and I'll give feedback; thank you again.

This is the data I created for this example

let stdEnrolls = [[5, 3, , 3, '1700145M', 'Student 1', 'PM', 'EM', '3S', '01/2019', '12/2019', 'M', 'E02M'], [6, 3, , 3, '1700145T', 'Student 1', 'PM', 'TEPC', '3S', '01/2019', '12/2019', 'M', 'E02T']]

kthorngren

Thanks for the additional info, it helps. Just noticed this:

$('#teste').html(dataArray)

You don't need to do this with Datatables. You have data: dataArray, which will populate the table. Everything else looks ok.

Kevin

arfam

Hi Kevin,

Thank you again for you reply.

New issues:

• Below the function to create and populate the table in Modal
• Each time I click on the "Matriculas" button it grabs the correct data and parameter dataArray receives these data as array correctly. But regardless of the row of the "Matricula" button that I click it allways open the modal with the same data: the data from the first row I had clicked in the "matriculas" button.
• There are some commented lines

function showStdEnrolls(dataArray){
  console.log('dataArray to show in modal table: ' + dataArray);
  console.log('dataArray[0].length: ' + dataArray[0].length)
  console.log('dataArray[1].length: ' + dataArray[1].length)
  // 'show': show modal
  $('#stdEnrollsModal').modal('show');
  //$('#stdEnrollsModal').on('shown.bs.modal');  // don't work, don't open modal!
  
  // let stdEnrrolsTable: to check on click (on new version)
  let stdEnrrolsTable = $('#teste').DataTable({
    data: dataArray,
    
    // Table headings
    columns: [
      {"title":"Id M"},
      {"title":"RA"},
      {"title":"Data M"},
      {"title":"RM Edu1"},
      {"title":"Mat E-College"},
      {"title":"Nome Estudante"},
      {"title":"Unidade"},
      {"title":"Curso"},
      {"title":"Período"},
      {"title":"Início"},
      {"title":"Término"},
      {"title":"Turno"},
      {"title":"Turma"},
    ],    
    responsive: true,    
    retrieve: true,
    "language": {
      "url": "https://cdn.datatables.net/plug-ins/1.11.5/i18n/pt-BR.json"
    },
  }).columns.adjust().responsive.recalc();
  
  // when the row below is commented modal allways shows data from first clicked row ???!!!
  //$('#teste').html(dataArray)
}
</script>

Some images below to help

I'll try to create a test case in live.datatables.net (I don't know how it works). I apologize for any inconvenience.

kthorngren

You have retrieve set to true. This won't use any of the options including data: dataArray, so the data isn't updated. Try using destroy instead. Replace retrieve: true, with destroy: true,. This will reinitialize Datatables with the new data.

Kevin

arfam

Hi Kevin

It worked fine, perfect! I'd like to buy you a beer. Thank you so much for your kindly assistence.

arfam

Hi Kevin,

I am experiencing now the below issue:
* the button "Matriculas" only works if I minimize the browser. With full size browser window the 'table.row( event.target).data()' did not trigger the event (source belo:

 /* Creates table with all students from dataArray and insert one column (last) 
  * with a default button"Matriculas"
  * onClick button "Matriculas" get student enrolls details from Google Sheets*/

  function showData(dataArray){
    $(document)
      .ready(function(){
        let table = $('#data-table').DataTable({
          "language": {
            "url": "https://cdn.datatables.net/plug-ins/1.11.5/i18n/pt-BR.json"
            },
          data: dataArray,
            // TABLE HEADINGS BELOW
            columns: [
              {"title":"RA"},
              {"title":"Estudante"},
              {"title":"Data nasc"},
              {"title":"Sexo"},
              {"title":"RG"},
              {"title":"CPF"},
              {"title":"País nasc"},
              {"title":"UF nasc"},
              {"title":"Cidade nasc"},
              {
                "title":"Matriculas",
                "data": null,
                "defaultContent": "<button>Matrículas</button>"
              },
            ],
            responsive: true,
            destroy: true,
        });


        $('#data-table tbody').on( 'click', 'button',  (event) =>  {
          let dataRow = table.row( event.target).data();
          //var dataRow = table.row( $(this).parents('tr') ).data();
          console.log('row button cliked - data: ' + dataRow)
          let stdId = dataRow[0];
          console.log('stdId get from clicked button on row: ' + stdId)
          google.script.run.withSuccessHandler(showStdEnrolls).getStdEnrolls(stdId)
        });



      })
  }

Please, take a look at the images:

kthorngren

There is nothing obvious in your code snippets that indicate the problem. Please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

You may need to get the tr tag the clicked button is on to use as the row-selector. Something like this:

       $('#data-table tbody').on( 'click', 'button',  (event) =>  {
         let tr = event.target.closest('tr');
         let dataRow = table.row( tr ).data();

Kevin

arfam

Hi Kevin,

test case : https://jsbin.com/neyusuk/edit?html,css,js,console,output

colin

It looks like you didn't implement Kevin's code - see your example updated here: https://jsbin.com/kixokiwege/1/edit?js,output

Colin

arfam

Hi colin,

Thaks for your reply.

In your exemple when I click in button "Matrículas" (last column in each row) the modal did not opened neither in minimized or maximized browser.

In my exemple the modal opens when the browser is minimized but did not open when the browser is maximized (full size), this is the last issue I'm experiencing.

Please, take a look at the image of the console (your exemple) when I clicked in button "Matrículas": it shows undefined.

colin

I commented out the modal code, just to show the code that displays the row data, but yep, I see that too.

Kevin's example from this thread should help, it's demonstrating this,

Colin

arfam

Maybe there is an issue in datatable that I work arounded it as below, but I hope that Datables support team could fix it .

      <div class="row">
        <!-- workaround to make button in child row, only way that button onclik works!!! -->
        <div class="col-lg-10 offset-lg-1" id="listagem">
          <table id="data-table" class="table table-hover dt-responsive nowrap" style="width:100%"></table>
        </div>
      </div>

I

kthorngren

The thing to do is to inspect the HTML when button column is in Responsive and when it is not. Take a look at the differences to see how to navigate the HTML to get the correct tr. I updated the example like this:

          let tr = event.target.closest('tr');
          
          // If closest tr is child row then get previous sibling which is parent row
          if (tr.classList.contains('child')) {
            tr = tr.previousSibling;
          }
  
          let dataRow = table.row( tr ).data();
          console.log(dataRow)

The child tr will have the class child. If the -tag trhas the classchildthen you will need to get the previous sibling which is the parent-tag tr` with the row data. See updated example here:
https://jsbin.com/yawovifeza/1/edit?js,output

Kevin

arfam

Works great, thank you!