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

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

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

Parichat
PHP VIP Members
PHP VIP Members
Posts: 4860
Joined: 08/01/2018 10:03 am

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

Post by Parichat » 09/01/2018 12:32 am

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

ตัวอย่างการทำ DataTables(ดาต้าเทเบล)
table.JPG
โค้ด Javascript(จาวาสคริปต์)

Code: Select all

$(document).ready(function() {
    $('#example').DataTable();
} );
เข้าไปลิ้งนี้ได้ https://cdn.datatables.net/1.10.16/js/j ... les.min.js
https://cdn.datatables.net/1.10.16/js/d ... rap.min.js

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

Code: Select all

<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/ ... ap.min.css

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

  • Similar Topics
    Replies
    Views
    Last post

Return to “Booststap Knowledge”

Who is online

Users browsing this forum: No registered users and 6 guests