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

ความคิดเห็นที่ 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 18-07-2015 09:49

ความคิดเห็นที่ 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 18-07-2015

Prev 1 2

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

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

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