Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,037

HOME > Client Script Forum > วิธีการทำ components vuejs ที่รันบน laravel ทำ Paginations



 

วิธีการทำ components vuejs ที่รันบน laravel ทำ Paginations

 



Topic : 135075



โพสกระทู้ ( 14 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook



สอบถามครับ เป็นไฟล์ components ของ vuejs ที่รันบน laravel ครับ

Code
<template> <div class="container"> <main role="main" class="container"> <div class="my-3 p-3 bg-white rounded shadow-sm"> <table id="" class="table table-striped table-bordered" style="width:100%"> <thead> <tr> <th class="text-center">ลำดับที่</th> <th class="text-center">ชื่อผู้ใช้งาน</th> <th class="text-center">Account</th> <th class="text-center">ประเภทผู้ใช้งาน</th> <th class="text-center">###</th> </tr> </thead> <tbody> <tr v-for="(AdminData,index) in AdminData"> <td class="text-center">{{index+1}}</td> <td>{{AdminData.admin_name}} {{AdminData.admin_surname}}</td> <td>{{AdminData.admin_useraccount}}</td> <td>{{AdminData.admin_type_name}}</td> <td></td> </tr> </tbody> </table> </div> <footer class="footer mt-auto py-3"> <div class=" text-center"> <p class="mt-5 mb-3 text-muted">© 2020</p> </div> </footer> </main> </div> </template>

Code (JavaScript)


<script>
    export default {
        mounted() {
            this.getUserData();
        },
        methods: {
            getUserData() {
                axios.get('/api/administratorsystem/listuser').then(response => {
                    this.AdminData = response.data;
                });
            }
        },
        data() {
            return {
                AdminData: {
                    admin_id: 0,
                    admin_useraccount: '',
                    admin_name: '',
                    admin_surname: '',
                    admin_type: ''
                }
            }
        }
    }

</script>



จากscript ข้างต้น สามารถใช้ axois ดึง data ทั้งหมดจาก api ปล่อยจาก controller ของ laravel มาได้ครับ

แต่มีวิธีทำ pagination มั๊ยครับ

เดิมเคยใช้ datatable.js เป็น Script สำเร็จรูป แต่เอามาใช้กับอันนี้แล้ว ตารางที่ดึงมาแสดงมั่วเลยครับ

มีข้อแก้ไข หรือแนะนำอย่างไรครับ ขอบคุณมากครับ



Tag : JavaScript, Node.js









ประวัติการแก้ไข
2020-04-03 00:44:18
2020-04-03 00:45:03
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2020-04-03 00:41:51 By : 2300248270287429 View : 1566 Reply : 2
 

 

No. 1



โพสกระทู้ ( 1,458 )
บทความ ( 0 )



สถานะออฟไลน์
Twitter Facebook Blogger

https://www.itsolutionstuff.com/post/laravel-vue-js-pagination-example-with-demoexample.html






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-05 17:58:47 By : PhrayaDev
 


 

No. 2



โพสกระทู้ ( 14 )
บทความ ( 0 )



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : PhrayaDev เมื่อวันที่ 2020-04-05 17:58:47
รายละเอียดของการตอบ ::
ขอบคุณมากครับ

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2020-04-05 19:09:22 By : 2300248270287429
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : วิธีการทำ components vuejs ที่รันบน laravel ทำ Paginations
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่