#jQuery[1] ตั้งค่าภาษาไทยให้ Datatable

Sharing is caring!

Datatable

แนะนำการตั้งค่าเครื่องมือต่าง ๆ บน Jquery Datatable ให้เป็นภาษาไทย

Datatable เป็น Plugin ที่พัฒนาจาก Jquery เป็นความสามารถทั้งหมดที่การแสงดข้อมูลผ่านหน้าตารางควรมีแต่โดย Default ของ Datatable นี้จะเป็นภาษาอังกฤษ ซึ่งมันก็ดีแต่ถ้าอยากจะตั้งค่าให้เป็นภาษาไทยละจะทำอย่างไร

ตัวอย่างโค๊ด

<!DOCTYPE html>
<html>
   <head>
    <title>Datatable Thai Language</title>

<link rel="stylesheet" href="[local_path]/css/datatables/dataTables.bootstrap.min.css' ?>">
<link rel="stylesheet" href="[local_path]css/datatables/dataTables.css' ?>">
<link rel="stylesheet" href="[local_path]css/datatables/responsive.bootstrap.min.css' ?>">

<script type="text/javascript" src="[local_path]js/datatables/jquery.dataTables.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/dataTables.bootstrap.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/dataTables.responsive.min.js'?>"></script>
<script type="text/javascript" src="[local_path]js/datatables/responsive.bootstrap.min.js'?>"></script>

   </head>
<body>

  <table class="bordered table">
    <thead>
      <tr>
      <th>code_id</th>
      <th>name_th</th>
      <th>addr_th</th>
      <th>phone</th>
      <th>email</th>
      <th>contact</th>
      <th>join_date</th>
      <th>#</th>
      <th>#</th>
      </tr>
   </thead>
   <tbody>
<!-- ข้อมูล-->
   </tbody>
</table>

</body>
</html>

<script type="text/javascript">

// เพิ่มส่วนนี้เข้าไปจะถือว่าเป็นการตั้งค่าให้ Datatable เป็น Default ใหม่เลย

$.extend(true, $.fn.dataTable.defaults, {
    "language": {
              "sProcessing": "กำลังดำเนินการ...",
              "sLengthMenu": "แสดง_MENU_ แถว",
              "sZeroRecords": "ไม่พบข้อมูล",
              "sInfo": "แสดง _START_ ถึง _END_ จาก _TOTAL_ แถว",
              "sInfoEmpty": "แสดง 0 ถึง 0 จาก 0 แถว",
              "sInfoFiltered": "(กรองข้อมูล _MAX_ ทุกแถว)",
              "sInfoPostFix": "",
              "sSearch": "ค้นหา:",
              "sUrl": "",
              "oPaginate": {
                            "sFirst": "เิริ่มต้น",
                            "sPrevious": "ก่อนหน้า",
                            "sNext": "ถัดไป",
                            "sLast": "สุดท้าย"
              }
     }
});

// เรียกใช้งาน Datatable function

$('.table').DataTable();

</script>

Datatable_th

เพียงเท่านี่เราก็จะได้หน้าตา Datatable ที่เป็นภาษาไทยแล้ววครับ

Posts created 71

Related Posts

Begin typing your search term above and press enter to search. Press ESC to cancel.

Back To Top
shares