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

เขียนเมื่อ 7 ปีก่อน โดย Ninenik Narkdee
codeigniter 3 codeigniter datatable

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

ดูแล้ว 12,582 ครั้ง


เนื้อหาในตอนแรกนี้ จะเป็นการแนะนำเบื้องต้นเกี่ยวกับการใช้งาน DataTable ซึ่งเป็น plugin ตารางข้อมูลสำหรับ
ใช้กับ jQuery หลายคนอาจจะเคยเห็นผ่านตา หรือมีการประยุกต์ใช้งานกันไปบ้างแล้ว สำหรับการแนะนำในเบื้องต้นนี้
วิธีใช้งานก็เป็นการเรียกใช้งานอย่างง่าย เราจะใช้งานกับข้อมูลที่มีจำนวนไม่มากนัก เป็นจำนวนข้อมูลในหลักร้อย
เพราะ หากเป็นข้อมูลจำนวนมากๆ จะไม่เหมาะสำหรับรุปแบบเบี้องต้นนี้
    ตัวอย่างของเรา จะเป็นรูปแบบที่สามารถใช้ได้ทั่วไป ไม่จำเป็นว่าต้องเป็นใน Codeigniter เท่านั้น หลักการทำงานคร่าวๆ 
ก็คือโหลด jQuery js , DataTable css และ js ไฟล์ ต่อด้วยแสดงรายการข้อมูลในตารางปกติ โดยจัดรูปแบบให้รองรับการใช้งาน
ร่วมกับ DataTable ส่วนสุดท้ายก็เรียกใช้งาน DataTable script เท่านี้เราก็สามารถแสดงข้อมูลในตารางปกติ ให้อยู่ในรูปแบบ
ของ DataTable แล้ว
    ข้อดีของข้อมูลที่นำมาแสดงในรูปบบ DataTable ก็คือ รายการข้อมูลจะแสดงออกมาสวยงาม ไม่ต้องจัดรูปแบบอะไรมากมาย
มีการแบ่งหน้าข้อมูลให้อัตโนมัติ เลือกที่จะแสดงข้อมูลได้ว่าจะแสดงหน้าละกี่รายการ สามารถเลือกไปหน้าข้อมูลที่ต้องการได้
ค้นหาข้อมูลในตารางได้ รองรับภาษาไทย รองรับการเลือกที่เรียงข้อมูลตามที่ต้องการได้ เหล่านี้เป็นความสามารถเบี้องต้นเท่านั้น
 
ในตัวอย่างที่จะแสดงให้ดูต่อไปนี้ จะใช้ข้อมูลจากตาราง tbl_provinces จากบทความนี้มาประกอบ
เพิ่มความสามารถ RESTful Services ใน CodeIgniter อย่างง่าย 
 
ตารางข้อมูล 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>
 
 
การปรับแต่งค่าอื่นๆ เพิ่มเติม สามารถดูได้ที่ 


   เพิ่มเติมเนื้อหา ครั้งที่ 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>
การปรับแต่งค่าอื่นๆ เพิ่มเติม สามารถดูได้ที่ 





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



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









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









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





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

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


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







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ