Answers

• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  October 2019

  Do you mean like this? Or are you looking to create a custom modal? I don't see any modal code in the block above.

  Allan
• xdavidt Posts: 8Questions: 2Answers: 0

  October 2019

  I'm not sure how to use the modal in my code by the site documentation.
  That is the main reason for asking this question.
  Since the example in the document don't show how to load the data (from ajax or from array)
• xdavidt Posts: 8Questions: 2Answers: 0

  October 2019

  Is it need to be like this ?

  $(document).ready(()=>{
       $('#dataTableLogs tfoot th').each(function () {
           var title = $(this).text();
           $(this).html( '<input type="text" class="form-control" placeholder="Search '+title+'" />' );
       } );
  
  var offenseTable = $('#dataTableLogs').DataTable( {
      order:[[1,""]],
      processing: true,
      serverSide: true,
      ajax: {
          url: '/api/logs/get',
          type: 'POST'
      },
      columns: [
          {data: '_id'},
          {data: 'field1'},
          {data: 'field2'},
          {data: 'field3.0'},
          {data: 'field4'},
          {data: 'field5', "visible": false}
      ],
  responsive: {
              details: {
                  display: $.fn.dataTable.Responsive.display.modal( {
                      header: function ( row ) {
                          var data = row.data();
                          return 'Details for '+data[0]+' '+data[1];
                      }
                  } ),
                  renderer: $.fn.dataTable.Responsive.renderer.tableAll( {
                      tableClass: 'table'
                  } )
              }
          }
  } )
  
  offenseTable.columns().every(function () {
      var that = this;
  
      $( 'input', this.footer() ).on( 'keyup change clear', function () {
          if ( that.search() !== this.value ) {
              that
                  .search( this.value )
                  .draw();
          }
      } );
  } );
  
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  October 2019

  I'm not sure how to use the modal in my code by the site documentation.

  If you want to use a Bootstrap modal you'd need to refer to the Bootstrap documentation. You won't find any documentation for that on this site since we don't document Bootstrap 4 - they do that .

  Allan
• xdavidt Posts: 8Questions: 2Answers: 0

  October 2019

  I want to use the modal bootstrap just the same way you used in the link, but Im not sure how to do so when I'm using data from ajax request.
  Nothing more then that.
  In example you linked to, you showed modal from static data in the HTML page.
  That is the only thing.

  Right now with request above I'm trying to use:

  $('#dataTableLogs tbody').on('click','tr',function(e){
      e.preventDefault()
      var data = offenseTable.row( this ).data()
      alert(data[0])
      } )
  

  But, alert is popup with "undefined".
  So I try:

  offenseTable.$('tr').click(function(){
      var data = offenseTable.fnGetData(this)
      alert(data[0])
  })
  

  Then exception from jquery.
  I don't sure what I'm doing wrong.
  How I get the data the I already have in table into modal ?
  It's must to be bootstrap4 modal by the way...
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  October 2019 edited October 2019 Answer ✓

  alert(data[0])

  You are using objects since you have defined columns.data. You will need to access you data using object notion instead of array notation. For example:

  alert(data._id)

  Kevin
• xdavidt Posts: 8Questions: 2Answers: 0

  October 2019

  Thank you Kevin.
  In that way I can build the Modal manually and get the data into the modal.
  In documents of modal (that Allan linked to), it's look like built-in function without need to create the modal by yourself, that was my main question.

  In any case Thank you.