แนวทางการใช้งาน DataTable ร่วมกับ Codeigniter ตอนที่ 1

23 August 2017 เขียนเมื่อ 6 ปีก่อน โดย Ninenik Narkdee

datatable codeigniter codeigniter 3

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datatable codeigniter codeigniter 3

ดูแล้ว 11,992 ครั้ง

เนื้อหาในตอนแรกนี้ จะเป็นการแนะนำเบื้องต้นเกี่ยวกับการใช้งาน DataTable ซึ่งเป็น plugin ตารางข้อมูลสำหรับ

ใช้กับ jQuery หลายคนอาจจะเคยเห็นผ่านตา หรือมีการประยุกต์ใช้งานกันไปบ้างแล้ว สำหรับการแนะนำในเบื้องต้นนี้

วิธีใช้งานก็เป็นการเรียกใช้งานอย่างง่าย เราจะใช้งานกับข้อมูลที่มีจำนวนไม่มากนัก เป็นจำนวนข้อมูลในหลักร้อย

เพราะ หากเป็นข้อมูลจำนวนมากๆ จะไม่เหมาะสำหรับรุปแบบเบี้องต้นนี้

ตัวอย่างของเรา จะเป็นรูปแบบที่สามารถใช้ได้ทั่วไป ไม่จำเป็นว่าต้องเป็นใน Codeigniter เท่านั้น หลักการทำงานคร่าวๆ

ก็คือโหลด jQuery js , DataTable css และ js ไฟล์ ต่อด้วยแสดงรายการข้อมูลในตารางปกติ โดยจัดรูปแบบให้รองรับการใช้งาน

ร่วมกับ DataTable ส่วนสุดท้ายก็เรียกใช้งาน DataTable script เท่านี้เราก็สามารถแสดงข้อมูลในตารางปกติ ให้อยู่ในรูปแบบ

ของ DataTable แล้ว

ข้อดีของข้อมูลที่นำมาแสดงในรูปบบ DataTable ก็คือ รายการข้อมูลจะแสดงออกมาสวยงาม ไม่ต้องจัดรูปแบบอะไรมากมาย

มีการแบ่งหน้าข้อมูลให้อัตโนมัติ เลือกที่จะแสดงข้อมูลได้ว่าจะแสดงหน้าละกี่รายการ สามารถเลือกไปหน้าข้อมูลที่ต้องการได้

ค้นหาข้อมูลในตารางได้ รองรับภาษาไทย รองรับการเลือกที่เรียงข้อมูลตามที่ต้องการได้ เหล่านี้เป็นความสามารถเบี้องต้นเท่านั้น

ในตัวอย่างที่จะแสดงให้ดูต่อไปนี้ จะใช้ข้อมูลจากตาราง tbl_provinces จากบทความนี้มาประกอบ

เพิ่มความสามารถ RESTful Services ใน CodeIgniter อย่างง่าย

https://www.ninenik.com/content.php?arti_id=809 via @ninenik

ตารางข้อมูล tbl_provinces จะเป็นข้อมูลจังหวัดในประเทศไทย

ตัวอย่างไฟล์ทดสอบของเราแบบเต็ม ตามโครงสร้างโปรเจ็ค Codeigniter

<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">  
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>       


<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Province ID</th>
            <th>Province Name TH</th>
			<th>Province Name ENG</th>
        </tr>
    </thead>
    <tbody>
<?php
$i_num=0;
$query = $this->db->query("SELECT * FROM tbl_provinces");
foreach ($query->result_array() as $row){
	$i_num++;
?>    
        <tr>
            <td><?=$row['province_id']?></td>
            <td><?=$row['province_name']?></td>
            <td><?=$row['province_name_eng']?></td>            
        </tr>
<?php } ?>
    </tbody>
</table>

<script type="text/javascript">
$(function(){
	$("#table_id").DataTable();
});
</script>

การใช้งานเริ่มต้นให้เราทำการโหลด css และ js ไฟล์ที่จำเป็นมาในหน้าที่จะแสดงข้อมูล ของเราใช้ Codeigniter ที่มีรูปแบบ

เฉพาะ ตั้งแต่บทความแรกๆ แต่ถ้าเข้าใจการทำงานเบื้องต้นน่าจะพอมองภาพออก เราจะทำไว้ที่หน้าแรก เพื่อทดสอบให้ดูการทำงาน

<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">  
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

เนื่องจากในโปรเจ็คทดสอบ Codeigniter ของเรามีการใช้งาน jQuery ใน header อยู่แล้ว แต่ถ้าใครยังไม่ได้กำหนด ก็ให้เพิ่มการเรียกใช้งาน

jQuery ด้วยดังนี้

 <script src="//unpkg.com/jquery@1.11.3"></script> 
<link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">  
<script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>

ต่อไปก็ส่วนของการแสดงข้อมูลจากฐานข้อมูล มาในตารางปกติ

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Province ID</th>
            <th>Province Name TH</th>
			<th>Province Name ENG</th>
        </tr>
    </thead>
    <tbody>
<?php
$i_num=0;
$query = $this->db->query("SELECT * FROM tbl_provinces");
foreach ($query->result_array() as $row){
	$i_num++;
?>    
        <tr>
            <td><?=$row['province_id']?></td>
            <td><?=$row['province_name']?></td>
            <td><?=$row['province_name_eng']?></td>            
        </tr>
<?php } ?>
    </tbody>
</table>

รูปแบบการดึงข้อมูลข้างต้นเป็นรูปกบบการดึงข้อมูลจากฐานข้อมูลของ Codeigniter หลักๆ ที่สำคัญคือ เราต้องกำหนด id ให้กับ <table>

เพื่อใช้อ้างอิงในการเรียกใช้ ในตัวอย่างเรากำหนดเป็นชื่อ table_id และอีกส่วนก็คือการกำหนด <thead> กับ <tbody> เพื่อจัดสัดส่วนของ

ข้อมูลในตาราง

รูปแบบการแสดงข้อมุลข้างต้น เป็นการแสดงรายการข้อมูลทั้งหมดในฐานข้อมูลออกมาทางตาราง เนื่องจากข้อมูลจังหวัด เป็นจำนวนข้อมูล

ที่ไม่มากนัก การแสดงในลักษณะดังกล่าว จึงยังถือว่าเหมาะสมกับการใช้งาน DataTable ในเบื้องต้น

<script type="text/javascript">
$(function(){
	$("#table_id").DataTable();
});
</script>

ส่วนสุดท้ายเป็นการเรียกใช้งาน DataTable jQuery Plugin ใช้งานง่ายแค่บรรทัดเดียว หลักการทำงานก็คือ ให้ตาราง <table> ที่มี

id เท่ากับ table_id เรียกใช้งาน DataTble plugin ผลลัพธ์ที่ได้ ก็จะเป็นดังนี้

จะเห็นว่ารูปแบบการใช้งานสำหรับกรณีข้อมูลมีจำนวนไม่มากนักหรือหลักร้อย เราก็จะสามารถประยุกต์ใช้งานร่วมกับ DataTable ได้อย่างง่าย

ในเนื้อหาต่อๆ ไป จะขออธิบายเกี่ยวกับการประยุกต์เพิ่มเติม รอติดตาม

เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 31-08-2017

การกำหนดข้อมูลการแสดงเป็นภาษาไทย

สำหรับ DataTable นั้น เราสามารถกำหนดการแสดงข้อความที่เป็นข้อมูลกับตารางต่างๆ ไม่ว่าจะเป็น การแสดงจำนวน

รายการข้อมูล การกำหนดจำนวนการแสดง ข้อความการแบ่งหน้า เหล่านี้เป็นต้น นั้น ปกติค่าเริ่มต้นจะเป้นภาษาอังกฤษ

แต่เราสามารถแทนด้วยภาษาไทยตามที่ต้องการได้ รวมทั้งจัดลำดับการแสดงข้อมูลได้ตามต้องการ โดยใช้ language

Option ดังนี้

จากรูปแบบเดิมที่เป็นค่าเริ่มต้น

{
    "decimal":        "",
    "emptyTable":     "No data available in table",
    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "infoEmpty":      "Showing 0 to 0 of 0 entries",
    "infoFiltered":   "(filtered from _MAX_ total entries)",
    "infoPostFix":    "",
    "thousands":      ",",
    "lengthMenu":     "Show _MENU_ entries",
    "loadingRecords": "Loading...",
    "processing":     "Processing...",
    "search":         "Search:",
    "zeroRecords":    "No matching records found",
    "paginate": {
        "first":      "First",
        "last":       "Last",
        "next":       "Next",
        "previous":   "Previous"
    },
    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }
}

สมมิตเราปรับเป็นภาษาไทย และนำไปใช้งาน จะได้เป็นดังนี้ (ดูตัวอย่างด้านท้ายบทความ)

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "language": {	
			"decimal":        "",
			"emptyTable":     "ไม่มีรายการข้อมูล",
			"info":           "แสดงรายการที่ _START_ ถึง _END_ จาก _TOTAL_ รายการ",
			"infoEmpty":      "ไม่มีรายการข้อมูล",
			"infoFiltered":   "(กรองจากทั้งหมด _MAX_ รายการ)",
			"infoPostFix":    "",
			"thousands":      ",",
			"lengthMenu":     "แสดง  _MENU_ รายการ",
			"loadingRecords": "กำลังโหลดข้อมูล...",
			"processing":     "กำลังประมวลผล...",
			"search":         "ค้นหา:",
			"zeroRecords":    "ไม่พบรายการที่ค้นหา",
			"paginate": {
				"first":      "หน้าแรก",
				"last":       "หน้าสุดท้าย",
				"next":       "ถัดไป",
				"previous":   "ก่อนหน้า"
			},
			"aria": {
				"sortAscending":  ": เรียงข้อมูลจากน้อยไปมาก",
				"sortDescending": ": เรียงข้อมูลจากมากไปน้อย"
			}				
        }		
	});
});
</script>

สำหรับการกำหนด aria นั้น เป็นการกำหนดสำหรับใช้งานเพื่อรองรับผู้ใช้งานที่มีความบกพร่องทางด้านการมองเห็น โดยจะ

ใช้ร่วมโปรแกรมอ่านออกเสียง เราสามารถคงเป็นภาษาอังกฤษที่เป็นภาษาสากลไว้ก็ได้

    "aria": {
        "sortAscending":  ": activate to sort column ascending",
        "sortDescending": ": activate to sort column descending"
    }

ส่วนของ info เราสามารถกำหนดเป้นดังนี้แทนได้

"info": "Showing page _PAGE_ of _PAGES_",

หรือ

"info": "แสดงหน้าที่ _PAGE_ จาก _PAGES_ หน้า",

ค่าตัวแปรที่ปรากฏในข้อความ คือค่าที่ดึงมาจาก DataTable เช่น

_PAGE_ 		หน้าปัจจบัน
_PAGES_  	หน้าทั้งหมด
_START_ 	ลำดับรายการข้อมูลแรกของแต่ละหน้า
_END_  		ลำดับรายการสุดท้ายของแต่ละหน้า
_TOTAL_  	จำนวนรายการทั้งหมดหรือจำนวนทั้งหมดที่ค้นเจอ
_MAX_		จำนวนรายการทั้งหมดที่มี
_MENU_		ส่วนของการแสดงตัวเลือกจำนวนที่แสดงข้อมูล

ค่าต่างๆ เบื้องต้นเหล่านี้ เราสามารถสลับตำแหน่ง และเลือการจัดลำดับข้อความก่อนหลังได้ตามต้องการ

เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 31-08-2017

การปิดหรือเปิดใช้งานฟิเจอร์ต่างๆ

เราสามารถกำหนดที่แสดงหรือไม่แสดงคุณลักษณะเฉพาะของ DataTable โดยกำหนดค่าต่างๆ ในลักษณะดังนี้

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
		"paging":   false,  // ไม่แสดงการแบ่งหน้า
		"ordering": false, // ไม่ให้ทำการเรียงข้อมูลเมื่อคลิกที่คอลัมน์รายการได้
		"info":     false  // ไม่แสดงรายละเอียดรายการจำนวนข้อมูล
    });
});
</script>

การแสดงข้อมูลแบบรองรับการเลื่อน scroll ข้อมูลในตารางข้อมูล

กรณีรองรับการปรับความสูงอัตโนมัติ เราสามารถกำหนดให้ข้อมูลเลื่อนในแนวตั้งได้

โดยการกำหนด scrollY option

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "scrollY":        '50vh',  // ให้ขนาดความสูงมีขนาดเท่ากับ 50% ของ พื้นที่แสดงหน้าบราเซอร์
        "scrollCollapse": true, // ให้ยืดหดการแสดงตามปริมาณรายการข้อมูลที่แสดง
        "paging":         false
    });
});
</script>

กรณีเราต้องการกำหนดแบบฟิกค่าความสูง สามารถกำหนดได้ดังนี้

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "scrollY":        "200px",
        "scrollCollapse": true,
        "paging":         false
    });
});
</script>

กรณีแสดงข้อมูลแบบมี scroll เลื่อนข้อมูลในแนวนอน โดยถ้ามีจำนวนคอลัมน์ที่ต้องการแสดงมากกว่า

พื้นที่แสดงปกติ วิธีนี้จะเหมาะกับการใช้งานร่วมกับข้อมูลที่มีการแบ่งหน้า

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "scrollX": true
    });
});
</script>

กรณีต้องการแสดงข้อมูลแบบมี scroll ทั้งแนวตั้งและแนวนอน สามารถกำหนดได้ดังนี้

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
         "scrollY": 200, // กำหนดความสูแนวตั้งเท่ากับ 200px
        "scrollX": true   // กำหนดให้รองรับการเลื่อนดูข้อมูลแนวนอนกรณีมีคอลัมน์มากๆ
    });
});
</script>

การกำหนดให้สามารถคงสภาพของหน้าแสดงข้อมูลที่เปิดดูล่าสุดไว้

เราสามารถกำหนดให้ตารางข้อมูล สามารถคงสภาพของหน้าที่แสดงข้อมูลหรือการจัดเรียงข้อมูลล่าสุดที่เกิดขึ้น

ไว้ได้ โดยเมื่อเราโหลดหน้าเว็บเพจใหม่ ข้อมูลก็จะแสดงไปยังหน้าล่าสุด รวมถึงการจัดเรียงล่าสุดที่เคยเรียกใช้งาน

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "stateSave": true
    });
});
</script>

การปรับแต่งค่าอื่นๆ เพิ่มเติม สามารถดูได้ที่

https://datatables.net/reference/option/

https://datatables.net/examples/index

เพิ่มเติมเนื้อหา ครั้งที่ 3 วันที่ 17-09-2017

การกำหนดให้สามารถมีตัวเลือกจำนวนรายการตามที่ต้องการแสดง

เราสามารถกำหนดจำนวนของรายการ ที่ต้องการให้แสดง อย่างในค่าเริ่มต้น กำหนดไว้คือ แสดงทีละ 10, 25

50 และ 100 รายการ ตรงส่วนนี้เราสามารถระบุตัวเลือกใหม่ได้ หรืออาจมีตัวเลือกให้แสดงทั้งหมดก็ได้เช่นกัน

โดยกำหนดผ่าน property ที่ชื่อว่า lengthMenu

แบบแรกแบบ array 1 มิติ

        "lengthMenu": [ 10, 25, 50, 100 ],

และแบบที่ที่สอง array 2 มิติ

        "lengthMenu": [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ],

รูปแบบ property ของต้น ถ้าใช้แบบแรก จะเป็นการกำหนดเป็นค่าตัวเลข โดยจะใช้ค่านี้เป็นทั้งตัวเลือกแสดงจำนวน

และใช้ในการกำหนดเป็นค่าการแสดงจำนวน

รูปแบบที่สอง ใช้วิธีการกำหนดให้ array มิติแรก เป็นค่าตัวเลขระบุการแสดงข้อมูลแต่ละหน้า จะเห็นว่า เราสามารถกำหนด

ค่าเท่ากับ -1 สำหรับการแสดงข้อมูลทั้งหมด ส่วน array ตัวที่สอง จะเป็นข้อความที่เราต้องการให้ขึ้นแสดง หรือเป็น

ตัวเลือกสำหรับแสดงข้อมูล โดยจะต้องสัมพันธ์กับ array ตัวแรก ส่วนที่สองนี้มีประโยชน์ในกรณีที่เราต้องการแสดง

ข้อความเป็นภาษาที่เราต้องการใช้งานเช่นภาษาไทย เป็นต้น

ตัวอย่างการใช้งาน

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "lengthMenu": [ 10, 25, 50, 100 ] 
    });
});
</script>

หรือ

<script type="text/javascript">
$(function(){
    $("#table_id").DataTable({
        "lengthMenu": [
            [ 10, 25, 50, -1 ],
            [ '10 rows', '25 rows', '50 rows', 'Show all' ]
        ]
    });
});
</script>

การปรับแต่งค่าอื่นๆ เพิ่มเติม สามารถดูได้ที่

https://datatables.net/reference/option/

https://datatables.net/examples/index

DEMO 1
DEMO 2

กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ

อ่านต่อที่บทความ

24 Aug
2017

Data sources สำหรับ DataTable ในการใช้งานร่วมกับ Codeigniter ตอนที่ 2 อ่าน 8,915
ในตอนที่ผ่านมา เราได้รู้จักวิธีการใช้งานเบื้องต้นของ DataTable กันไปแล้ว ทบทว

เนื้อหาที่เกี่ยวข้อง

กำลังอ่านเนื้อหานี้อยู่

23 Aug
2017

แนวทางการใช้งาน DataTable ร่วมกับ Codeigniter ตอนที่ 1 อ่าน 11,992
เนื้อหาในตอนแรกนี้ จะเป็นการแนะนำเบื้องต้นเกี่ยวกับการใช้งาน DataTable ซึ่งเป
24 Aug
2017

Data sources สำหรับ DataTable ในการใช้งานร่วมกับ Codeigniter ตอนที่ 2 อ่าน 8,915
ในตอนที่ผ่านมา เราได้รู้จักวิธีการใช้งานเบื้องต้นของ DataTable กันไปแล้ว ทบทว
25 Aug
2017

ใช้งาน Server side processing สำหรับ DataTable ร่วมกับ Codeigniter ตอนที่ 3 อ่าน 11,991
สำหรับเนื้อหาต่อไปนี้ เป็นตอนต่อเนื่องเกี่ยวกับ DataTable plugin ที่ใช้งานร่ว
28 Aug
2017

แนวทางการ JOIN ตาราง สำหรับ DataTable ใช้งานกับ Codeigniter ตอนที่ 4 อ่าน 13,339
จากตอนที่แล้ว เราได้รู้จักวิธีดึงข้อมูลจากตารางในฐานข้อมูลมาใช้งานร่วมกับ Dat

URL สำหรับอ้างอิง

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก

ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
User

Pass

Code
เปลี่ยน

จำข้อมูลการล็อกอิน
เข้าระบบอัตโนมัติ

( หรือ เข้าใช้งานผ่าน Social Login )

ล็อกอินด้วย Line

ล็อกอินด้วย Google

ล็อกอินด้วย Twitter

ล็อกอินด้วย Tiktok

ขอบคุณทุกการสนับสนุน

สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet

20 บาท 50 บาท 100 บาท 300 บาท หรือ ระบุจำนวน