Datatable:Language…ปรับแต่งภาษาไทยให้กับ datatable

By -

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

<script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
                            $('#example').dataTable();
			} );
 </script>

แล้วการแสดงผลก็จะเป็นแบบนี้
datatable language ปรับแต่ง datatable
ลองสังเกตุดูว่า คนใช้ที่ภาษาปะกิต ไม่เก่ง (ผมก็ไม่เอาอ่าวเหมือนกัน) คงจะไม่ค่อยพอใจเป็นแน่ Showing 1 to 6 of 6 entries มันคืออะไร entries เนี้ย เอาเป็นว่าเราจะมาเปลี่ยนคำพวกนี้ให้เป็นภาษาไทยกัน …..

ก็เพิ่มเติมโค้ดซักหน่อย

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
					"oLanguage": {
					"sLengthMenu": "แสดง _MENU_ เร็คคอร์ด ต่อหน้า",
					"sZeroRecords": "ไม่เจอข้อมูลที่ค้นหา",
					"sInfo": "แสดง _START_ ถึง _END_ ของ _TOTAL_ เร็คคอร์ด",
					"sInfoEmpty": "แสดง 0 ถึง 0 ของ 0 เร็คคอร์ด",
					"sInfoFiltered": "(จากเร็คคอร์ดทั้งหมด _MAX_ เร็คคอร์ด)",
					"sSearch": "ค้นหา :"
      		}
} );
} );
</script>

มาดูความเปลี่ยนแปลง…
datatable หลังการปรับปแต่ง ภาษาไทย

DEMO
โค้ดทั้งหมด

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorialdev Datatable Language</title>
			<style type="text/css" title="currentStyle">
			@import "media/css/demo_page.css";
			@import "media/css/demo_table.css";
		</style>
		<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
		<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
			$(document).ready(function() {
				$('#example').dataTable( {
					"oLanguage": {
					"sLengthMenu": "แสดง _MENU_ เร็คคอร์ด ต่อหน้า",
					"sZeroRecords": "ไม่เจอข้อมูลที่ค้นหา",
					"sInfo": "แสดง _START_ ถึง _END_ ของ _TOTAL_ เร็คคอร์ด",
					"sInfoEmpty": "แสดง 0 ถึง 0 ของ 0 เร็คคอร์ด",
					"sInfoFiltered": "(จากเร็คคอร์ดทั้งหมด _MAX_ เร็คคอร์ด)",
					"sSearch": "ค้นหา :"
      							  }
				} );
			} );
		</script>
</head>

<body>

<div id="demo" style="width:800px;" align="left">
<h1>เปลี่ยนภาษาไทยให้กับ datatable </h1>		
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
	<thead>
		<tr>
			<th width="24%">Rendering engine</th>
			<th width="51%">Browser</th>
			<th width="25%">Platform(s)</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Rendering engine</th>
			<th>Browser</th>
			<th>Platform(s)</th>
		</tr>
	</tfoot>
	<tbody>
		<tr class="odd gradeX">
			<td>Trident</td>
			<td>Internet
				 Explorer 4.0</td>
			<td>Win 95+</td>
		</tr>
		<tr class="odd gradeC">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.0</td>
			<td>Win 95+</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 5.5</td>
			<td>Win 95+</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>Internet
				 Explorer 6</td>
			<td>Win 98+</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>Internet Explorer 7</td>
			<td>Win XP SP2+</td>
		</tr>
		<tr class="odd gradeA">
			<td>Trident</td>
			<td>AOL browser (AOL desktop)</td>
			<td>Win XP</td>
		</tr>
        
	<tbody>
</table>
				


					
			</div>
</body>
</html>

mitsumasa