สร้าง DataTables มอบควรจะใช้ขึ้นอีกด้วย Ajax ด้วยกัน Server-side processing

Developer Team BorntoDev Co., Ltdมันสมอง Love1 Share Tweet ก่อนหน้าอิฉันคว้าแนะนำตัวการใช้งาน DataTables สั่งการกับดักข้อมูลในที่กำหนดการห้ามเจียรแล้ว แม้ว่า DataTables อีกทั้งประกอบด้วยความเก่งกาจยิ่งกว่านั้น เค้าไม่ได้ก่อลงมาแค่สั่งการกับดัก Table สถานที่ประกอบด้วยอยู่จากนั้นในที่หน้าเว็บอย่างคนเดียว แต่อีกต่างหากสมรรถนำยกมาข่าวเจียรก่อสร้างกำหนดการมอบอิฉันได้เกิน โดยตอนนี้จะพาจากไปรู้จักมักคุ้นกับชนิดข้อมูลแห่งหนประยุกต์ใช้ได้ กับก็การสร้าง Server-side processing(ข้อเขียนที่แล้ว: ก่อ Table ปันออกน่าใช้คืนด้วย DataTables)แนวทางข้อมูลแห่งหนใช้กับ DataTable ได้มา (Array / JSON)อย่างสถานที่บ่งบอกจากไปชั้นบนจึ่งรวมความว่า DataTables เนี่ยเค้าสมรรถยกมาข่าวแห่งหนเราประกอบด้วยสิงสู่ที่รูปแบบสรรพสิ่ง Array หรือไม่ก็ JSON ลงมาก่อสร้างเป็นตารางแห่งประกอบด้วยเครื่องอุปกรณ์กระยาเลยสิ่งของ DataTables สิงสู่พร้อมสรรพ ซึ่งจริงจากนั้นอีกต่างหากมีอีกประการนึงแห่งหนรองรับก็ลงความว่า Instances หรือก็ลงความว่า Object สถานที่ก่อสร้างขนมจาก class นั้นแหละ ถ้าหากใครจักใช้ก็เสี่ยงเพิ่มเติมจากแห่ง Manual ของ Datatables คว้า (https://datatablesมันสมองnet/manual/data/)รหัสส่วนของ Table ตอนนี้ประกอบด้วยวางเท่านี้พอ

Arrayประกาศแนวทางตารางเวลาแห่งหนมีข่าวเดขึ้นก็คือมี Row เพิ่มขึ้น ดังนั้นงานแห่งใช้คืนประกาศลงมาก่อสร้างเป็นตารางได้มาข่าวจำเป็นต้องอยู่ที่ครรลองสิ่งของ Array แห่งแจ้ง้ข้างในจักดำรงฐานะ Array หรือไม่ก็ JSON ตกลง ลงมาเสี่ยงแม่แบบงานใช้ประกาศขนมจาก Array กักคุมก่อนแม่แบบข่าวเหยาะวางแห่งตัวแปรจะได้แลดูคล่องๆ จักเห็นแหวประกาศแต่ละ Row จะสิงสู่ที่ Array ซึ่งทุก Row ก็ต้องถูกห่อรวมเก็บแห่ง Array อีกทีนึงvar dataArray = [ [ “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”, ], ];เอามาเหยาะแห่งฟังก์ชัน DataTables คว้าพ้น เพราะเหยาะครอบครอง แห่งหนข้างในจำเป็นต้องเหยาะคุณประโยชน์ 2 ชนิดก็คือdata : ก็แบ่งออกเหยาะเป็ข่าวสรรพสิ่งอิฉันในที่นี้ก็รวมความว่าตัวแปรชื่อเสียงเรียงนาม dataArraycolumns : ระบุว่าจักมอบแต่ละ Column จัดแสดงข่าวขนมจากหลั่นแห่งหนเท่าใดในที่ Array แต่ละเนื้อตัว จักสลับสถานะกักคุมหรือไม่ก็จัดแสดงประกาศย้ำแห่งมาก Column ก็ทำได้$(“#myTable”).dataTable( data: dataArray, columns: [ data: 0 , data: 1 , data: 2 , data: 3 , data: 3 , data: 5 , ], );ผลลัพธ์สถานที่คว้าJSONคล้ายกันกับยุคแห่งหนใช้ Array เพียงแต่ข้อมูลแต่ละ Row สรรพสิ่งดิฉันสิงสู่ในที่ครรลองของ JSON หรือไม่ก็จริงๆจักดำรงฐานะ JavaScript Object ก็ใช้ได้เหมือนกัน เพราะทั้งเพก็จำเป็นต้องไม่ผิดผูกรวมสิงสู่ในที่ Array อีกทีประกาศ JSONvar dataArray = [ id: “8”, name: “Rhona Davidson”, position: “Integration Specialist”, salary: “$327,900”, start_date: “2010/10/14”, office: “Tokyo”, extn: “6200”, , id: “9”, name: “Colleen Hurst”, position: “Javascript Developer”, salary: “$205,500”, start_date: “2009/09/15”, office: “San Francisco”, extn: “2360”, , id: “สิบ”, name: “Sonya Frost”, position: “Software Engineer”, salary: “$103,600”, start_date: “2008/12/13”, office: “Edinburgh”, extn: “1667”, , ];ตอนนำลงมาเหยาะที่ DataTables ก็ผลัดกันเท่าจากระบุเป็น index ดำรงฐานะเจาะจงอีกด้วย key ของ JSON แทนที่ ในที่รหัสตรงนี้จักเหลือบเห็นดุไม่ต้องแสดงประกาศทุก Column ที่ตารางตกลง ในที่นี้ก็คือ id แห่งหนอิฉันไม่ได้มอบ DataTables ยกมาจากไปจัดแสดง$(“#myTable”)มันสมองdataTable( data: dataArray, columns: [ data: “name” , data: “position” , data: “office” , data: “extn” , data: “start_date” , data: “salary” , ], );ผลดึงดูดประกาศอีกด้วย Ajaxบางทีประกาศแห่งเราปรารถนาก็ไม่ได้อยู่ที่โค้ดสถานที่อิฉันเขียนตั้งแต่พืชพันธุ์ DataTable ก็อำนวยความสะดวกปันออกอิฉันด้วยการดูดดึงข้อมูลพร้อมด้วย Ajax มามอบดิฉันได้ แบบอย่างนี้จักลองใช้ประกาศจาก api สรรพสิ่งเว็บนี้ http://dummy.restapiexample.com/api/v1/employees ลงมาลองเชิงกันแลดูหน้าตาข่าวขนมจาก api (ชดใช้ extension https://chromeมันสมองgoogle.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh?hl=th เลยออกมาหน้าตาแบบนี้)นำสลักในที่ฟังก์ชัน DataTables สิ่งของอิฉันเลยก็จะได้มาออกมาดังนี้ ตรงนี้ผิข้อมูล JSON แห่งคว้าข้อมูลที่จะชดใช้ไม่ใช้คืนสิงสู่ที่ key ชื่อเสียงเรียงนาม data ก็ต้องเพิ่มขึ้นคำบัญชา dataSrc เข้าอีกด้วย ทดลองคลึงไปดูเพิ่มเติมได้ https://datatablesมันสมองnet/reference/option/ajax.dataSrc$(“#myTable”).dataTable( ajax: “http://dummyมันสมองrestapiexampleมันสมองcom/api/v1/employees”, columns: [ data: “id” , data: “employee_name” , data: “employee_salary” , data: “employee_age” , data: “profile_image” , ], );กับนี่ก็รวมความว่าหน้าตา Table สิ่งของอิฉันServer-side processingมาถึงซีกบ๊วยกันแล้วกับดัก Server-side processing แปลเฉพาะก็รวมความว่าทำให้ DataTables เจียรวัดผลสถานที่ชายฝั่งทะเล Server ต่อจากนั้นฉันใดจำเป็นจะต้องก่อแปลนตรงนั้นพร้อมด้วย อันนี้ต้องลองดูกักคุมก่อนว่าที่ดิฉันก่อมาก่อนหน้าหมดด้วยกันนั้นมันจัดการเช่นไรไม่ว่าจะได้ผลใช้คืนประกาศขนมจาก

, ตัวแปรในที่ JavaScript หรือดูดดึงเปลี่ยน Ajax ข่าวสถานที่อิฉันเอาจรสร้าง Table ก็ครอบครองประกาศทั้งเพแห่งหนดิฉันมีถึงจะดำรงฐานะ Ajax แต่เราก็ดึงดูดมาเทียวทั้งกองอยู่ดีซึ่งข้อมูลสถานที่เราจำเป็นจะต้องเจอบางทีก็ไม่ไหวมีเพียงเสาสิบหรือไม่ก็เสาสอด ทว่าบางขณะประกอบด้วยข่าวดำรงฐานะหมื่นเป็นแสน Row การที่จะรอโหลดทั่วกำลงมานั้นมันควรไม่ทันเวลาเกินไปเต็มแรงๆ DataTables แล้วก็มีความเก่งกาจ Server-side processing ตรงนี้ขึ้นลงมาแบ่งออกสามารถดูดดึงข้อมูลมาเจาะจงซีกแห่งหวังจะใช้งานหรือว่าปรากฏผลในตอนนั้นก็ครั้น ตัวอย่างเช่นอิฉันคัดเลือกแบ่งออกปรากฏผลเค้าหน้าละ 25 Row ก็ดึงดูดข่าวลงมาแค่ 25 Rowวิถีทางจัดการก็ลงความว่า DataTables จะก่อสร้าง Request แห่งมี Parameter กระยาเลยเพราะว่าบอกแหวปรารถนาข้อมูลตัวไรบ้าง หรือว่าสืบเสาะด้วยคำแหวอย่างไรมั่ง ซึ่งมีเหลือแหล่ตัวสิงสู่เช่นเดียวกันแนะนำตัวแหวพิสูจน์จากไปอ่านหนังสือแนะนำดูท่าดีกว่าดุ Parameter แต่ละร่างกายบ่งเหตุแหวกระไรมั่งทั่วระยะ Request และ Response เลย https://datatables.net/manual/server-side โดย Parameter แห่ง Request พวกนั้นเราต้องเอาเจียรสร้างกระไรต่อน่ะหรือ ก็นำเจียร Query ขนมจาก Database ลงมายังไงล่ะซึ่งดิฉันต้องนำเจียรประกอบต่อจากนั้น Query ออกมา อาทิ “SELECT id, name, age FROM mytable LIMIT สิบ OFFSET 15” อะไรคาดคะเนนี้ ซึ่งถ้าหากใครภูมิหลังจดวงที่จะชดใช้ Server-side processing จากนั้นกิจธุระที่จะทำก็อาจไม่ง่ายสักเท่าใด ก็จำเป็นจะต้องว่าการงาน Query ตามแต่ละภาษาหรือไม่ก็หมู่แห่งใช้แห่งริมทะเล Server แต่หากใครใช้ PHP เป็น Server อยู่หรือสามารถรัน PHP ได้มา ที่เว็บ DatatTables ก็ประกอบด้วยแบบอย่างโค้ด PHP ที่จะชดใช้สร้าง Server-side processing แบบง่ายๆปันออกดิฉันก็อปแปะกักคุมได้มาอยู่พิสูจน์ไปดูกักคุมแฟ้มข้อมูล sspมันสมองclassมันสมองphpดำรงฐานะรหัส PHP ที่ทำงานน่าปวดศีรษะหมดด้วยกันตั้งแต่ยกมา Request Parameter เจียรสร้างดำรงฐานะ SQL ยกมาเจียร Query จวบจนถึงกำหนดรูปแบบ Response กลับมอบดิฉันพร้อมด้วย ซึ่งแนะนำแบ่งออกจากไปก็อปปี้หรือไม่ก็ดาวน์โหลดมาจาก Github สิ่งของ DataTables ต่อหน้าเกิน https://github.com/DataTables/DataTablesSrc/blob/master/examples/server_side/scripts/sspมันสมองclass.phpเรียกหาใช้คืน sspมันสมองclassมันสมองphpส่วนหน้าแห่งสรรพสิ่งอิฉันก็เพียงเรียกหาใช้แฟ้มข้อมูล sspมันสมองclass เพราะว่าการส่ง Parameter ทั้งมวลเจียรมอบก็เหมาะแล้วรอค่าสถานที่ Return กลับเพื่อที่จะ Response หวนกลับจากไปแห่งหน Browser ซึ่งเค้าก็มีโค้ดแบบอย่างแบ่งออกดิฉันพร้อมด้วยหากแหวครอบครองแฟ้มข้อมูล server.php (รหัสขนมจาก https://github.com/DataTables/DataTablesSrc/blob/master/examples/server_side/scripts/server_processingมันสมองphp)$table = ‘ชื่อกำหนดการที่ Database’; $primaryKey = ‘ชื่อเสียงเรียงนาม Primary Key อาทิเช่น id’; /* ระบุชื่อ Column ในที่ Database เข้าคู่กับ Column ที่จะมอบจัดโชว์แห่งเค้าหน้าเว็บ อาทิเช่น array(‘db’ => ‘first_name’, ‘dt’ => 0) ‘db’ => ‘first_name’ : เป็นชื่อเสียงเรียงนาม Column first_name ในที่ Database ‘dt’ => 0 : มอบยกมาจรแสดงดำรงฐานะ Column แห่งหน 0 ในที่ DataTables สรรพสิ่งเรา */ $columns = array( array(‘db’ => ‘first_name’, ‘dt’ => 0), array(‘db’ => ‘last_name’, ‘dt’ => 1), array(‘db’ => ‘position’, ‘dt’ => 2), array(‘db’ => ‘office’, ‘dt’ => 3), /* ‘formatter’ : เราสมรรถคำเก้านหรือไม่ก็วางรูปแบบข้อมูลแห่ง Query ขนมจาก Databse คว้า */ array( ‘db’ => ‘start_date’, ‘dt’ => 4, ‘formatter’ => function ($d, $row) return date(‘jS M y’, strtotime($d)); ), array( ‘db’ => ‘salary’, ‘dt’ => 5, ‘formatter’ => function ($d, $row) return ‘$’ . number_format($d); ) ); // ข่าวเพื่อจะเชื่อมต่อ Database $sql_details = array( ‘user’ => ”, ‘pass’ => ”, ‘db’ => ”, ‘host’ => ” ); // เรียกแฟ้มข้อมูล sspมันสมองclass.php ลงมาใช้งาน require(‘sspมันสมองclassมันสมองphp’); /* ส่งประกาศสถานที่ขาดไม่ได้เข้า $_GET : Parameter แห่งหนตัว DataTables ส่ง Request มานั่นเอง เอาคุณประโยชน์แห่ง return ลงมาทำครอบครอง json จากนั้น echo กลับเจียรมอบ DataTables คว้าเลย */ echo json_encode( SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns) );ไฟล์ HTML สิ่งของดิฉัน

First name	Last name	Position	Office	Start date	Salary
First name	Last name	Position	Office	Start date	Salary

F ใช้งานได้มาต่อจากนั้นเพราะ Server-side processingสำหรับประเด็นนี้เนื่องจากทั้งมวลครอบครองแค่โค้ดแม่แบบก็เกินปราศจากเค้าหน้าแห่งรันจริงมาแบ่งออกดูกัน แต่ที่คู่มือ DataTables เค้ามีปันออกลองโจ้กันสิงสู่แล้ว อย่างไรก็เข้าไปศึกษาทำให้ดีขึ้นกันได้ครับ https://datatablesมันสมองnet/examples/server_side/simple.htmlผิคุณยั่วปรับปรุง สตาร์ถักัพ แอปพลิเคชัน กับ เทคโนโลยีสิ่งของตัวเอง ?อย่ารอไม่ทันเวลา ! ทำความเข้าใจความถนัดข้างดิจิทัลเพื่ออัพเกรดความสามารถสิ่งของเธอ ริเริ่มตั้งแต่พื้นฐาน ครบถ้วนปฏิบัติจริงๆในที่รูปแบบหลักสูตรออนไลน์วันนี้ Advance Problem Solving ฿2,590.00 ฿2,090.00฿2,590.00 ฿2,090.00Add to cart Basic Motion Graphic & Animation ฿1,990.00 ฿1,290.00฿1,990.00 ฿1,290.00Add to cart Complete Arduino For Beginner ฿3,290.00 ฿1,990.00฿3,290.00 ฿1,990.00Add to cart COMPLETE ARDUINO FOR BEGINNER WITH ELECTRO KIT I ฿5,180.00 ฿2,590.00฿5,180.00 ฿2,590.00Add to cart