📅 最后修改于: 2023-12-03 15:17:12.410000 🧑 作者: Mango
Laravel Datatables 是 Laravel 生态系统中非常受欢迎的一个数据表格插件，它基于 Jquery、Bootstrap 和 Datatables 实现了各种复杂数据表格的构建和数据的操作。在实际开发中，我们经常需要获取下一个输入的值，今天我们就来介绍一下如何使用 Laravel Datatables 和 Jquery Next 实现此功能。
Laravel Datatables 是一个非常强大的数据表格插件，它可以将各种数据源（例如 Eloquent 模型或任何数组）转换为 Datatables 数据源，并使用简单、易于理解的 API 帮助我们构建丰富的数据表格。下面是它的基本使用方法：
use Yajra\DataTables\Facades\DataTables;
$data = User::query();
return DataTables::of($data)->make(true);
这里我们使用 of 方法将 Eloquent 模型转换为 Datatables 数据源，并使用 make 方法将结果输出为 JSON 格式。接下来我们就可以使用 Datatables 的 API 来构建和操作数据表格。
在介绍如何使用 Laravel Datatables 和 Jquery Next 实现获取下一个输入之前，先来看一下 Jquery Next 方法的基础使用方法。Jquery Next 方法用于获取当前元素的后一个兄弟元素。下面是它的基本使用方法：
$(selector).next();
这里的 selector 表示当前元素的选择器，调用 next 方法后返回当前元素的后一个兄弟元素。下面是一个例子：
<ul>
<li>Item 1</li>
<li class="current">Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
<script>
$(document).ready(function() {
$(".current").next().css("background-color", "yellow");
});
</script>
这里我们选择了 class 为 current 的元素，调用 next 方法后返回它的后一个兄弟元素，然后设置它的背景颜色为黄色。
接下来我们就可以介绍如何使用 Laravel Datatables 和 Jquery Next 实现获取下一个输入了。具体的流程如下：
具体实现代码如下：
use Yajra\DataTables\Facades\DataTables;
use App\Models\User;
// 定义一个含有多个输入框的表单，并赋值给 $inputs 变量
$inputs = "
<form>
<input type='text' name='input1' id='input1'>
<input type='text' name='input2' id='input2'>
<input type='text' name='input3' id='input3'>
</form>
";
// 获取用户列表数据，并将其转换为 Datatables 数据源
$data = User::query();
// 使用 Datatables 渲染数据表格
return DataTables::of($data)
->addColumn('action', function ($user) use ($inputs) {
// 设置每一行的操作按钮，包括一个“查看”按钮和一个“获取下一个输入”按钮
return "
<button class='btn btn-sm btn-primary btn-view' data-id='{$user->id}'>查看</button>
<button class='btn btn-sm btn-success btn-input' data-input='#input1'>获取下一个输入</button>
";
})
->make(true);
这里我们定义了一个含有多个输入框的表单，并将其赋值给 $inputs 变量。然后我们获取用户列表数据，并使用 Datatables 将其转换为数据源，并渲染出数据表格。注意在渲染数据表格时，我们使用了 addColumn 方法来添加一列操作按钮，并分别为“查看”按钮和“获取下一个输入”按钮设置了不同的类名和属性值。
接下来我们需要监听操作按钮的点击事件，当用户点击“获取下一个输入”按钮时，我们就可以通过 Jquery Next 方法获取到下一个输入框的值。下面是完整的实现代码：
<!DOCTYPE html>
<html>
<head>
<title>Laravel Datatables 获取下一个输入 Jquery Next</title>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<div class="container mt-4">
<div class="card">
<div class="card-body">
{!! $inputs !!}
<hr>
<table class="table" id="datatable">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// 使用 Datatables 获取数据列表
$("#datatable").DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('users.index') }}",
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' },
{ data: 'action', name: 'action', orderable: false, searchable: false },
]
});
// 监听“查看”按钮的点击事件
$(document).on("click", ".btn-view", function() {
var id = $(this).data("id");
// 根据用户ID，弹出一个提示窗口
Swal.fire({
title: "您点击了“查看”按钮",
text: "当前用户ID：" + id,
icon: "success",
});
});
// 监听“获取下一个输入”按钮的点击事件
$(document).on("click", ".btn-input", function() {
var input = $(this).data("input");
var value = $(input).next().val();
// 弹出一个提示窗口，显示下一个输入框的值
Swal.fire({
title: "您点击了“获取下一个输入”按钮",
text: "下一个输入框的值为：" + value,
icon: "success",
});
});
});
</script>
</body>
</html>
这里我们首先使用 Datatables 渲染数据表格，并使用 addColumn 方法为每一行添加了操作按钮。然后我们使用 Jquery 的 on 方法来监听“查看”和“获取下一个输入”按钮的点击事件，当用户点击“获取下一个输入”按钮时，我们就可以调用 next 方法获取下一个输入框的值，并将其显示在一个提示窗口中。
以上就是使用 Laravel Datatables 和 Jquery Next 实现获取下一个输入的全部过程，希望对大家有所帮助！