การใช้งาน datatable ผ่าน ajax

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

abdkode
PHP Super Member
PHP Super Member
โพสต์: 361
ลงทะเบียนเมื่อ: 07/01/2019 9:56 am

การใช้งาน datatable ผ่าน ajax

โพสต์ที่ยังไม่ได้อ่าน โดย abdkode »

DataTables มีความสามารถในการอ่านข้อมูลจากแหล่งข้อมูลที่เป็น JSON ผ่าน Ajax ได้ ซึ่งสิ่งนี้สามารถทำได้ในรูปแบบที่ง่ายที่สุดคือการตั้งค่าตัวเลือกของ ajax ให้เป็นที่อยู่ของแหล่งข้อมูล JSON

โค้ด: เลือกทั้งหมด

<!DOCTYPEhtml>
<html>
<head>
   <metacharset="utf-8"/>
   <metahttp-equiv="X-UA-Compatible"content="IE=edge">
   <title>Test Sweetalert</title>
   <metaname="viewport"content="width=device-width, initial-scale=1">
   <link rel="stylesheet"type="text/css"href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
   <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
   <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
   <table id="mytable" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>
</body>
</html>
ในส่วนของ javascript สามารถใช้โคดดังนี้

โค้ด: เลือกทั้งหมด

$(document).ready(function() {
    $('#mytable').DataTable( {
    	//ใส่ที่อยู่ของขอมูล json
        "ajax": '../ajax/data/data.txt'
    } );
} );
ตัวอย่างข้อมูล json

โค้ด: เลือกทั้งหมด

{
  "data": [
    [
      "Tiger Nixon",
      "System Architect",
      "Edinburgh",
      "5421",
      "2011/04/25",
      "$320,800"
    ],
    [
      "Garrett Winters",
      "Accountant",
      "Tokyo",
      "8422",
      "2011/07/25",
      "$170,750"
    ],
    [
      "Ashton Cox",
      "Junior Technical Author",
      "San Francisco",
      "1562",
      "2009/01/12",
      "$86,000"
    ],
    [
      "Cedric Kelly",
      "Senior Javascript Developer",
      "Edinburgh",
      "6224",
      "2012/03/29",
      "$433,060"
    ],
    [
      "Airi Satou",
      "Accountant",
      "Tokyo",
      "5407",
      "2008/11/28",
      "$162,700"
    ],
    [
      "Brielle Williamson",
      "Integration Specialist",
      "New York",
      "4804",
      "2012/12/02",
      "$372,000"
    ],
    [
      "Herrod Chandler",
      "Sales Assistant",
      "San Francisco",
      "9608",
      "2012/08/06",
      "$137,500"
    ]
  ]
}
ผลลัพธ์
รูปภาพ
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 60