php 通过 AJAX 过滤产品,并在laravel中分页

mqxuamgl  于 2022-12-10  发布在  PHP
关注(0)|答案(1)|浏览(98)

这是我的控制器文件,我在那里通过 AJAX 获得数据现在分页是不工作它抛出整个页面

public function Pricerange(Request $Request)
{
    $price_range = $Request->p;
    $category_id = $Request->id;
    $proArr = explode(":",$price_range);
    $products = DB::table('products')
                  ->where('products.category_id',$category_id)
                  ->where('Price', '>=',$proArr[0])
                  ->where('Price','<=',$proArr[1])
                  ->join('product_images', 'product_images.product_id', 'products.id')
                  ->join('categories', 'categories.id', 'products.category_id')
                  ->select('product_id', 'image', 'Product_name', 'Price')
                  ->groupby('product_id')  
                  ->paginate(3);                   
       
    if ($Request->ajax()) {    
        return view('Frontend.procat2', compact('products'));
    }
    return view('Frontend.Category_wise_product',compact('products'));
}

这是我 AJAX 请求,我使用ajax获取请求,其中var p将给予我filter price last_segment give current id然后我将其发送到提到的控制器,但我不能通过点击第2页来分页,这是抛出整个页面。

$(".slider-track").click(function(){
        var p = $(".tooltip-inner").text();
        var full_url = document.URL; // Get current url
        var url_array = full_url.split('/'); // Split the string into an array with / as separator
        var last_segment = url_array[url_array.length-1];  // Get the last part of the array (-1)
        $.ajax({
            type:'get',
            dataType:'html',
            url:'{{url('ajaxdata')}}',
            data:{p:p , id : last_segment},
        }).done(function(data) {
            $("#tag_container").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError) {
              alert('No response from server');
        });

    });

    $(window).on('hashchange', function() {
        if (window.location.hash) {
            var page = window.location.hash.replace('#', '');

            if (page == Number.NaN || page <= 0) {
                return false;
            } else {
                getData(page);
            }
        }
    });
    
    $(document).ready(function() {
        $(document).on('click', '.pagination a',function(event) {
            event.preventDefault();
            $('li').removeClass('active');
            $(this).parent('li').addClass('active');
  
            var myurl = $(this).attr('href');
            var page=$(this).attr('href').split('page=')[1];
  
            getData(page);
        });
  
    });
  
    function getData(page){
        $.ajax({
            url: '?page=' + page,
            type: "get",
            datatype: "html",
        }).done(function(data) {
            $("#tag_container").empty().html(data);
            location.hash = page;
        }).fail(function(jqXHR, ajaxOptions, thrownError) {
              alert('No response from server');
        });
    }
q8l4jmvw

q8l4jmvw1#

假设在页面中存在过滤器,并且目标是经由 AJAX 获取过滤的数据,并且在具有分页的exting页面中显示它们。
step1:点击过滤器按钮后, AJAX 请求被发送:

$(document).on('click', '#filter-btn', function(){
     let finalUrl = "/yourUrl" + "?param1=param1Value";
     $.ajax({
           type: 'get',
           url: finalUrl,
           success: function (data) {

                 //--- place fetched data to specified element ---//
                 $('.all-orders-container').html(data);

                 //---- save requested url to a hidden element for later use ---//
                 let el = document.getElementById("prev-url");
                 el.setAttribute("data-url", finalUrl);    
           },
           error: function (err) {
               console.log(err)
            }
      });
});

step2:在blade和controller中创建一个空间视图,使用提取的数据渲染视图,如下所示:

public function filteredDataMethod(Request $request)
{
   $param1 = is_null($request->query('param1');  
   $result = // find data based on param1
   return view('path to partial blade view', compact('result'))->render();
}

step3:在步骤1中,我们获取已分页的数据,并将其放置在指定的html元素中( AJAX success方法中)
step4:保存 AJAX reuqest在一个隐藏元素中发送的链接,如:

<p class="d-none"  id="prev-url" data-url=""></p>

此步骤在步骤1中 AJAX 成功方法中完成。
step5:和这里点击每个分页链接后,我们必须有这个事件:

$(document).on('click', '.filter-pagination-container ul li', function(e){
  e.preventDefault();
  let url = $(this).find('a.page-link').attr('href');
  let page = url.split("page=")[1];
  let mainUrl = $('#prev-url').attr('data-url');
  let finalUrl = mainUrl + '&page=' + page;

  $.ajax({
     type: 'GET',
     url: finalUrl,
     success: function (data) {
         $('.all-orders-container').html(data);
     },
     error: function (err) {
         console.log(err)
     }
   });
});
  • 请注意,在创建局部视图时,我们将类filter-pagination-container添加到分页链接的父元素中。

相关问题