WordPress 為自定義表格/列表添加分頁導航功能

在 WordPress 主題或插件開發中,也許你需要制作一些表格或列表來顯示一些數據,這樣一來,你通常需要對這些數據進行分頁。下面倡萌就分享一下制作分頁導航的基本流程。最終的效果圖:

pagination-for-tables-wpdaxue_com

步驟1:添加頁碼查詢參數

獲取 url 查詢的頁碼,如果沒有任何結果,就將頁碼設置為 1

1
$pagenum = isset($_GET['pagenum']) ? intval($_GET['pagenum']) :1;

步驟2:定義每頁數據量和偏移量

現在我們需要設置每頁顯示的數據數量(limit)和 偏移量(offset),我們就是使用這兩個參數從 MySQL 查詢中獲取相應的數據。

1
2
$limit = 10;
$offset = ( $pagenum - 1 ) * $limit;

如果你對 offset 感到困惑,那么你可能會在 PHPMyAdmin 看到過類似這樣的查詢命令 "SELECT * FROM `table_name` LIMIT 0, 10" ,這里是從數據庫獲取前 10 個數據,如果你想獲取 下來的 10 個數據,那么就應該用 "LIMIT 10, 10" 。也就是說, Limit 后面的第一個數字就是 offset ,它告訴我們從哪里來獲取下一批數據。

所以,上面的2行代碼就可以動態設置 limit 和 offset。

步驟3:獲取數據

現在我們需要通過 limit 和 offset 這兩個變量從數據庫對應的表中獲取我們的數據,然后就可以按照意愿進行輸出,比如輸出為表格。

1
$entries = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}table_name LIMIT $offset, $limit" );

注:這步非常重要,代碼只是基本的結構,在實際運用中,你需要明確指定從哪個數據庫表查詢哪些數據!

到這里,如果你在地址中修改 url 的 pagenum 參數,你就會發現,可以正常獲取所需頁碼的數據了。

步驟4:輸出分頁導航

接下來獲取頁數和輸入分頁導航,WordPress 提供了一個函數 paginate_links() 用來輸出分頁導航。現在我們需要獲取頁面總數($total)和到底需要多少頁($num_of_pages)才能顯示所有數據。

1
2
$total = $wpdb->get_var( "SELECT COUNT(`id`) FROM {$wpdb->prefix}table_name" );
$num_of_pages = ceil( $total / $limit );

然后使用 paginate_links() 函數輸出分頁導航:

1
2
3
4
5
6
7
8
9
10
11
12
$page_links = paginate_links( array(
    'base' => add_query_arg( 'pagenum', '%#%' ),
    'format' => '',
    'prev_text' => __( '?', 'aag' ),
    'next_text' => __( '?', 'aag' ),
    'total' => $total,
    'current' => $pagenum
) );
 
if ( $page_links ) {
    echo '<div class="tablenav"><div class="tablenav-pages" style="margin: 1em 0">' . $page_links . '</div></div>';
}

你可以根據自己的實際需要修改輸出的代碼結構。

到這里,點擊分頁導航的頁碼,就會獲取到相應的數據了。

樣例

最終的代碼樣例大致如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<?php
global $wpdb;
 
$pagenum = isset( $_GET['pagenum'] ) ? absint( $_GET['pagenum'] ) : 1;
$limit = 5;
$offset = ( $pagenum - 1 ) * $limit;
$entries = $wpdb->get_results( "SELECT * FROM {$wpdb->prefix}posts LIMIT $offset, $limit" );
 
echo '<div class="wrap">';
 
?>
<table class="widefat">
    <thead>
        <tr>
            <th scope="col" class="manage-column column-name" style="">Post Title</th>
            <th scope="col" class="manage-column column-name" style="">Date</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th scope="col" class="manage-column column-name" style="">Post Title</th>
            <th scope="col" class="manage-column column-name" style="">Date</th>
        </tr>
    </tfoot>
 
    <tbody>
        <?php if( $entries ) { ?>
 
            <?php
            $count = 1;
            $class = '';
            foreach( $entries as $entry ) {
                $class = ( $count % 2 == 0 ) ? ' class="alternate"' : '';
            ?>
 
            <tr<?php echo $class; ?>>
                <td><?php echo $entry->post_title; ?></td>
                <td><?php echo $entry->post_date; ?></td>
            </tr>
 
            <?php
                $count++;
            }
            ?>
 
        <?php } else { ?>
        <tr>
            <td colspan="2">No posts yet</td>
        </tr>
        <?php } ?>
    </tbody>
</table>
 
<?
 
$total = $wpdb->get_var( "SELECT COUNT(`id`) FROM {$wpdb->prefix}posts" );
$num_of_pages = ceil( $total / $limit );
$page_links = paginate_links( array(
    'base' => add_query_arg( 'pagenum', '%#%' ),
    'format' => '',
    'prev_text' => __( '?', 'aag' ),
    'next_text' => __( '?', 'aag' ),
    'total' => $num_of_pages,
    'current' => $pagenum
) );
 
if ( $page_links ) {
    echo '<div class="tablenav"><div class="tablenav-pages" style="margin: 1em 0">' . $page_links . '</div></div>';
}
 
echo '</div>';

本文所說的方法在網站后臺和前臺都是可用的,在這里需要提出的一點是,本例中使用頁碼參數名是 pagenum ,也就是 $_GET['pagenum'] 里用的,如果將其換為 $_GET['p'] ,就可能沒辦法在前臺使用,因為和WordPress用來查詢文章ID 的 p 沖突了,這是倡萌在移植某些插件功能到前臺用戶中心使用時發現的問題。

參考資料:http://tareq.wedevs.com/2011/07/simple-pagination-system-in-your-wordpress-plugins/ (地址已被和諧,請自己想辦法訪問)

倡萌

一個文科IT宅男,喜歡折騰WordPress和被它折騰 ^_^

7 條評論

  1. 我要這樣輸出特定分類下文章標題
    怎么修改啊
    找了好幾天了
    我修改這個代碼的sql語言也沒成功
    求大神回復

發表評論