ผู้เขียน หัวข้อ: สร้างตารางด้วย TablePress และทำให้ Responsive ด้วย FooTable  (อ่าน 894 ครั้ง)

0 สมาชิก และ 1 บุคคลทั่วไป กำลังดูหัวข้อนี้

ออฟไลน์ smf

  • [color=green][i]"ถ้าคุณไม่สามารถอธิบายอย่างง่ายๆ ให้คนอื่นเข้าใจได้แล้วล่ะก็ แสดงว่าคุณยังเข้าใจมันไม่ดีพอ"[/i][/color]
  • Administrator
  • Hero Member
  • *****
  • กระทู้: 1,368
  • พอยท์: 5
    • ดูรายละเอียด
    • pordoo.com
    • อีเมล์
TablePressต่างจาก MCE Table Buttons ตรงที่จะทำการเก็บข้อมูลของตารางลงไว้ในฐานข้อมูล และเวลาจะนำมาแสดงก็ใช้ Shortcode  แทน จะไม่สามารถแก้ไขที่หน้าบทความได้เหมือน MCE Table Buttons แต่ก็มีความสามารถมากกว่าเยอะพอสมควร เช่น การ Import/Export ตารางได้ มี Sorting, Filter, Search ในตัว
 Download

เพิ่มตาราง
ไปที่เมนู TablePress > Add New Table



ตั้งชื่อตารางและกำหนดจำนวนแถวและคอลัมน์ที่ต้องการ เสร็จแล้วคลิก Add Table



จากนั้นเราก็จะเข้าสู่หน้ากรอกข้อมูลตาราง สามารถใส่ลิงค์หรือภาพได้ หรือคลิกที่ Advance Editor เราสามารถที่จะลบตารางโดยการคลิกที่แถวหรือคอลัมน์ที่ต้องการแล้วคลิกที่ปุ่ม Delete หรือทำการรวม (Combine) เซลใดๆ ด้วยการเลือกเซลที่ต้องการแล้ว Combine ก็ได้ หากต้องการเพิ่มแถวหรือคอลัมน์ ก็ใส่จำนวนที่ต้องการแล้วกด Add



Table Options ใช้สำหรับกำหนดคุณลักษณะของตาราง เช่น การกำหนดให้แถวแรกเป็น Header โดยอัตโนมัติ หรือการกำหนดให้เปลี่ยนสีพื้นหลังเมื่อเราเคลื่อนเม้าส์อยู่เหนือแถวใดๆ ทำให้เราสังเกตุข้อมูลได้ง่ายขึ้นค่ะ



Featured of the DataTable
ใช้สำหรับการกำหนดการทำงานเพิ่มเติมให้กับตาราง เช่น การเปิดใช้งานการเรียงข้อมูล (Sorting) โดยเมื่อมีการคลิกที่หัวข้อคอลัมน์ใดๆ หากเป็นข้อมูลตัวเลข ก็จะแสดงแบบไล่ลำดับ น้อย – มาก, มาก – น้อย เป็นต้น, การแบ่งข้อมูลเป็นหลายๆ หน้า (Pagination) โดยกำหนดจำนวนแถวที่ตัดขึ้นหน้าใหม่ในช่อง Show _ row per page. หรือการเพิ่มช่อง Search เป็นต้น





ตัวอย่างจากนั้นคลิกที่ปุ่ม Preview เพื่อดูตัวอย่างตารางที่เราสร้างขึ้น แล้วกดปุ่ม Save Changes เพื่อจัดเก็บตาราง



Import/Export ใช้สำหรับการ Import หรือ Export ตารางจากข้อมูลประเภทต่างๆ สามารถอัพโหลดเป็นไฟล์หรือก๊อปปี้ข้อมูลมาวางได้หากเลือกเป็นแบบ Manual Input



การใช้งานตาราง
เราสามารถแทรกตารางลงไปในโพสใดๆ ด้วยการใช้ shortcode ของตารางนั้นๆ เช่น [[table id=4 /]] หรือที่หน้าเขียนบทความ คลิกที่ปุ่มแทรกตารางของ TablePress แล้วเลือกตารางที่เราต้องการแทรกลงไป




Footable




คือปลั๊กอินที่ช่วยทำให้ตารางนั้นแสดงผลแบบ Responsive ตามหน้าจอขนาดต่างๆ เพราะโดยปกติแล้วตารางจะไม่สามารถแสดงผลแบบ Responsive ได้
Download
ตั้งค่า
Settings > FooTableGeneralเรา จะเปิดการทำงานของ Fooble ให้ใช้งานกับ TablePress โดยอัตโนมัติด้วยการติ๊กที่ช่องด้านล่าง ส่วนตัวเลือกอื่นๆ เช่น Sorting, Filtering, Pagination นั้นเราก็ติ๊กออกเสีย เนื่องจาก TablePress ที่เราตั้งค่าก่อนหน้านี้มีฟังชั่นเหล่านี้อยู่แล้ว



Breakpoints คือการกำหนดจุดเปลี่ยนสำหรับหน้าจอของ Tabet และ Phoneโดยมีหน่วยเป็น pixel คือ เมื่อหน้าจอต่ำกว่าตัวเลขที่กำหนดนี้ ก็จะทำการย่อตารางลง



Column Visibility คือการกำหนดจำนวนตารางที่จะแสดงเมื่ออยู่บนหน้าจอของ Tablet และ Phone เมื่อตั้งค่าเรียบร้อยก็กดปุ่ม Save Changes



จากตัวอย่างด้านล่าง เมื่อหน้าจอลดลงเป็นขนาด 320 pixel ตารางก็จะหดลงเหลือแค่ 2 คอลัมน์ เหลือเพียง ชื่อ และ อายุ โดยหากจะดูข้อมูลอื่นๆ ก็คลิกที่แถวนั้นๆ หรือที่เครื่องหมาย





ที่มา: http://www.wpthaiuser.com/tablepress-footable/
« แก้ไขครั้งสุดท้าย: 20 มกราคม 2017, 15:43:29 โดย smf »