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

ถาม-ตอบ แนะนำไอเดียว โค้ดตัวอย่าง แนวทาง วิธีแก้ปัญหา dataTable สามารถเรียงตามลำดับวันที่แบบไทยได้มั้ยค่ะ

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

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

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

Saranya2532 30-09-2014 15:45:03

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

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

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

Pass

Code
เปลี่ยน

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

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

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

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

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

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

ความคิดเห็นที่ 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 30-09-2014

ความคิดเห็นที่ 2

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

สามารถทำได้ไม๊ค่ะ ต้องเพิ่มในส่วนนี้หรือเปล่าค่ะ

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

saranya2532 03-10-2014 15:02

ความคิดเห็นที่ 3

เพิ่มอีกชุดของ type และ target

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

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

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

ninenik 03-10-2014

ความคิดเห็นที่ 4

ถ้าให้เรียงจากวันที่ มากกว่า ขึ้นก่อน ต้องเปลี่ยนตรงไหนค่ะ

saranya2532 03-10-2014 16:02

ความคิดเห็นที่ 5

การเรียงข้อมูลเริ่มต้น ใช้ sql ไม่ใช่หรอ ก็เรียงตอนเรียกข้อมูลมาแสดงตอนแรก เรียงด้วย DESC
ในคำถาม ก็เห็นว่าทำได้ปกติ

ninenik 03-10-2014

ความคิดเห็นที่ 6

ลองเรียงด้วย DESC แล้วมันไม่ได้ค่ะ ก็เลยอยากถามว่ามันเกี่ยวกับตัว script หรือเปล่าค่ะ

saranya2532 03-10-2014 16:08

ความคิดเห็นที่ 7

ลองเอา script ออก แล้วเรียกดูว่าได้ไหม ถ้าได้ แสดงว่าเป็นกับ script
อันนี้ต้องทดสอบก่อน

ninenik 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 03-10-2014 16:11

ความคิดเห็นที่ 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 03-10-2014

ความคิดเห็นที่ 10

ได้แล้วค่ะ ขอบคุณมากๆๆๆ

saranya2532 04-10-2014 13:16

1 2 Next

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

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

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