Thêm chức năng lọc dropdown cho WP_List_Table trong WordPress

Hiển thị một danh sách bài viết, hay danh sách học viên , chúng ta sử dụng class WP_List_Table. Bạn tạo 1 lớp mới có kế thừa class này, tôi đã tạo thành công chức năng liệt kê records được lấy từ csdl nhưng làm thế nào để thêm một bộ lọc drop-down để lọc hồ sơ trong kết quả table theo danh mục của mình.

Sau vài phút tìm kiếm & tìm hiểu class WP_List_Table tôi đã tìm được đáp án, và chia sẻ với các bạn bài viết này.

Có một hàm extra_tablenav($which), bạn có thể ghi đè cho bạn tùy biến thêm tính năng. Bằng cách này tôi đã thêm trường drop-drop để lọc dữ liệu theo ý muốn.

function extra_tablenav( $which ) {
    global $wpdb, $testiURL, $tablename, $tablet;
    $move_on_url="&cat-filter=";
    if ( $which == "top" ){
        ?>
        <div class="alignleft actions bulkactions">
        <?php
        $cats = $wpdb->get_results('select * from '.$tablename.' order by title asc', ARRAY_A);
        if( $cats ){
            ?>
            <select name="cat-filter" class="ewc-filter-cat">
                <option value="">Filter by Category</option>
                <?php
                foreach( $cats as $cat ){
                    $selected = '';
                    if( $_GET['cat-filter'] == $cat['id'] ){
                        $selected = ' selected = "selected"';   
                    }
                    $has_testis = false;
                    $chk_testis = $wpdb->get_row("select id from ".$tablet." where banner_id=".$cat['id'], ARRAY_A);
                    if( $chk_testis['id'] > 0 ){
                ?>
                <option value="<?php echo $move_on_url . $cat['id']; ?>" <?php echo $selected; ?>><?php echo $cat['title']; ?></option>
                <?php   
                    }
                }
                ?>
            </select>
            <?php   
        }
        ?>  
        </div>
        <?php
    }
    if ( $which == "bottom" ){
        //The code that goes after the table is there

    }
}

Tiếp đó tôi sửa hàm prepare_items() và thêm một dòng sau vào lệnh SQL.

if( $_GET['cat-filter'] > 0 ){
	$query = $query . ' where cat_id=' . $_GET['cat-filter'];   
}

Cuối cùng, mình muốn thêm một số dòng javascript để thực hiện lệnh với trường select,

$('.ewc-filter-cat').live('change', function(){
    var catFilter = $(this).val();
    if( catFilter != '' ){
        document.location.href="https://www.hoangweb.com/wordpress/admin.php?page=ewc-testimonial"+catFilter;    
    }
});

Vậy là tôi đã hoàn thành một bài tập đơn giản. Nếu bạn có bất kỳ câu hỏi xin hãy để lại trong phần bình luận dưới bài viết này.

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook