ทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox

จำนวนผู้เข้าชม : 7

เราขอแนะนำตัวอย่างโค้ด jQuery สำหรับการ sort & filter ตาราง เมื่อกรอกข้อความใน Textbox แล้วให้ javascript ซ่อนแถวตารางที่ไม่ตรงกับคำค้น และแสดง แถวตารางที่ตรงกับคำค้น โดยเทคนิคนี้ มักจะเรียกกันว่า การทำ Searchtable จะเขียนยังไง ลองมาอ่านดูคะ

ตัวอย่าง การใช้งาน Jquery สำหรับ ซ่อน/แสดง แถวตาราง หรือ การทำ Search table show/hide row แบบ Realtime

โดยตัวอย่างโค้ด เราจะสร้าง Texbox ขึ้นมาหนึ่งตัว ทำหน้าที่เป็น Search field และเมื่อเรากรอกคำค้นใน Searchbox นั้น ก็จะมี Function jQuery ที่ทำงานร่วมกัน ทำหน้าที่สำหรับ ซ่อน Row ที่ไม่ตรงกับคำค้น และ แสดง Row ที่ตรงกับคำค้น ตัวอย่างการแสดงผลก็จะตามด้านล่างนี้เลย

อธิบายการทำงานของโค้ด Search table real-time

ส่วนที่ 1 คือส่วนของ Textbox เราจะทำการกำหนด ID ให้ Element ตามตัวอย่างนี้

ส่วนที่ 2 คือส่วนของตาราง โดยเราจะกำหนด Class สำหรับตารางที่ชื่อว่า filterable เหมือนตัวอย่างด้านล่าง

<table class="filterable">
    <thead>
    <tr>
        <th>Month</th>
        <th>Value 1</th>
        <th>Value 2</th>
        <th>Value 3</th>
        <th>Value 4</th>
        <th>Value 5</th>
        <th>Value 6</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

ส่วนที่ 3 คือส่วนของ javascript หลักการทำงานคือ เมื่อค้นหาใน Textbox ตัว Function ก็จะทำงานทันทีร่วมกับ event keyup

<script>
    jQuery(document).ready(function($){
        $(".filterable tr:has(td)").each(function () {
            var t = $(this).text().toLowerCase(); //all row text
            $("<td class='indexColumn'></td>")
                .hide().text(t).appendTo(this);
        }); //each tr
        $("#FilterTextBox").keyup(function () {
            var s = $(this).val().toLowerCase().split(" ");
            //show all rows.
            $(".filterable tr:hidden").show();
            $.each(s, function () {
                $(".filterable tr:visible .indexColumn:not(:contains('"
                    + this + "'))").parent().hide();
                $(".filterable tr:visible .indexColumn:not(:contains('"
                    + this + "'))").parent().hide();
            }); //each
        }); //key up.
    });
</script>

แต่หากเพื่อน ๆ ไม่เข้าใจว่า Function มันทำงานยังไงหว่า ก็ไม่เป็นไหร่ แค่ Copy code ส่วนนี้ไปแปะไว้ในไฟล์งานของท่านแล้วก็ กำหนดชื่อ ID ของ Textbox และ Class ของ Table ให้ตรงกับตัวอย่างโค้ดของท่านก็จะทำงานได้เหมือนกัน

เป็นยังไงกันบ้างคะสำหรับบทความ วิธีทำ Search Table การ Filter ซ่อน/แสดง row เมื่อกรอก Textbox ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย