รูปภาพแสดงหน้าเว็บ รูปภาพแสดงหน้าเว็บ list-js ประกอบ How to

Listjs สำหรับค้นหา search,sort and filter บนเพจง่ายๆ

Listjs How to นี้เป็น วิธีการใช้งาน Native JavaScript Plugin สุดเบาตัวหนึ่ง ที่มีคุณภาพสูงมาก ใช้สำหรับการ Search และการ filter ข้อมูลต่างๆ ทำได้หมดทั้งใน Table และ List หรือจะใช้สำหรับแบ่งหน้าข้อมูล ก็ยังทำได้ง่ายๆ เอาเป็นว่าเรามาดูวิธีการใช้งาน กันเลยดีกว่าครับ

Listjs How to search,sort and filter in html

ในความสามารถของ List.js นั้น ไม่ได้ให้เรา ทำการค้นหาข้อมูล ในส่วนของ Database ใดๆนะครับ แต่มันเป็นการ ค้นหา หรือจัดเรียงข้อมูล ที่ถูก render ออกมาเป็น HTML แล้วนั้นเอง ทั้งในรูปแบบของ List ทั้ง UL LI อะไรแบบนั้น หรือจะเป็น Table ก็ได้เหมือนกัน

รูปภาพแสดงหน้าเว็บ รูปภาพแสดงหน้าเว็บ listjs ประกอบ How to

รูปภาพแสดงหน้าเว็บ รูปภาพแสดงหน้าเว็บ list-js

เว็บไซต์ List.js

ตัว List.js เป็น Code ที่เขียน พัฒนาขึ้นมาจาก Javascript วิธีใช้งานง่าย ไม่ค่อยซับซ้อน แถมมีพลังเยอะมาก option เสริมร้ายกาจ ลองมาดูวิธีใช้ เบื้องต้นกันครับ

เริ่มจากการติดตั้งกันก่อน เข้าไป Download กันได้ที่ Link: download

เราจะได้ไฟล์ list.min,js มา 1 ไฟล์ เอาไปใส่ก่อนปิดเพจ หรือถ้าไม่ download ลงมาก็สามารถ วางจาก CDN ได้เลยเหมือนกัน


<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.2.0/list.min.js"></script>

หรือวางเต็มๆกันได้แบบนี้

จากนั้นมาดูวิธีการใช้งานกันครับ ผมจะเริ่มจากการสร้างโครงสร้าง ธรรมดาขึ้นมาก่อน

<div class="container">
<div class="row">
<div class="col-md-4">
<h1>Customer Name</h1>
</div>
</div><!-- /.row -->
</div>

จากนั้นไปดึงเอาข้อมูลออกมาแสดงก่อน


<?php
try {
$db = new PDO('mysql:host=localhost; dbname=zendtut; charset=utf8', 'root', '');
} catch (Exception $e) {
echo "Can not connect to database";
throw new Exception($e);
}
$select = $db->query('SELECT * FROM customer_tbl LIMIT 20');
$customer = $select->fetchAll();
?>

จากนั้น จะเอาไปวนใส่ ul เพื่อแสดงค่าตามรูปแบบของ List กันนะครับ


<div id="customer-list">
<ul class="list">
<?php
foreach($customer as $c ) {
?>
<li>
<p class="name">
<?php echo $c['first_name']." ".$c['last_name'];?>
</p>
<p class="city">
<?php echo $c['country'];?>
</p>
</li>
<?php
} // end foreach
?>
</ul>
</div>

ตรงนี้จะเห็นว่า ผมใส่ id ชื่อ customer-list ไว้คลุมส่วนทั้งหมดและclass ชื่อ list เอาไว้ เพื่อเตรียมให้ list js นั้นทำหน้าที่ค้นหา ข้อมูลในส่วนนี้นะครับ ทีนี้ก็จะเป็นการไประบุใน javascript ต่อว่าจะค้นด้วย option ไหนบ้าง ในนี้ผมใส่ไว้ 2 ค่าคือชื่อ class name กับชื่อ class city สำหรับค้น


var options = {
valueNames: [ 'name', 'city' ]
};
var customer = new List('customer-list', options);

ในส่วนของ javascript นี้แค่เป็นการเรียก list ที่เราสร้างสำหรับคลุมทั้งหมดที่จะค้นหานะครับ แล้วเติมด้วย option ที่เราจะใช้ในการค้น ซึ่งในตัวอย่างนี้ ผมใส่ไว้ 2 ค่าคือ name กับ city แล้วก็เอามาประการ new List ใหม่แค่นี้เองก็เป็นอันพร้อมใช้

แต่ว่าถ้าจะใช้สำหรับค้นหา เราก็ต้องมี Input สำหรับ Search ด้วยนะครับ งั้นมาเติมกันก่อน ผมจะใส่แบบง่ายๆ คือโจยท์มันต้อง input จำเป็นต้องอยู่ใน zone ที่เราคลุมไว้ทั้งหมด ถึงจะหากันเจอนะครับ งั้นมันก็จะต้องวางเอาไว้ใน id ที่ชื่อ customer-list นั้นเอง


<input class="search" placeholder="Search" />

ใส่แค่ class ว่า search เท่านั้นเองครับก็เป็นอันผ่าน จะได้ตามภาพด้านล่างนี้เลย

listjs สร้างฟร์อมค้นหา

listjs สร้างฟร์อมค้นหา

แต่เราสามารถใส่ปุ่มสำหรับ Sort ตาม Order ชื่อหรือเมืองของเราได้ด้วย ง่ายๆด้วย


<button class="sort" data-sort="name">
Sort by name
</button>

เราก็จะสามารถ Sort ได้เลย ง่ายดีทีเดียว แต่ความสามารถของเค้ายังไม่หมด เพราะนอกจากนี้ ยังสามารถใช้งานกับ table ได้เป็นอย่างดีเลยอีกด้วยนะเออ มาดูกันครับ

Table


<table class="table">

<tbody class="list">
<?php
foreach($customer as $c ) {
?>
<tr>
<td class="name">
<?php echo $c['first_name']." ".$c['last_name'];?>
</td>
<td class="city">
<?php echo $c['country'];?>
</td>
</tr>
<?php
} // end foreach
?>

</tbody>
</table>

จะเห็นว่า โครงสร้างหลักๆ ยังเหมือนเดิมนะครับ แค่ย้ายจาก ul มาเป็น table แทน แล้วของเดิม ผมใส่ class ลงไปใน p tag แต่อันนี้เอา class ที่เป็นชื่อ name กับ city ใส่ลงไปใน td เลย จุดสำคัญคือ class list ที่สร้างไว้ ต้องหยิบมาใส่ใน tbody นะครับ ถ้าใส่ใน table จะไม่สามารถทำงานได้

table list

table list

นอกจากนี้ก็ยังมีความสามารถในส่วนของ การแบ่ง Pagination ด้วยที่ทำให้สามารถเอามาใช้เป็นตัว present บนหน้าเพจให้ user ดูและใช้งานได้จริงกันเลยทีเดียว

Pagination

เริ่มด้วยการ Download File สำหรับทำ Pagination มาใหม่ก่อนนะครับ ที่นี่ Pagination แล้วก็เอามาวางใน Project ของเรา เหมือนตอนแรก จากนั้นก็แค่เติม ไปว่าในเพจแรก จะให้แสดงข้อมูลจำนวนเท่าไหร่ จากนั้นก็เรียก plugin ตัว pagination ขึ้นมา เป็นอันจบครับ


var options = {
valueNames: [ 'name', 'city' ],
page: 5,
plugins: [
ListPagination({})
]
};
var customer = new List('customer-list', options);

จากนั้นเราก็เอา ul ที่เป็น pagination ไปวางตามพื้นที่ ที่เราต้องการแสดงครับ เช่นผมจะวางไว้ใต้ table แล้วกัน


<ul class="pagination"></ul>

แล้วใครจะตกแต่ง css ก็เอา class pagination ไปเล่นได้เลยนะครับ อันนี้มันเป็นค่าใน bootstrap ที่ผมยัดเอาไว้ เลยได้หน้าตาแบบนี้

pagination

pagination

เพียงเท่านี้ก็ใช้ความสามารถของ List js ไปไม่น้อยแล้ว น่าจะพอใช้งาน หรือนำไปประยุกต์กันต่อได้แล้วนะครับ โดยส่วนตัว ผมมักใช้เจ้านี่ ในการแสดงข้อมูลแบบ pagination ซะมากกว่า เพราะมีค้นหาด้วยในตัวจบเลย เลิกใช้การแบ่ง pagination แบบ PHP เดิมๆไปแล้ว แต่ก็ต้องยอมเรื่องของ การที่เค้าจะ query ออกมาเยอะ สำหรับตอนแรก ลองไปเล่นกันต่อดูแล้วกันนะครับ