首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

无法使用yajra数据表显示html元素

Yajra DataTables 是一个 Laravel 扩展,用于将数据表与 DataTables jQuery 插件集成

  1. 确保已安装并配置 Yajra DataTables。在你的 Laravel 项目中运行以下命令安装 Yajra DataTables:
代码语言:javascript
复制
composer require yajra/laravel-datatables-oracle
  1. config/app.php 文件中注册服务提供者和门面:
代码语言:javascript
复制
'providers' => [
    // ...
    Yajra\DataTables\DataTablesServiceProvider::class,
],

'aliases' => [
    // ...
    'DataTables' => Yajra\DataTables\Facades\DataTables::class,
],
  1. 发布配置文件:
代码语言:javascript
复制
php artisan vendor:publish --provider="Yajra\DataTables\DataTablesServiceProvider"
  1. 在你的控制器中,使用 Yajra DataTables 返回 JSON 数据:
代码语言:javascript
复制
use Yajra\DataTables\Facades\DataTables;

public function index(DataTables $dataTable)
{
    return $dataTable->eloquent(Model::query())->toJson();
}
  1. 在你的视图中,确保已加载 jQuery 和 DataTables CSS/JS 文件。你可以在 resources/views/layouts/app.blade.php 文件中添加以下内容:
代码语言:javascript
复制
<!-- 引入 DataTables CSS -->
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- 引入 DataTables JS -->
<script src="https://cdn.datatables.net/11.5.3/js/jquery.dataTables.min.js"></script>
  1. 在你的视图中,使用以下代码初始化 DataTables:
代码语言:javascript
复制
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <!-- 添加其他列 -->
        </tr>
    </thead>
</table>

<script>
$(document).ready(function() {
    $('#example').DataTable({
        "ajax": "{{ route('your.route') }}",
        "columns": [
            { "data": "column1" },
            { "data": "column2" },
            // 添加其他列
        ]
    });
});
</script>

请确保将 your.route 替换为你的控制器方法的路由名称,并将 column1column2 等替换为你的数据表中的实际列名。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券