datatables in a modal: did not show in table format

arfam · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

Hi Kevin

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

arfam · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

Hi Kevin,

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

colin · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

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 · April 2022

Works great, thank you!

datatables in a modal: did not show in table format

datatables in a modal: did not show in table format

Answers

Howdy, Stranger!

Categories

DataTables

datatables in a modal: did not show in table format

datatables in a modal: did not show in table format

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables