按钮在可排序按钮中无法正常工作

Question

所以我正在使用The Argon Dashboard Pro bootstrap template在laravel项目中工作。我试图以可排序的方式显示数据库中的用户数据，但数据显示没有问题，但是当我尝试左键单击表内的链接（例如要编辑用户）时，什么也没发生。我可以右键单击该链接并在新页面上将其打开，但是单击鼠标左键将无济于事。我在做什么错？

这里是代码：

    <div class="header bg-primary pb-6"><!-- Page title -->
        <div class="container-fluid">
            <div class="header-body">
                <div class="row align-items-center py-4">
                    <div class="col-lg-6 col-7">
                        <i class="ni ni-shop text-white"></i>
                        <h6 class="h2 text-white d-inline-block mb-0">Users</h6>
                        <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                                <li class="breadcrumb-item"><a href="#"><i class="ni ni-circle-08"></i></a></li>
                                <li class="breadcrumb-item"><a href="#">Users</a></li>
                            </ol>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="container-fluid mt--6">
        <div class="row">
            <div class="col">
                <div class="card">
                    <!-- card header -->
                    <!-- Card header -->
                    <div class="card-header border-0">
                        <h4 class="card-title mb-0">
                            {{ __('labels.backend.access.users.management') }} <small class="text-muted">{{ __('labels.backend.access.users.active') }}</small>
                        </h4>
                        <!-- Import users -->
                        <div class="btn-toolbar float-right" role="toolbar" aria-label="@lang('labels.general.toolbar_btn_groups')">
                            <a href="#" class="btn btn-success ml-1" data-toggle="tooltip" title="@lang('labels.general.import_users')"><i class="fas fa-file-import"></i></a>
                        </div>

                        <!--Create new user-->
                        <div class="btn-toolbar float-right" role="toolbar" aria-label="@lang('labels.general.toolbar_btn_groups')">
                            <a href="{{ route('users.create') }}" class="btn btn-success ml-1" data-toggle="tooltip" title="@lang('labels.general.create_new')"><i class="fas fa-plus-circle"></i></a>
                        </div>

                    <!-- Search users -->
                        <form class="navbar-search navbar-search-light form-inline mr-sm-3 float-right" id="navbar-search-main">
                            <div class="form-group mb-0">
                                <div class="input-group input-group-alternative input-group-merge">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                                    </div>
                                    <input class="form-control" placeholder="Search User" type="text">
                                </div>
                            </div>
                            <button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </form>
                    </div>
                    <!-- Light table -->
                    <div class="table-responsive" data-toggle="list" data-list-values='["id", "name", "email", "role", "updated"]'>
                        <table class="table align-items-center table-flush">
                            <thead class="thead-light">
                            <tr>
                                <th scope="col" class="sort" data-sort="id">User ID</th>
                                <th scope="col" class="sort" data-sort="name">Name</th>
                                <th scope="col" class="sort" data-sort="email">E-mail Address</th>
                                <th scope="col" class="sort" data-sort="role">Role</th>
                                <th scope="col">Active</th>
                                <th scope="col" class="sort" data-sort="updated">Last Updated At</th>
                                <th scope="col">Actions</th>
                            </tr>
                            </thead>
                            <tbody class="list">
                            @foreach($users as $user)
                                <tr>
                                    <td><span class="id mb-0 text-sm">{{ $user->id }}</span></td>
                                    <td><span class="name mb-0 text-sm">{{ $user->first_name. ' ' .$user->last_name }}</span></td>
                                    <td class="email mb-0 text-sm">{{ $user->email }}</td>
                                    <td><span class="role mb-0 text-sm">[Role]</span></td>
                                    <td>{{ $user->active == '1' ? 'Active' : 'Inactive'}}</td>
                                    <td><span class="updated mb-0 text-sm">{{ $user->updated_at->diffForHumans() }}</span></td>
                                    <td>
                                        <a href="/users/{{$user->id}}/edit"><i class="fas fa-edit" style="font-size:24px"></i></a>
                                        <a href="/users/{{$user->id}}/delete"><i class="fas fa-trash-alt" style="font-size:24px"></i></a>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                    <!-- Card footer -->
                    <div class="card-footer py-4">
                        <nav aria-label="...">
                            <ul class="pagination justify-content-end mb-0">
                                <li class="page-item disabled">
                                    <a class="page-link" href="#" tabindex="-1">
                                        <i class="fas fa-angle-left"></i>
                                        <span class="sr-only">Previous</span>
                                    </a>
                                </li>
                                <li class="page-item active">
                                    <a class="page-link" href="#">1</a>
                                </li>
                                <li class="page-item">
                                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="page-item"><a class="page-link" href="#">3</a></li>
                                <li class="page-item">
                                    <a class="page-link" href="#">
                                        <i class="fas fa-angle-right"></i>
                                        <span class="sr-only">Next</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

单击右边的“ bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read property 'nodeName' of undefined”下拉菜单时，我会在控制台中看到js错误

检查argon-dashboard-pro-laravel.creative-tim.com/sortable

临时修复

使用

onclick="location.href = 'YOUR_LINKS_GOES_HERE';"

示例

//...
<td>
   <a href="/users/{{$user->id}}/edit" onclick="location.href = '/users/" . {{$user->id}} . "/edit';"><i class="fas fa-edit" style="font-size:24px"></i></a>
   <a href="/users/{{$user->id}}/delete" onclick="location.href = '/users/" . {{$user->id}} . "/delete';"><i class="fas fa-trash-alt" style="font-size:24px"></i></a>
</td>