У меня есть 2 таблицы в моем представлении, где я выбираю строку из table1, а данные возвращаются в table2
Проблема в том, что когда я выбираю вторую строку, он не будет отправлять запрос ajax, пока Я вижу, что щелчок срабатывает.
Снимки экрана
view
results
Код
script
<script>
$(function(){
// table 1
$('.data_table').DataTable({
processing: true,
select : true,
language: {
processing: '<span>Processing...</span>',
},
serverSide: true,
ajax: '{{ route('schoolsIndexData') }}',
columns: [
{ data: 'photo' },
{ data: 'name' },
{ data: 'type' },
],
"order": [[ 0, "desc" ]],
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 2, 3, 1 ]
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
]
});
// table 2
$('.data_table tbody').on('click', 'tr', function (e) {
e.preventDefault();
var schoolId = $(this).attr('id');
$('#teachers').DataTable({
processing: true,
destroy: true,
retrieve:true,
language: {
processing: '<span>Processing...</span>',
},
ajax: {
url: '{{url('dashboard/teacherIndexData')}}/'+schoolId,
type: "GET",
cache: true
},
columns: [
{ data: 'id' },
{ data: 'photo' },
{ data: 'name' },
{ data: 'action', orderable: false, searchable: false },
],
"order": [[ 0, "desc" ]],
dom: 'Bfrtip',
buttons: [
{
extend: 'copy',
exportOptions: {
columns: [ 0, ':visible' ]
}
},
{
extend: 'excel',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'csv',
exportOptions: {
columns: ':visible'
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [ 2, 3, 1 ]
}
},
{
extend: 'print',
exportOptions: {
columns: ':visible'
}
},
'colvis'
]
});
console.log(schoolId); // result of this log is in screenshots above
});
});
</script>
Вопрос
Почему я не могу получить мои следующие клики для отправки запроса на сервер? что я должен сделать, чтобы это исправить?
Обновление
Пример кода