การทำ datatable(ดาต้าเทเบล) โดยใช้ bootstrap(บูตสแตบ)

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Parichat
PHP VIP Members
PHP VIP Members
โพสต์: 1702
ลงทะเบียนเมื่อ: 08/01/2018 10:03 am

การทำ datatable(ดาต้าเทเบล) โดยใช้ bootstrap(บูตสแตบ)

โพสต์โดย Parichat » 09/01/2018 12:32 am

DataTables สามารถทำงานร่วมกับ Bootstrap 3(บูตสแตบ 3) ได้อย่างราบรื่นโดยใช้ตัวเลือกการจัดวางตารางของ Bootstrap เพื่อนำเสนออินเทอร์เฟซด้วยการออกแบบที่เหมือนกันโดยใช้ Bootstrap(บูตสแตบ) สำหรับไซต์ / แอปของเรา การรวมบูตชุดข้อมูลของ DataTables จะมีตัวแสดงผลสำหรับการควบคุมการแบ่งหน้าใน DataTables(ดาต้าเทเบล) เพื่อให้แน่ใจว่าการจัดเรียงหน้าของตารางมีความสม่ำเสมอด้วย Bootstrap(บูตสแตบ)

ตัวอย่างการทำ DataTables(ดาต้าเทเบล)
table.JPG


โค้ด Javascript(จาวาสคริปต์)

โค้ด: เลือกทั้งหมด

$(document).ready(function() {
    $('#example').DataTable();
} );

เข้าไปลิ้งนี้ได้ https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap.min.js

โค้ด HTML(เอชทีเอ็มเเอล)

โค้ด: เลือกทั้งหมด

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>รหัสปัจจัย</th>
                <th>ชื่อปัจจัย</th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>รหัสปัจจัย</th>
                <th>ชื่อปัจจัย</th>
                <th></th>
                <th></th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
            <td>1</td>
            <td>Trauma<td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a><td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a><td>
         </tr>
         <tr>
            <td>2</td>
            <td>ยาบางชนิด</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>3</td>
            <td>Stress</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>4</td>
            <td>ดื่มแอลกอฮอล์</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>5</td>
            <td>Infection</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>6</td>
            <td>การพักผ่อน</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>7</td>
            <td>ฮอร์โมน</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         </tr>
         <tr>
            <td>8</td>
            <td>อื่นๆ ระบุ</td>
            <td><a class="btn btn-info" href="#" role="button">Edit</a></td>
            <td><a class="btn btn-danger" href="#" role="button">Delete</a></td>
         <tr>
        </tbody>
    </table>


CSS(ซีเอสเอส)
เข้าไปในลิ้งนี้-->https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css

อ้างอิง : https://datatables.net/examples/styling/bootstrap.html
Live Simply, Laugh Often, Love Deeply.....

  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 1 และ บุคคลทั่วไป 0 ท่าน