我将发布代码,然后解释我遇到的问题
这是我在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&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>
控制台上的错误消失,但搜索功能仍不能正常工作。
暂无答案!
目前还没有任何答案,快来回答吧!