<div class="row mt-2 no-gutters" x-init="appInit" x-data="rowData">
<input x-model="search" class="form-control" type="search" placeholder="ค้นหา...">
width:100%; height:450px; overflow:auto; position:relative; resize: vertical;">
<table id="myTable" class="table table-sm table-bordered table-striped table-hover">
<thead>
<tr>
<th>#</th> <th>ชื่อสกุล</th>
</tr>
</thead>
<tbody>
<template x-for="row,index in items.data">
<tr x-show="searchtext($el)" >
<td x-text="++index"></td>
<td x-text="row.name"></td>
</tr>
</template>
</tbody>
</table>
</div>
<script>
document.addEventListener('alpine:init', () => {
Alpine.data('rowData', () => ({
search: '',
items: {},
appInit() {
const url = 'https://....'
this.items = fetch(url)
},
searchtext(el) {
return this.search === '' || el.textContent.includes(this.search)
},
}))
})
</script>
วันจันทร์ที่ 3 กรกฎาคม พ.ศ. 2566
Search text in table with Alpine js
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ไม่มีความคิดเห็น:
แสดงความคิดเห็น