Illuminate without laravel Error Use DB Fatal error: Uncaught exception 'RuntimeException' with message 'A facade root has not been set

 

use Illuminate\Database\Capsule\Manager as DB;

Javascript fetch api Alpine js

 

 

 async function fetchInsert(url,rowitem) {

       const Responses = await fetch(url, {

            method: 'POST',

            headers: {

               'Content-Type': 'application/json',

               'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

                   },

            body: JSON.stringify(rowitem)

            })

        const Res =  await  Responses.json();

        return  Res;

        }

Paginate Alpine json data

          document.addEventListener('alpine:init', () => {

            Alpine.data('aData', () => ({

                search: "",

                pageNumber: 0,

                start: '',

                end: '',

                size: 15,

                total: '',

                rowData: 'https://api/...',

                rowItems: '',

                pages: null,

                sortAsc: '',

                sortCol: '',

                  listData() {

                    this.start = this.pageNumber * this.size,

                    this.end = this.start + this.size;

                    this.rowItems = this.rowData;

                    let data = null;

               if (this.search == "") {

                        this.rowItems = this.rowData;

                        this.total = this.rowItems.length;

                        let p = Math.ceil(this.rowItems.length / this.size);

                        this.pages = p;

                        let data = this.rowItems.slice(this.start, this.end);

                        return data;

               } else {

                        const data = this.rowItems.filter((item) => {

                          return (

                                    item.room_no

                                ).toLowerCase()

                                .includes(this.search.toLowerCase())

                        })

                            this.total = data.length;

                            let p = Math.ceil(data.length / this.size);

                            this.pages = p;

                            this.viewPage(0);

                        return data.slice(this.start, this.end);

                    }

                }

Sort Data from json Alpine

 sort data json

    rowitem: 'https://api',

    sortcol: '',

    sortAsc: '',

sortRow() {  

    if(this.sortCol === col) this.sortAsc = !this.sortAsc;

      this.sortCol = col;

      this.rowItems.sort((a, b) => {

        if(a[this.sortCol] < b[this.sortCol]) return this.sortAsc?1:-1;

        if(a[this.sortCol] > b[this.sortCol]) return this.sortAsc?-1:1;

        return 0;

      });

    }

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>