解决方法 Jquery Laravel 中的数据表

Question

我创建了一个侧边栏菜单，它通过目标调用其页面。 没问题。 我尝试添加数据表，它工作正常，但是当我在菜单之间切换时，数据表将不再工作。

这是我的代码

在app.blade.php

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="{{ asset('public/js/app.js') }}" defer></script>
<script src="{{ asset('public/js/menu.js') }}" defer></script>
<script src="public/adminlte/dist/js/adminlte.js"></script>
<script src="public/adminlte/dist/js/pages/dashboard.js"></script>
<script src="public/adminlte/dist/js/demo.js"></script>

我的刀片就是这个（我没有包括 HTML，因为它很长，但我在刀片内调用脚本）

<script type="text/javascript">
$.noConflict();
function loadService(){
    
    $('#tblService').DataTable();
}

loadService();

我不确定我是否在这里犯了某种错误，但请告知。

这是我对错误的意思的视频

https://www.loom.com/share/a533c6a34a9c43a194f6d301e109695b

Answer 1

尝试将您的 DataTable 实例存储到变量中，以避免多次创建数据表：

let dataTableInstance = null;

function loadService() {
  if (!dataTableInstance )
    dataTableInstance = $('#tblService').DataTable();
  }
}