List.js เป็น Library สำหรับการ filter, search หรือ sort DOM Element เป็นการทำงานในฝั่งของ Client ไม่ต้องทำการส่งข้อมูลไป Query บน Server จะลดภาระของการทำงานในฝั่ง Server ลง โดยการใช้งาน List.js นั้นก็ไม่ยาก เพียงแค่เรากำหนด Class ใน Element ต่างๆให้ถูกต้อง เราก็มี textbox สำหรับการ Search และ ปุ่มสำหรับการ sort
ขั้นตอนการใช้งานมีดังนี้
1. เริ่มต้น Download List.js
2. ทำการสร้าง list ของรายการที่ต้องการ Search หรือ Sort ตามโครงสร้างนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<div id="hacker-list"> // ชื่อของ list ที่สร้างขึ้น <ul class="list"> // กำหนดให้ class="list" <li> // กำหนด field ที่ต้องการ Search และ Sort // ใช้ชื่อ class ในการกำหนดชื่อ <h3 class="name">Jonny</h3> <p class="city">Stockholm</p> </li> <li> <h3 class="name">Jonas</h3> <p class="city">Berlin</p> </li> </ul> </div> |
ตามตัวอย่างนี้จะมี list อยู่ 2 รายการ
หลังจากนั้น new List ในส่วนของ JavaScript ต้องระวังว่าในส่วนของ JavaScript นั้นต้องถูก run หลังจากี่ Load DOM element ทั้งหมดแล้ว อาจใช้ $(document).ready() ใน jQuery หรือ เอา JavaScript วางไว้ด้านล่างหลังจาก </body>
|
1 2 3 4 5 |
var options = { valueNames: [ 'name', 'city' ] }; var hackerList = new List('hacker-list', options); |
ถ้าใน li มีแค่ name ใน valueNames ก็กำหนดแค่ name ก็ได้
ถือว่าเป็น library ที่น่าจะนำไปใช้งานได้ดีทีเดียว
รับเขียนโปรแกรมและสอนเขียนโปรแกรมด้วย PHPติดต่อสอบถามรายละเอียดเพิ่มเติมได้ที่ 062-419-9498
หรือ E-mail: training@irobust.co.th