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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ

BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด

กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การทำ datatable(ดาต้าเทเบล) โดยใช้ bootstrap(บูตสแตบ)

การทำ 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/j ... les.min.js
https://cdn.datatables.net/1.10.16/js/d ... rap.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/ ... ap.min.css

ศึกษาบทเรียน css เพิ่มเติมได้ที่นี่ ปูพื้นความรู้เรื่อง css

อ้างอิง : https://datatables.net/examples/styling/bootstrap.html

ข้างบน