TP5配合AJAX無刷新分頁示例

一、TP5的分頁用起來還是蠻方便的，把俺們從繁雜的分頁邏輯中解放出來了。

不過，如果想錦上添花，用TP5的分頁與前端AJAX請求完美配合卻得費些心思，本虎經過數次優化完善，做出了一套分享給大家，有不足之處請大家多留言指教喔！

 

二、後端代碼：

                $goods = Db::name('goods')
                    ->where($where)
                    ->paginate(10, false, [
                        'query' => Request::instance()->param(),//不丟失已存在的url參數
                        'page' => $search['page']
                    ]);

                ($goods) ? $this->success('OK', '', $goods) : $this->error();

 

三、前端HTML代碼：

<table class="layui-table" lay-skin="line" style="margin-top: 2em">
    <colgroup>
        <col width="80">
        <col width="150">
        <col width="100">
        <col>
    </colgroup>
    <thead>
    <tr>
        <th>序號</th>
        <th>商品名稱</th>
        <th>商品編碼</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>
<!--分頁：-->
<ul class="pagination">
</ul>

 

前端JS代碼：

        /*點擊頁碼切換頁面:*/
        $(document).on('click', '[data-page]', function () {
            pages(data + '&page=' + $(this).attr('data-page'));
        });


        function pages(data) {

            var page = '';
            $.ajax({
                cache: true, /*是否緩存*/
                type: "POST",
                url: '請求後端的URL',
                data: data,
                async: true, /*是否異步*/
                success: function (data) {
                    if (data.code == 1 && data.data.data != '') {
                        /*console.log(data.data);*/

                        $.each(data.data.data, function (i, n) {

                            conten += '    <tr>\n' +
                                '        <td>' + n.id + '</td>\n' +
                                '        <td>' + n.good_name + '</td>\n' +
                                '        <td>' + n.goods_sn + '</td>\n' +
                                '    </tr>\n'
                        });
                        $('tbody').html(conten);
                        form.render();

                        /*生成頁碼函數：*/
                        pages(data.data, page);

                    } else {
                        $('.pagination').html('');
                        $('tbody').html('<tr><td colspan="3">無數據</td></tr>');
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        }


/*生成頁碼函數：*/
/*data,傳入後臺返回的分頁數據：*/
/*page：用於顯示頁碼的HTML代碼*/

          function pages(data, page) {
            if (data.last_page > 1) {
                if (data.current_page == 1) {
                    page += '<li class="disabled"><span>«</span></li>';
                } else {
                    page += '<li data-page="' + (data.current_page - 1) + '"><a href="javascript:;">«</a></li>';
                }

                if (data.last_page > 12) {
                    if (data.current_page > 5) {
                        start = data.current_page - 5;
                        end = (data.current_page+7<data.last_page) ? data.current_page + 6 : data.last_page;
                        for (var i = start; i <= end; i++) {
                            if (i == data.current_page) page += '<li class="active"><span>' + i + '</span></li>'; else page += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>'
                        }
                        page += (data.current_page+7<data.last_page) ? '<li><span>...</span></li>' : '';

                    } else {
                        for (var i = 1; i <= 12; i++) {
                            if (i == data.current_page) page += '<li class="active"><span>' + i + '</span></li>'; else page += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>'
                        }
                        page += '<li><span>...</span></li>';

                    }
                } else {
                    for (var i = 1; i <= data.last_page; i++) {
                        if (i == data.current_page) page += '<li class="active"><span>' + i + '</span></li>'; else page += '<li data-page="' + i + '"><a href="javascript:;">' + i + '</a></li>'
                    }
                }

                if (data.current_page == data.last_page) {
                    page += '<li class="disabled"><span>»</span></li>';
                } else {
                    page += '<li data-page="' + (data.current_page + 1) + '"><a href="javascript:;">»</a></li>';
                }

                $('.pagination').html(page);

            } else {
                $('.pagination').html('');

            }
        }

 

結語及注意事項：

1，這套分頁代碼的效果，實現AJAX靜態刷新；

2，當頁數超過12頁時，會顯示當前頁前5-後6共12個頁碼，後邊用省略號代替；

3，注意事項，頁面加載代碼調用pages()方法時傳入page=1即可，未奉上。

如果文章對你有幫助，請打開支付寶搜索535149388，領取馬雲的紅包，使用餘額寶消費可抵扣，大家好，纔是真的好。