У меня проблема в Vue.js, и я не могу сделать мою таблицу DataTable (с полем поиска, столбцами сортировки и т. Д.).
Я вызываю оригинал datatable.min.js внутри <head> и либоиметь и вызвать другой custom.js файл, который получил:
$(document).ready(function(){
$("#zero_configuration_table").DataTable()
});
Как я могу позвонить и / или присоединить, как в jQuery $('#zero_configuration_table').DataTable();?.
Я не знаю, должен ли яположить этот код, чтобы он работал.
Я не могу применить пример из этого https://codepen.io/feload/pen/PJKoJP?editors=1010. Даже из https://datatables.net/.
В моем файле .vue для вызова его "Таблица страницы"У меня есть:
<template>
...
<div class="table-responsive">
<table id="zero_configuration_table" class="display table table-striped table-bordered table-hover" style="width:100%">
<caption>Popis pristiglih prijava korisnika aplikacije</caption>
<thead class="thead-dark">
<tr>
<th scope="col">DATUM I VRIJEME</th>
<th scope="col">OSOBA</th>
<th scope="col">SADRŽAJ PORUKE</th>
<th scope="col">KONTAKT INFORMACIJE</th>
</tr>
</thead>
<tbody>
<tr v-for="ci in chatItems">
<td class="align-middle"><strong>{{ci.datumPoruka | formatDate}}</strong> u <strong>{{ci.datumPoruka| formatDateVrijeme}}</strong></td>
<td class="align-middle"><a :href="ci.fotografijaKorisnik" title="Pogledaj uvećanu fotografiju korisnika" target="_blank"><img :src="ci.fotografijaKorisnik" :alt="'Fotografija korisnika '+ci.imeKorisnik" width="40" height="40" class="okrugla"></a> {{ci.imeKorisnik}}</td>
<td v-if="ci.sadrzajPoruka.length && !ci.datotekaPoruka.length && !ci.kartaLat.length" class="align-middle">{{ci.sadrzajPoruka}}</td>
<td v-else-if="!ci.sadrzajPoruka.length && ci.datotekaPoruka.length && !ci.kartaLat.length" class="align-middle"><a :href="ci.datotekaPorukaURL" target="_blank" title="Pogledaj uvećanu fotografiju" class="btn btn-md btn-primary">Pogledaj uvećanu fotografiju <em class="fa fa-external-link"></em></a></td>
<td v-else-if="!ci.sadrzajPoruka.length && !ci.datotekaPoruka.length && ci.kartaLat.length" class="align-middle"><a :href="'https://www.google.com/maps/place/'+ci.kartaLat+','+ci.kartaLong" target="_blank" title="Pogledaj na karti" class="btn btn-md btn-primary">Pogledaj na karti <em class="fa fa-external-link"></em></a></td>
<td v-else class="align-middle">Prazna poruka</td>
<td class="align-middle"><a :href="'mailto:'+ci.emailKorisnik" title="Pošalji e-mail"><em class="fa fa-envelope"></em> {{ci.emailKorisnik}}</a><br><em class="fa fa-phone"></em> {{ci.telefonKorisnik}}</td>
</tr>
</tbody>
</table>
</div>
...
</template>
По умолчанию экспорта, в data () У меня есть массив данных:
data() {
return {
chatItems: []
}
},
Под созданным кодом из FireBase для извлечения конкретных данных и позжев <template> для отображения данных с v-for:
created: function(){
$('#scroll_horizontal_table').DataTable(); // THIS IS THE PROBLEM, HOW AND WHERE TO PUT?
this.userData(),
db.ref("chatmodel")
.once("value")
.then(dataSnapshot => {
const itemsArray = [];
dataSnapshot.forEach(childSnapshot => {
const childData = childSnapshot.val();
itemsArray.push({
fotografijaKorisnik: childData.userModel.photo_profile,
imeKorisnik: childData.userModel.name,
telefonKorisnik: childData.userModel.phoneNumber,
emailKorisnik: childData.userModel.email,
datumPoruka: childData.timeStamp,
sadrzajPoruka: childData.message,
datotekaPoruka: childData.fileModel.name_file,
datotekaPorukaURL: childData.fileModel.url_file,
kartaLat: childData.mapModel.latitude,
kartaLong: childData.mapModel.longitude
});
});
this.chatItems = itemsArray; // reverse()
});
},
...
Кажется, все работает, без ошибок для dataTable, но он просто не отображается как таблица по умолчанию с пагинацией, поле поиска,и т.д. по мере необходимости.
Я не знаю почему.
Любая помощь будет оценена.
Спасибо