1
2<!DOCTYPE html>
3<html>
4<head>
5 <title>Datatables with Livewire in Laravel 8</title>
6 @livewireStyles
7 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.9.2/tailwind.min.css" integrity="sha512-l7qZAq1JcXdHei6h2z8h8sMe3NbMrmowhOl+QkP3UhifPpCW2MC4M0i26Y8wYpbz1xD9t61MLT9L1N773dzlOA==" crossorigin="anonymous" />
8</head>
9<body>
10<style>
11 .rounded-lg, .rounded-b-none
12 {
13 width: 1140px;
14 }
15
16 .form-input
17 {
18 width: 450px;
19 height: 30px;
20 }
21</style>
22<div class="container mx-auto">
23 <br />
24 <div class="flex items-center markdown">
25 <h1 style="font-size: 2em;"><b>Datatables with Livewire in Laravel 8</b></h1>
26 </div>
27 <br />
28 <div class="flex mb-4">
29 <livewire:livewire-datatables searchable="name, email, gender" exportable />
30 </div>
31
32</div>
33
34</body>
35@livewireScripts
36</html>
37
38
1<div wire:ignore>
2 <table id="table"></table>
3</div>
4
5<script>
6 $("#table").DataTable();
7</script>