使用 AJAX 进行Codeigniter 4分页

nuypyhwy  于 2022-12-07  发布在  其他
关注(0)|答案(1)|浏览(206)

我怎样才能只从分页url加载数据,而不是用codeigniter 4和jquery AJAX 渲染页面?
我指的是一种只返回tr和td标记而不是页面的完整html的方法。
这是我的代码,提前感谢

分页导航布局

<?php $pager->setSurroundCount(1); ?>
<div id="pagerRumah" class="row" style="position: sticky; bottom: 0; background: #ffffff;">
    <div class="col-md-6 align-self-center">
        <p id="dataTable_info" class="dataTables_info" role="status" aria-live="polite">Halaman <?= $pager->getCurrentPageNumber() ?> dari <?= $pager->getPageCount() ?></p>
    </div>
    <div class="col-md-6">
        <nav class="d-lg-flex justify-content-lg-end dataTables_paginate paging_simple_numbers">
            <ul class="pagination" style="overflow-y:auto;">
                <li class="page-item <?=!$pager->hasPreviousPage() ? 'disabled' : ''?>">
                    <a class="page-link" aria-label="<?= lang('Pager.first') ?>" href="<?= $pager->getFirst() ?>"><span aria-hidden="true">«</span></a>
                </li>
                <?php foreach ($pager->links() as $url) :?>
                <li class="page-item pager-item <?=$url['active'] ? 'active' : ''?>"><a class="page-link" href="<?=$url['uri']?>"><?=$url['title']?></a></li>
                <?php endforeach ?>
                <li class="page-item <?=$pager->hasNext() ? '' : 'disabled'?>">
                    <a class="page-link" aria-label="Next" href="<?= $pager->getLast() ?>"><span aria-hidden="true">»</span></a>
                </li>
            </ul>
        </nav>
    </div>
</div>

控制器

public function index() {
            // code...
            // $data['listMT'] = json_decode($this->material());
            // return view('materialKatalog', $data);
            // $data['listMT'] = $this->mamat->paginate(50, 'material');
            $data['listMT'] = $this->mamat->paginate(50, 'material');
            $data['pager'] = $this->mamat->pager;
            return view('materialKatalog', $data);
        }

JS

$(function(){
        $("#pagerRumah a").click(function(e){
            e.preventDefault();
            $.ajax({
                type: "GET",
                url: $(this).attr("href"),
                data:"q=<?php echo $searchString; ?>",
                dataType: 'JSON',
                success: function(response){
                   // $("#listMaterial").html(res);
                   console.log(response);
                }
            });
           return false;
        });
    });
fnx2tebb

fnx2tebb1#

要实现你想要的,你可以在你的控制器中使用CI4方法“isAJAX()”。

public function index()
{
    // code...
    // $data['listMT'] = json_decode($this->material());
    // return view('materialKatalog', $data);
    // $data['listMT'] = $this->mamat->paginate(50, 'material');
    $data['listMT'] = $this->mamat->paginate(50, 'material');
    $data['pager'] = $this->mamat->pager;
    if ($this->request->isAJAX()) {
        // Use View that only phrase tr and td tags
        return view('materialKatalog', $data);
    } else {
        // Full page render
        return view('materialKatalog', $data);
    }

}

我最好的建议是你是看看datatables库。

相关问题