datatable插件错误,搜索功能无法正常工作

vsdwdz23  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(254)

我将发布代码,然后解释我遇到的问题
这是我在app.blade上导入jquery的代码

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/dataTables.bootstrap4.min.css">
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar@5.8.0/main.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en'rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="{{ asset('css/mdDateTimePicker.css') }}">

这是我正在使用的视图的代码

@extends('layouts.app')
@section('content')

<div class="container my-5">
    <h1>Gestión Médicos</h1>
</div>
<div class="container my-5">
    <a class="btn btn-primary btn-lg text-body" href="{{route('medico.create')}}">Registrar Médico</a>
</div>
<div class="container">
    <div class="table-responsive">
        <table class="table table-bordered table-hover bg-white" id="medicos">
            <thead>
            <tr class="info">
                <th>Nombre</th>
                <th>Apellido</th>
                <th>Cedula</th>
                <th>Usuario</th>
                <th>Email</th>
                <th>Especialidades</th>
                <th>Teléfono</th>
                <th>Género</th>
                <th colspan="2">Opciones</th>
                <th style="display:none"></th>
            </tr>
            </thead>
            <tbody>

            @foreach ($medicos as $medico)
                <tr>
                    <td>{{$medico->nombre}}</td>
                    <td>{{$medico->apellido}}</td>
                    <td>{{$medico->cedula}}</td>
                    <td>{{$medico->Users->name}}</td>
                    <td>{{$medico->email}}</td>
                    <td>
                        @foreach ($medico->Persona_especialidad as $especialidad)
                            {{$medico->Persona_especiaidad}}
                            {{$especialidad->nombre}}
                        @endforeach
                    </td>
                    <td>{{$medico->telefono}}</td>
                    <td>{{$medico->genero}}</td>
                    <td><a href="{{route('medico.edit', $medico->id)}}">Editar</a></td>
                    <td><a href="{{route('medico.borrar', $medico->id)}}">Borrar</a></td>
                    <td style="display:none"></td>
                </tr>
            </tbody>
            @endforeach
        </table>
    </div>

</div>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/dataTables.bootstrap4.min.js"></script>
<script>
    $('#medicos').DataTable();
</script>
@if (request()->get('mensaje'))
    <script>
        alert('{{request()->get('mensaje')}}')
    </script>
@endif

@endsection

我想知道为什么控制台上会出现这个错误

jquery.dataTables.min.js:79 Uncaught TypeError: Cannot read property 'style' of undefined
    at Ya (jquery.dataTables.min.js:79)
    at za (jquery.dataTables.min.js:65)
    at f (jquery.dataTables.min.js:109)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:109)
    at Function.each (jquery-3.5.1.js:381)
    at jQuery.fn.init.each (jquery-3.5.1.js:203)
    at jQuery.fn.init.u [as dataTable] (jquery.dataTables.min.js:100)
    at jQuery.fn.init.k.fn.DataTable (jquery.dataTables.min.js:184)
    at gestionarMedicos:257

还有为什么搜索功能在表中不起作用,我将向您展示它的外观图片

正如您所看到的,它说当结果匹配时,没有任何结果匹配,而且它以一种不应该的方式覆盖了表的第一行。
我是网络开发和laravel 8方面的新手,因此任何帮助都将不胜感激。
编辑:如果我删除 <td style="display:none"></td> 正如grumpy建议的那样,我得到了这个错误,我甚至没有让表看起来像插件一样。

jquery.dataTables.min.js:41 Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined
    at $a (jquery.dataTables.min.js:41)
    at ea (jquery.dataTables.min.js:32)
    at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:33)
    at jquery-3.5.1.js:208
    at Function.map (jquery-3.5.1.js:463)
    at jQuery.fn.init.map (jquery-3.5.1.js:207)
    at Ha (jquery.dataTables.min.js:33)
    at f (jquery.dataTables.min.js:109)
    at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:109)
    at Function.each (jquery-3.5.1.js:381)

编辑2:当我制作 <th> 匹配 <td> 控制台上的错误消失,但搜索功能仍不能正常工作。

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题