วันจันทร์ที่ 3 กรกฎาคม พ.ศ. 2566

Search text in table with Alpine js

  <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>



ไม่มีความคิดเห็น: