Я только что обнаружил DataTables , и я играю с этим. Задача страницы состоит в том, чтобы искать сообщения на основе параметров клиента, возвращая JSON, который заполняет таблицу в любое время без перезагрузки страницы. Проблема, с которой я сталкиваюсь:
TypeError: $(...).dataTable is not a function. jQuery (идеально) загружен до Плагин DataTables (идеально) загружен. jQuery не загружается дважды (если DataTables не загружает jQuery самостоятельно, но я так не думаю).
Порядок загрузки правильный. Я использую Laravel, и jQuery загружается как первый скрипт на каждой странице, в layouts/app.blade.php. Все представления расширяют этот макет, и конкретные сценарии каждого представления загружаются после в @section('scripts').
Я нашел этот ответ и позвонил $.noConflict(true) перед тем, как позвонить $('#results').DataTable(). Теперь плагин работает нормально, но все остальное, связанное с jQuery, возвращает $ is not a function (особенно новые вызовы $ .ajax).
Я хочу понять, почему выбрасывается TypeError: $(...).dataTable is not a function, и решить эту проблему, не используя $.noConflict(true).
У кого-нибудь есть идеи?
Порядок загрузки скриптов:
layouts/app.blade.php
<!-- Scripts -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="{{ asset('js/admin/main.js') }}"></script>
@yield('scripts')
index.blade.php
@extends('layouts.app')
@section('scripts')
<script src="//cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="//cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="{{ secure_asset('js/helpers.js') }}"></script>
<script src="{{ secure_asset('js/admin/Values.js') }}"></script>
<script src="{{ secure_asset('js/SVGTools.js') }}"></script>
<script src="{{ secure_asset('js/admin/Search.js') }}"></script>
<script src="{{ secure_asset('js/admin/Delete.js') }}"></script>
<script src="{{ secure_asset('js/admin/blog/post/PostSearch.js') }}"></script>
<script src="{{ secure_asset('js/admin/blog/post/index.behaviour.js') }}"></script>
@endsection
Вот часть кода, которая отображает данные в таблицу (в PostSearch.js):
this.search = function () {
var getData = function () {
var v = new Values();
v.collect('getValue');
console.log(v.getCollection.raw);
return v.getCollection.raw;
};
/**
* Display the data into the table.
*
* @param {Object} data
* @param {Function} callback
*/
var displayData = function (data, callback) {
if ( ! data.length ) {
// No result
document.getElementById('no-result').innerText = 'Nessun risultato per "'+document.getElementById('search').value+'"';
} else {
// Yes results
document.getElementById('no-result').innerText = "";
// $.noConflict(true);
$('#results').DataTable( {
"ordering": true,
"data": data,
"searching": true,
"columns": [
{'data':'id'},
{'data':'title'},
{'data':'category'},
{'data':'article'},
{'data':'likes'},
{'data':'status'},
{'data':'publication_datetime'},
{'data':'id'}
]
});
}
callback();
};
/**
* Empty the table.
*/
var emptyData = function () {
document.getElementsByTagName('tbody')[0].innerHTML = '';
};
new Search({
events: {
"click": document.getElementById('search')
},
url: function () {
return route_resource_admin_blog('posts', 'show', 'search')
},
data: function () {
return getData();
},
clear: function () {
emptyData();
},
previousStuff: function (target, searchTerm) {
},
successCallback: function (data, textStatus, jqXHR) {
console.log('SUCCESS');
displayData(data, function () {
});
},
errorCallback: function (jqXHR, textStatus, errorThrown) {
},
beforeSend: function (jqXHR, settings) {
},
complete: function (jqXHR, textStatus) {
}
});
};