Lalavel LiveWireでAlpineJSで純粋なデータを使用します
DataTableは、簡単なコードでテーブルを簡単に作るための最も人気のあるjQueryプラグインです.
<div x-data="app()" x-init="init()">
<table class="table table-bordered" id="tableExample">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script>
function app() {
return {
dataTable(newData = "") {
const data = newData !== '' ? newData : {!! json_encode($users) !!};
$('#tableExample').DataTable({
data: data,
columns: [
{
data: 'name'
},
{
data: 'email'
},
],
destroy: true,
language: {
searchPlaceholder: 'Search...',
scrollX: "100%",
sSearch: '',
}
});
},
init() {
const _this = this;
_this.dataTable();
Livewire.on("dataChanged", function(data) {
_this.dataTable(data);
});
}
}
}
</script>
LiveWire機能イベントから新しいデータを変更できます.Reference
この問題について(Lalavel LiveWireでAlpineJSで純粋なデータを使用します), 我々は、より多くの情報をここで見つけました https://dev.to/agiksetiawan/use-pure-datatable-in-laravel-livewire-with-alpinejs-bo4テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol