如果没有剩余的记录，如何隐藏删除按钮？

Question

我面临的问题，而追加数据到前端。我正在显示数据块10。问题是，如果记录是10，加载更多的按钮应该被隐藏，但按钮仍然可见。如何解决这个问题？

图片：

​

​

Ajax：

<script>
    var counter = 0;
    window.onload = function() {
         
        $.ajax({
            url: "/get_jobs",
            cache: false,
            data: {
                "_token": $('#csrf-token').content,
                "counter": counter,
            },
            success: function(response){
                if (response.count < 10){
                        $('#seeMore').hide();
                }
                else{
                     $('#seeMore').show();
                    var data = response.all_jobs;
                    append_data(data);
                counter++;
                }
                
            }
        });
    };

   async function append_data(data){
       for (i = 0; i < data.length; i++) {
           console.log("1 for");
           var html = ' <div class="col-md-6 col-lg-6 content aos-init aos-animate" data-aos="fade-right" data-aos-duration="1100" data-aos-once="true" style="margin-bottom: 16px;"><a href="jobdetail/'+data[i].id+'" class="d-flex justify-content-between bg-white rounded-10 px-8 pl-lg-13 pr-lg-11 py-9 py-lg-10 align-items-center mb-5 job-card-hover gr-hover-shadow-5 job" style="min-height:250px"><div class="texts"><h3 class="gr-text-6 font-weight-bold text-blackish-blue mb-4">'+data[i].job_title+'</h3><p class="gr-text-9 mb-0 gr-color-blackish-blue-opacity-7">'+data[i].company+'</p></div><div class="card-icon"><i class="fas fa-arrow-right gr-text-8 text-storm"></i></div></a></div>';
           $(html).hide().appendTo("#job_section").fadeIn(1000);
       }
    }

        $("#seeMore").click(function(e){

            $.ajax({
                url: "/get_jobs",
                cache: false,
                data: {
                    "_token": $('#csrf-token').content,
                    "counter": counter,
                },
                success: function(response){
                    if (response.count < 10){
                        console.log("2 if");
                        $('#seeMore').hide();
                    }
                    console.log("2 else")
                    var data = response.all_jobs;
                    append_data(data);
                    counter++;
                }
            });
        });
</script>

控制器：

public function getjobs(Request $request){

    $all_jobs = DB::table('jobs')->skip($request->counter*10)->take(10)->where('job_status', 1)->orderBy('id','DESC')->get();

   return response(["all_jobs" => $all_jobs, "count" => count($all_jobs)]);
}

Answer 1

所有的好处是分页的是，而不是用一个请求加载所有数据。和防止发送大量数据是优化在**页负载，带宽节省，服务器资源，客户端资源.

正如@apokryfos所暗示的那样，laravel有一个鼓状体功能(paginate)来处理这个问题。

但正如我所看到的，您只是在one request中发送所有的记录，并且相信这根本不是一个好的实践。

修复

你写道：

if (response.count < 10)

它处理0-9项，如果要隐藏在10项上，可以：

if (response.count =< 10)

如果您发送数据块，它将是一个真正的分页。具有属性，如总计、page_number、.

它可以简单地使用拉拉分页：

return DB::table('jobs')->where('job_status',1)->orderBy('id','DESC')->paginate();

从请求中获取page_number。

正如Laravel建议的那样，您可以从next_page_url获取下一个页面url并更改next按钮：

$("#seeMore").attr("href",next_page_url);