Модальное всплывающее окно не работает на второй странице Datatable - PullRequest
Новая
       26

Модальное всплывающее окно не работает на второй странице Datatable

0 голосов
/ 17 июня 2020

Ну, так как разбивка на страницы помещается в мою таблицу данных (которая является динамическим c) со второй страницы, моя кнопка для открытия модального окна не работает. Данные отправляются, но модальное окно не отображается, как на первой странице.

Я читал в других потоках и изменил драйвер, как указано в проблемах DOM, однако я все еще не есть какие-либо результаты.

Я оставляю изображения кода, чтобы посмотреть, можно ли его решить, так как я новичок в JQuery.

Datatable Dynami c Код: 

  content +='<tr>';
  content += '<td>' + (num+1) + '</td>';
  content += '<td>' + val.desplazamiento + '</td>';
  content += '<td>' + val.preferencia+'</td>';
  content += '<td>' + val.horario + '</td>';
  content += '<td>' + val.intensidad + '</td>';
  content += '<td>' + restaurant+ '</td>';
  content += '<td>' + val.fecha +'</td>';
  content += '<td><button type="button" id="buttonMostrar" class="btn btn-primary product" data-toggle="modal" data-target="'+"miModal"+num+"\""+'> Mostrar Ruta</button><div class="modal fade" data-id="'+str+"!"+val.inicio+"!"+val.fin+"!"+val.restaurantes[0].priceLevel+"!"+val.restaurantes[0].lat+"!"+val.restaurantes[0].lng+"!"+val.desplazamiento+"\""+'id="'+"miModal"+num+"\""+' tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">  <div class="modal-dialog" role="document" style="width: 800%; height: 100%">    <div id="'+"map"+"\""+' class="modal-content" style="width: 100%; height: 100%">  <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div> </div></div></td>';
  content += '<td><a class="resp-sharing-button__link" href="https://twitter.com/intent/tweet/?text=Mira%20mi%20ruta%20personalizada%0A'+url+'\" target="_blank" rel="noopener" aria-label="">  <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M23.44 4.83c-.8.37-1.5.38-2.22.02.93-.56.98-.96 1.32-2.02-.88.52-1.86.9-2.9 1.1-.82-.88-2-1.43-3.3-1.43-2.5 0-4.55 2.04-4.55 4.54 0 .36.03.7.1 1.04-3.77-.2-7.12-2-9.36-4.75-.4.67-.6 1.45-.6 2.3 0 1.56.8 2.95 2 3.77-.74-.03-1.44-.23-2.05-.57v.06c0 2.2 1.56 4.03 3.64 4.44-.67.2-1.37.2-2.06.08.58 1.8 2.26 3.12 4.25 3.16C5.78 18.1 3.37 18.74 1 18.46c2 1.3 4.4 2.04 6.97 2.04 8.35 0 12.92-6.92 12.92-12.93 0-.2 0-.4-.02-.6.9-.63 1.96-1.22 2.56-2.14z"/></svg>    </div>  </div></a><a class="resp-sharing-button__link" href="mailto:?subject=Mira%20mi%20ruta%20personalizada&amp;body='+url+'\" target="_self" rel="noopener" aria-label="">  <div class="resp-sharing-button resp-sharing-button--email resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid">    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M22 4H2C.9 4 0 4.9 0 6v12c0 1.1.9 2 2 2h20c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7.25 14.43l-3.5 2c-.08.05-.17.07-.25.07-.17 0-.34-.1-.43-.25-.14-.24-.06-.55.18-.68l3.5-2c.24-.14.55-.06.68.18.14.24.06.55-.18.68zm4.75.07c-.1 0-.2-.03-.27-.08l-8.5-5.5c-.23-.15-.3-.46-.15-.7.15-.22.46-.3.7-.14L12 13.4l8.23-5.32c.23-.15.54-.08.7.15.14.23.07.54-.16.7l-8.5 5.5c-.08.04-.17.07-.27.07zm8.93 1.75c-.1.16-.26.25-.43.25-.08 0-.17-.02-.25-.07l-3.5-2c-.24-.13-.32-.44-.18-.68s.44-.32.68-.18l3.5 2c.24.13.32.44.18.68z"/></svg>    </div>  </div></a></td>';

  content += '</tr>';  

  str='';
  num++;

});
   content += '</tbody>';
  $('#rating_table').append(content);

 $('#rating_table').DataTable({
   "lengthMenu": [ [2, 4, 8, -1], [2, 4, 8, "All"] ],
   "iDisplayLength" : 5,        
});

У каждого модального окна есть идентификатор, который его идентифицирует, и который увеличивается с помощью переменной num. Однако я не знаю почему, но чтобы показать модальное окно, указав имя нулевого модального окна, оно работает для всех.

Модальный код: 

$('#rating_table').on('click','#buttonMostrar',function(event) {

var id = $(event.target).data('target');
var datas = document.getElementById(id).getAttribute('data-id');
initMap(datas);
$('#miModal0').modal('show'); 


});
...