PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

dataTable สามารถเรียงตามลำดับวันที่แบบไทยได้มั้ยค่ะ

dataTable สามารถเรียงตามลำดับวันที่แบบไทยได้มั้ยค่ะ


ลอง SELECT * FROM quotation ORDER BY date DESC  แล้วก็จะเรียงให้ในครั้งแรก ตามที่กำหนดค่ะ 

แต่ถ้า กด ตรงหัวข้อ date ถ้าวันที่เป็นแบบสากล 2014-09-30 จะเรียงค่ะ
แต่พอเป็น format แบบวันที่ของไทย มันจะเรียง วันที่ก่อน โดยไม่เรียงเดือน ค่ะ
จึงอยากทราบว่ามีวิธีแก้ไขไม๊ค่ะ



โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 30-09-2014 เวลา: 15:45:03

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

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


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


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 12
ใช้ได้ปกติ

ID Name Date1 Date2
6 F 2014-08-06 00:30:00 6/8/2558
7 G 2014-08-07 00:30:00 7/8/2556
8 H 2014-08-07 15:20:00 7/11/2557
9 I 2014-08-09 00:30:00 9/8/2557
10 J 2014-08-10 00:30:00 1/8/2557
11 K 2014-08-11 00:30:00 11/8/2558
12 L 2014-08-12 00:30:00 12/8/2557



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datatable</title>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
</head>
<body>
  
<table id="mytable2" class="table table-condensed table-bordered" border="0" cellspacing="00" cellpadding="0" style="font-size:12px;">
<thead>
         <tr>
          <td align="center">ID</td>
          <td align="center">Name</td>
          <td align="center">Date1</td>
          <td align="center">Date2</td>
        </tr>
</thead>        
        <tbody>        
          <tr>
          <td align="center">6</td>
          <td align="center">F</td>
          <td align="center">2014-08-06 00:30:00</td>
          <td align="center">6/8/2558</td>
        </tr>
        <tr>
          <td align="center">7</td>
          <td align="center">G</td>
          <td align="center">2014-08-07 00:30:00</td>
          <td align="center">7/8/2556</td>
        </tr>
        <tr>
          <td align="center">8</td>
          <td align="center">H</td>
          <td align="center">2014-08-07 15:20:00</td>
          <td align="center">7/11/2557</td>
        </tr>
        <tr>
          <td align="center">9</td>
          <td align="center">I</td>
          <td align="center">2014-08-09 00:30:00</td>
          <td align="center">9/8/2557</td>
        </tr>
        <tr>
          <td align="center">10</td>
          <td align="center">J</td>
          <td align="center">2014-08-10 00:30:00</td>
          <td align="center">1/8/2557</td>
        </tr>
        <tr>
          <td align="center">11</td>
          <td align="center">K</td>
          <td align="center">2014-08-11 00:30:00</td>
          <td align="center">11/8/2558</td>
        </tr>
        <tr>
          <td align="center">12</td>
          <td align="center">L</td>
          <td align="center">2014-08-12 00:30:00</td>
          <td align="center">12/8/2557</td>
        </tr>
      </tbody>
         </table>
         
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
// ฟังก์ชั่น เติม 0 ด้านหน้า    อันนี้ไม่ได้ใช้ เก็บไว้เผื่อเป็นประโยชน์
function padDigits(number, digits) {
    return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}    
// สร้าง plugin สำหรับวันที่ภาษาไทยของเรา    ในที่นี้กำหนดใช้ชื่อ date-th ไว้อ้างอิง
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-th-pre": function ( a ) {
        var x; 
        if ( $.trim(a) !== '' ) {
             // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a);
            var d_date=dateData.split("/");
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0]);  
            // เราจะเก็บวันที่ที่ถูกแปลงเป็นตัวเลขด้วย myDate.getTime() ไว้ในตัวแปร x
            // ไว้สำหรับเทียบค่ามากกว่า น้อยกว่า
            x = (myDate.getTime()) * 1;
        
        }else{
            // ภ้าช่องนั้นมีค่าเป็นว่าง กำหนดเป็น x เป็น Infinity
            x = Infinity;
        }
        // คืนค่ารูปแบบวันที่ที่ถูกแปลงเป็นตัวเลข เพื่อนำไปจัดเรียง
        return x;
    },
    "date-th-asc": function ( a, b ) { // กรณีให้เรียงจากน้อยไปมาก
        return a - b;
    },
    "date-th-desc": function ( a, b ) { // กรณีให้เรียงจากมากไปน้อย
        return b - a;
    }
} );    
$(function () {  
    $('#mytable2').dataTable( {
        "columnDefs": [ {
            "type": "date-th", // ชื่อ ที่เรากำหนด ใน plugin
            "targets":-1   // คอลัมน์ที่เราจะใช้ นับ ซ้ายไปขวา ให้เริ่มจาก 0 นับจาก
            // คอลัมน์ขวามาซ้าย ให้เริ่มจาก -1 ดังนี้ ค่าในที่นี้คือ -1 ก็คือคลัมน์สุดท้าย
            // ที่รูปแบบวันที่เป็นภาษาไทย
        } ]
    } );
});      
</script>      
</body>
</html>


โดย:  Ninenik IP: 1.47.104.xxx วันที่: 18-07-2015
 ความคิดเห็นที่ 11
มีปัญหาค่ะ คือ เรียงปีกะวันที่ แต่เดือนไม่เรียงให้ค่ะ
<script type="text/javascript" language="javascript" class="init">
// ฟังก์ชั่น เติม 0 ด้านหน้า    อันนี้ไม่ได้ใช้ เก็บไว้เผื่อเป็นประโยชน์
function padDigits(number, digits) {
    return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}    
// สร้าง plugin สำหรับวันที่ภาษาไทยของเรา    ในที่นี้กำหนดใช้ชื่อ date-th ไว้อ้างอิง
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-th-pre": function ( a ) {
        var x; 
        if ( $.trim(a) !== '' ) {
             // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a);
            var d_date=dateData.split("/");
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0]);  
            // เราจะเก็บวันที่ที่ถูกแปลงเป็นตัวเลขด้วย myDate.getTime() ไว้ในตัวแปร x
            // ไว้สำหรับเทียบค่ามากกว่า น้อยกว่า
            x = (myDate.getTime()) * 1;
        
        }else{
            // ภ้าช่องนั้นมีค่าเป็นว่าง กำหนดเป็น x เป็น Infinity
            x = Infinity;
        }
        // คืนค่ารูปแบบวันที่ที่ถูกแปลงเป็นตัวเลข เพื่อนำไปจัดเรียง
        return x;
    },
    "date-th-asc": function ( a, b ) { // กรณีให้เรียงจากน้อยไปมาก
        return a - b;
    },
    "date-th-desc": function ( a, b ) { // กรณีให้เรียงจากมากไปน้อย
        return b - a;
    }
} );    
$(function () {  
    $('#mytable2').dataTable( {
        "columnDefs": [ {
            "type": "date-th", // ชื่อ ที่เรากำหนด ใน plugin
            "targets":-1   // คอลัมน์ที่เราจะใช้ นับ ซ้ายไปขวา ให้เริ่มจาก 0 นับจาก
            // คอลัมน์ขวามาซ้าย ให้เริ่มจาก -1 ดังนี้ ค่าในที่นี้คือ -1 ก็คือคลัมน์สุดท้าย
            // ที่รูปแบบวันที่เป็นภาษาไทย
        } ]
    } );
});  

	</script>

<table id="mytable2" class="table table-condensed table-bordered" border="0" cellspacing="00" cellpadding="0" style="font-size:12px;">
<thead>
         <tr>
          <td align="center">ID</td>
          <td align="center">Name</td>
          <td align="center">Date1</td>
          <td align="center">Date2</td>
        </tr>
</thead>        
        <tbody>        
          <tr>
          <td align="center">6</td>
          <td align="center">F</td>
          <td align="center">2014-08-06 00:30:00</td>
          <td align="center">6/8/2558</td>
        </tr>
        <tr>
          <td align="center">7</td>
          <td align="center">G</td>
          <td align="center">2014-08-07 00:30:00</td>
          <td align="center">7/8/2556</td>
        </tr>
        <tr>
          <td align="center">8</td>
          <td align="center">H</td>
          <td align="center">2014-08-07 15:20:00</td>
          <td align="center">7/11/2557</td>
        </tr>
        <tr>
          <td align="center">9</td>
          <td align="center">I</td>
          <td align="center">2014-08-09 00:30:00</td>
          <td align="center">9/8/2557</td>
        </tr>
        <tr>
          <td align="center">10</td>
          <td align="center">J</td>
          <td align="center">2014-08-10 00:30:00</td>
          <td align="center">1/8/2557</td>
        </tr>
        <tr>
          <td align="center">11</td>
          <td align="center">K</td>
          <td align="center">2014-08-11 00:30:00</td>
          <td align="center">11/8/2558</td>
        </tr>
        <tr>
          <td align="center">12</td>
          <td align="center">L</td>
          <td align="center">2014-08-12 00:30:00</td>
          <td align="center">12/8/2557</td>
        </tr>
      </tbody>
         </table>

















โดย:  Bsaranya IP: 223.204.255.xxx วันที่: 18-07-2015 เวลา: 09:49:41
 ความคิดเห็นที่ 10
  ได้แล้วค่ะ ขอบคุณมากๆๆๆ

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 04-10-2014 เวลา: 13:16:44
 ความคิดเห็นที่ 9
น่าจะยังไม่เข้าใจการใช้งาน pluin  ดี อธิบายในความเห็นที่ 1

รูปแบบที่ใช้คือ แปลงรูปแบบวันที่ ตามตัวอย่างด้านล่าง
ให้อยู่ในรูปแบบวันที่ ของ javascript
 
10/8/2557 (00:30น.)
 
แต่รูปแบบวันที่ อีกอัน
 
10/8/2557
 
ที่มีเค่าวันที่ ไม่มีเวลา ก็จะไม่สามารถใช้งาน plugin 
ตัวเดิมได้ เพราะการตัดคำ การแปลงเป็น รูปแบบวันที่ใน javascript ต้องกำหนดใหม่
 
นั่นก็คือ ถ้ารูปแบบเปลี่ยน เราก็ต้องไปสร้าง plugin เพิ่ม และเรียกใช้งาน ตรง type
คนละชื่อ
 
 
ลองเอา script นี้ไปลองประยุกต์ใช้ดู
 
// ฟังก์ชั่น เติม 0 ด้านหน้า    อันนี้ไม่ได้ใช้ เก็บไว้เผื่อเป็นประโยชน์
function padDigits(number, digits) {
    return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}    
// สร้าง plugin สำหรับวันที่ภาษาไทยของเรา    ในที่นี้กำหนดใช้ชื่อ date-th ไว้อ้างอิง
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-th-pre": function ( a ) {
        var x; 
        if ( $.trim(a) !== '' ) {
            // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a).split(" ");
            var d_date=dateData[0].split("/");
            var t_date=dateData[1];
            var h_time=t_date.substr(1,2);
            var s_time=t_date.substr(4,2);
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0],h_time,s_time,00,000);  
            // เราจะเก็บวันที่ที่ถูกแปลงเป็นตัวเลขด้วย myDate.getTime() ไว้ในตัวแปร x
            // ไว้สำหรับเทียบค่ามากกว่า น้อยกว่า
            x = (myDate.getTime()) * 1;
        
        }else{
            // ภ้าช่องนั้นมีค่าเป็นว่าง กำหนดเป็น x เป็น Infinity
            x = Infinity;
        }
        // คืนค่ารูปแบบวันที่ที่ถูกแปลงเป็นตัวเลข เพื่อนำไปจัดเรียง
        return x;
    },
    "date-th-asc": function ( a, b ) { // กรณีให้เรียงจากน้อยไปมาก
        return a - b;
    },
    "date-th-desc": function ( a, b ) { // กรณีให้เรียงจากมากไปน้อย
        return b - a;
    }
} );  
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-th2-pre": function ( a ) {
        var x; 
        if ( $.trim(a) !== '' ) {
            // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a);
            var d_date=dateData.split("/");
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0],0,0,00,000);  
            // เราจะเก็บวันที่ที่ถูกแปลงเป็นตัวเลขด้วย myDate.getTime() ไว้ในตัวแปร x
            // ไว้สำหรับเทียบค่ามากกว่า น้อยกว่า
            x = (myDate.getTime()) * 1;
        
        }else{
            // ภ้าช่องนั้นมีค่าเป็นว่าง กำหนดเป็น x เป็น Infinity
            x = Infinity;
        }
        // คืนค่ารูปแบบวันที่ที่ถูกแปลงเป็นตัวเลข เพื่อนำไปจัดเรียง
        return x;
    },
    "date-th2-asc": function ( a, b ) { // กรณีให้เรียงจากน้อยไปมาก
        return a - b;
    },
    "date-th2-desc": function ( a, b ) { // กรณีให้เรียงจากมากไปน้อย
        return b - a;
    }
} );    
$(function () {  
    $('#mytable2').dataTable( {
        "columnDefs":[
            {"type": "date-th",targets:-1},
            {"type": "date-th2",targets:-2}
        ]
    });
});  


ถ้าเราเปลี่ยนรูปแบบวันที่ เป็นแบบอื่น เราก็ต้องไปสร้าง plug in เพิ่ม และเปลี่ยนชื่อ และ ตรงการแปลงค่า ให้เป็นค่าที่ถูกต้อง
ตามรูปแบบที่เราใช้งาน

            // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a).split(" ");
            var d_date=dateData[0].split("/");
            var t_date=dateData[1];
            var h_time=t_date.substr(1,2);
            var s_time=t_date.substr(4,2);
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0],h_time,s_time,00,000);  


สำหรับ

10/8/2557 (00:30น.)

            // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a);
            var d_date=dateData.split("/");
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0],0,0,00,000);  


สำหรับ

10/8/2557 



 


โดย:  Ninenik IP: 124.120.81.xxx วันที่: 03-10-2014
 ความคิดเห็นที่ 8
<table id="mytable2" class="table table-condensed table-bordered" border="0" cellspacing="00" cellpadding="0" style="font-size:12px;">
<thead>
         <tr>
          <td align="center">ID</td>
          <td align="center">Name</td>
          <td align="center">Date</td>
		  <td align="center">Date2</td>
        </tr>
</thead>        
        <tbody>   
<? $sql = "SELECT * FROM quotation order by dateQT DESC"; // เลือก ตารางที่เราเก็บข้อมูล
	$query = mysql_query($sql) or die ("sql error [".$sql."]");
	while($row = mysql_fetch_array($query)){ ?>		
        <tr>
          <td align="center"><? echo $row['idQT'];?></td>
          <td align="center"><? echo $row['codeQT'];?></td>
          <td align="center"><? $dateQT=$row['dateQT'];
		list($Year, $month, $day) = explode("-", $dateQT);
		$dateQT = (int)$day."/".(int)$month."/".($Year+543);
		  echo $dateQT;?></td>
		  <td align="center"><? $dateEnd=$row['dateEnd'];
		list($Year, $month, $day) = explode("-", $dateEnd);
		$dateEnd = (int)$day."/".(int)$month."/".($Year+543);
		  echo $dateEnd;?></td>
        </tr>
       <? } ?>
      </tbody>
         </table>






โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 03-10-2014 เวลา: 16:11:14
 ความคิดเห็นที่ 7
ลองเอา script ออก แล้วเรียกดูว่าได้ไหม ถ้าได้ แสดงว่าเป็นกับ script
อันนี้ต้องทดสอบก่อน 

โดย:  Ninenik IP: 124.120.81.xxx วันที่: 03-10-2014
 ความคิดเห็นที่ 6
ลองเรียงด้วย DESC แล้วมันไม่ได้ค่ะ  ก็เลยอยากถามว่ามันเกี่ยวกับตัว script หรือเปล่าค่ะ

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 03-10-2014 เวลา: 16:08:28
 ความคิดเห็นที่ 5
การเรียงข้อมูลเริ่มต้น ใช้ sql ไม่ใช่หรอ ก็เรียงตอนเรียกข้อมูลมาแสดงตอนแรก  เรียงด้วย DESC 
ในคำถาม ก็เห็นว่าทำได้ปกติ 



โดย:  Ninenik IP: 124.120.81.xxx วันที่: 03-10-2014
 ความคิดเห็นที่ 4
ถ้าให้เรียงจากวันที่ มากกว่า ขึ้นก่อน ต้องเปลี่ยนตรงไหนค่ะ

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 03-10-2014 เวลา: 16:02:16
 ความคิดเห็นที่ 3
เพิ่มอีกชุดของ type และ target

$(function () {  
    $('#mytable2').dataTable( {
        "columnDefs":[
            {"type": "date-th",targets:-1},
            {"type": "date-th",targets:-2}
        ]
    });
});  

เพิ่มในส่วนนี้ตามจำนวนที่เราต้องการใช้งานถ้ามีมากกว่า 2 

            {"type": "date-th",targets:-2}


โดย:  Ninenik IP: 124.120.81.xxx วันที่: 03-10-2014
 ความคิดเห็นที่ 2

ขอบคุณค่ะ   แล้วถ้าในตารางมีวันที่ที่เป็นภาษาไทย 2 column ล่ะค่ะ
  
สามารถทำได้ไม๊ค่ะ    ต้องเพิ่มในส่วนนี้หรือเปล่าค่ะ

  1. $(function () {    
  2.     $('#mytable2').dataTable( {  
  3.         "columnDefs": [ {  
  4.             "type""date-th"// ชื่อ ที่เรากำหนด ใน plugin  
  5.             "targets": -1   // คอลัมน์ที่เราจะใช้ นับ ซ้ายไปขวา ให้เริ่มจาก 0 นับจาก  
  6.             // คอลัมน์ขวามาซ้าย ให้เริ่มจาก -1 ดังนี้ ค่าในที่นี้คือ -1 ก็คือคลัมน์สุดท้าย  
  7.             // ที่รูปแบบวันที่เป็นภาษาไทย  
  8.         } ]  
  9.     } );  
  10. });    
  

โดย:  Saranya2532 IP: 223.204.255.xxx วันที่: 03-10-2014 เวลา: 15:02:48
 ความคิดเห็นที่ 1
ต้องใช้ plugin ดูหน้านี้เป็นแนวทาง
 
http://datatables.net/plug-ins/sorting/
 
แต่ไม่มีสำหรับภาษาไทย ถ้าจะใช้จริงๆ ต้องประยุกต์เอาเอง
หลักการ คือแปลงข้อความวันที่ของเราให้อยู่ในรูป timestamp 
เพื่อจะได้ค่าเป็นตัวเลข มาเปรียบเทียบมากกว่าน้อยกว่า
 
รูปแบบการแปลง ก็ขึ้นกับรูปแบบข้อความวันที่ ภาษาไทย
อย่างวันที่ที่ถามมา 
 
รูปแบบเป็น 
 
6/8/2557 (00:30น.)
 
เราต้องแยกข้อมูล เพื่อเอา วันที่ เดือน ปี และเวลาออกมา 
วันที่ ใช้ 1-31 ได้เลย ใช้เลขไม่มี 0 นำหน้า ถ้ามี 0 นำหน้าใช้ parseInt() แปลงได้
เดือน 0-11 โดย 0 คือ มกราคม หรือเลข 1 ในรูปแบบวันที่ ดังนั้นถ้าได้เดือนอะไร ให้เอา -1
ปี ใช้เป็น ค.ศ. แต่ถ้าให้มาเป็นปีไทย ก็ต้องลบ ด้วย 543
 
ส่วนเวลา ก็ใช้เป็นตัวเลข 
ชั่วโมงก็ 1-23
นาที 1-59
วินาที 1-59 ไม่มี 0 นำหน้า แต่ถ้าไม่สนใจค่านี้ ให้ใส่ 0 แทนไปได้เลย
 
การสร้าง date ใน javascript รูปแบบก็คือ ยึดจากตัวอย่างด้านบน
 
// var myDate=new Date(ปี,เดือน,วันที่,ชม,นาที,วินาที,มิลลิวินาที);  
var myDate=new Date(2014,7,6,0,30,0,000);  
 
ตัวอย่างการใช้งาน คลิกจัดเรียงข้อมูลวันที่ คอลัมน์สุดท้าย
 
ID Name Date1 Date2
1 A 2014-08-01 00:30:00 1/8/2557 (00:30น.)
2 B 2014-08-02 00:30:00 2/8/2557 (00:30น.)
3 C 2014-08-03 00:30:00 3/8/2557 (00:30น.)
4 D 2014-08-04 00:30:00 4/8/2557 (00:30น.)
5 E 2014-08-05 00:30:00 5/8/2557 (00:30น.)
6 F 2014-08-06 00:30:00 6/8/2557 (00:30น.)
7 G 2014-08-07 00:30:00 7/8/2557 (00:30น.)
8 H 2014-08-07 15:20:00 7/8/2557 (15:20น.)
9 I 2014-08-09 00:30:00 9/8/2557 (00:30น.)
10 J 2014-08-10 00:30:00 10/8/2557 (00:30น.)
11 K 2014-08-11 00:30:00 11/8/2557 (00:30น.)
12 L 2014-08-12 00:30:00 12/8/2557 (00:30น.)
13 M 2014-08-13 00:30:00 13/8/2557 (00:30น.)
14 N 2014-08-14 00:30:00 14/8/2557 (00:30น.)
15 O 2014-08-15 00:30:00 15/8/2557 (00:30น.)
 
โค้ดและคำอธิบายแสดงในโค้ด
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Datatable</title>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css">
</head>
<body>
  
<table id="mytable2" class="table table-condensed table-bordered" border="0" cellspacing="00" cellpadding="0" style="font-size:12px;">
<thead>
         <tr>
          <td align="center">ID</td>
          <td align="center">Name</td>
          <td align="center">Date1</td>
          <td align="center">Date2</td>
        </tr>
</thead>        
        <tbody>        
        <tr>
          <td align="center">1</td>
          <td align="center">A</td>
          <td align="center">2014-08-01 00:30:00</td>
          <td align="center">1/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">2</td>
          <td align="center">B</td>
          <td align="center">2014-08-02 00:30:00</td>
          <td align="center">2/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">3</td>
          <td align="center">C</td>
          <td align="center">2014-08-03 00:30:00</td>
          <td align="center">3/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">4</td>
          <td align="center">D</td>
          <td align="center">2014-08-04 00:30:00</td>
          <td align="center">4/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">5</td>
          <td align="center">E</td>
          <td align="center">2014-08-05 00:30:00</td>
          <td align="center">5/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">6</td>
          <td align="center">F</td>
          <td align="center">2014-08-06 00:30:00</td>
          <td align="center">6/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">7</td>
          <td align="center">G</td>
          <td align="center">2014-08-07 00:30:00</td>
          <td align="center">7/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">8</td>
          <td align="center">H</td>
          <td align="center">2014-08-07 15:20:00</td>
          <td align="center">7/8/2557 (15:20น.)</td>
        </tr>
        <tr>
          <td align="center">9</td>
          <td align="center">I</td>
          <td align="center">2014-08-09 00:30:00</td>
          <td align="center">9/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">10</td>
          <td align="center">J</td>
          <td align="center">2014-08-10 00:30:00</td>
          <td align="center">10/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">11</td>
          <td align="center">K</td>
          <td align="center">2014-08-11 00:30:00</td>
          <td align="center">11/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">12</td>
          <td align="center">L</td>
          <td align="center">2014-08-12 00:30:00</td>
          <td align="center">12/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">13</td>
          <td align="center">M</td>
          <td align="center">2014-08-13 00:30:00</td>
          <td align="center">13/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">14</td>
          <td align="center">N</td>
          <td align="center">2014-08-14 00:30:00</td>
          <td align="center">14/8/2557 (00:30น.)</td>
        </tr>
        <tr>
          <td align="center">15</td>
          <td align="center">O</td>
          <td align="center">2014-08-15 00:30:00</td>
          <td align="center">15/8/2557 (00:30น.)</td>
        </tr>
      </tbody>
         </table>
         
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>    
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="script.js"></script>      
</body>
</html>


ไฟล์ sscript.js แยกมาจะได้ดูง่ายขึ้น

// ฟังก์ชั่น เติม 0 ด้านหน้า    อันนี้ไม่ได้ใช้ เก็บไว้เผื่อเป็นประโยชน์
function padDigits(number, digits) {
    return Array(Math.max(digits - String(number).length + 1, 0)).join(0) + number;
}    
// สร้าง plugin สำหรับวันที่ภาษาไทยของเรา    ในที่นี้กำหนดใช้ชื่อ date-th ไว้อ้างอิง
jQuery.extend( jQuery.fn.dataTableExt.oSort, {
    "date-th-pre": function ( a ) {
        var x; 
        if ( $.trim(a) !== '' ) {
            // a คือข้อความวันที่ใน column ของแต่ละแถว
            // ส่วนนี้จะเป็นส่วนแยก เอาค่าต่างๆ ไปใช้สร้างวันที่
            var dateData=$.trim(a).split(" ");
            var d_date=dateData[0].split("/");
            var t_date=dateData[1];
            var h_time=t_date.substr(1,2);
            var s_time=t_date.substr(4,2);
            var yearVal=d_date[2]-543;
            // จบการแยกค่าต่างๆ ออกจากข้อความ
            var myDate=new Date(yearVal,d_date[1]-1,d_date[0],h_time,s_time,00,000);  
            // เราจะเก็บวันที่ที่ถูกแปลงเป็นตัวเลขด้วย myDate.getTime() ไว้ในตัวแปร x
            // ไว้สำหรับเทียบค่ามากกว่า น้อยกว่า
            x = (myDate.getTime()) * 1;
        
        }else{
            // ภ้าช่องนั้นมีค่าเป็นว่าง กำหนดเป็น x เป็น Infinity
            x = Infinity;
        }
        // คืนค่ารูปแบบวันที่ที่ถูกแปลงเป็นตัวเลข เพื่อนำไปจัดเรียง
        return x;
    },
    "date-th-asc": function ( a, b ) { // กรณีให้เรียงจากน้อยไปมาก
        return a - b;
    },
    "date-th-desc": function ( a, b ) { // กรณีให้เรียงจากมากไปน้อย
        return b - a;
    }
} );    
$(function () {  
    $('#mytable2').dataTable( {
        "columnDefs": [ {
            "type": "date-th", // ชื่อ ที่เรากำหนด ใน plugin
            "targets": -1   // คอลัมน์ที่เราจะใช้ นับ ซ้ายไปขวา ให้เริ่มจาก 0 นับจาก
            // คอลัมน์ขวามาซ้าย ให้เริ่มจาก -1 ดังนี้ ค่าในที่นี้คือ -1 ก็คือคลัมน์สุดท้าย
            // ที่รูปแบบวันที่เป็นภาษาไทย
        } ]
    } );
});  





โดย:  Ninenik IP: 1.47.83.xxx วันที่: 30-09-2014