2016-09-28 40 views
2

我與我的Laravel安裝程序有一些衝突的問題,特別是分頁和產品過濾器。Laravel jQuery - 分頁和產品過濾器,分頁URL

分頁和產品過濾器都通過jQuery處理,因此頁面不會完全刷新。

這是我的jQuery分頁代碼,使用標準的Laravel - >分頁功能。

$(function() { 
     $('body').on('click', '.pagination a', function(e) { 
      e.preventDefault(); 
      var url = $(this).attr('href'); 
      var page_number = $(this).attr('href').split('page=')[1]; 
      getProducts(page_number); 
      window.history.pushState("", "", url); 
     }); 
     function getProducts(page_number) { 
      $.ajax({ 
       url : '?page=' + page_number 
      }).done(function (data) { 
       $('.devices-holder').html(data); 
      }).fail(function() { 
       alert('Data could not be loaded.'); 
      }); 
     } 
    }); 

這很好,問題是當我們過濾產品,然後嘗試去篩選結果的另一頁。

剛剛過濾後,分頁鏈接正確,例如/ devices/filter?filter = 1 & page2,但是在點擊此頁面時會加載所有沒有過濾器的設備,即使我複製該網址並加載該頁面,它成功進入第2頁,包含過濾器。

然後,分頁URL是完全忽略過濾器後,是/設備? & page = 2。我想這一定是我的渲染和附加在視圖中PAGINATE鏈接做的,但我不確定我在做什麼錯:

{!! $devices->appends(Input::all())->render() !!} 

這是我的控制器:

public function devicesByFilter(Request $request) { 

    $type = 'devices'; 

    $types = Input::get('types'); 

    $devices = Device::where('type', '=', $type)->where('approved', '=', 1); 

    if(!empty($types)) { 
     $url = 'filter'; 
     $check = 0; 
     foreach($types as $deviceType) { 
      if($check == 0) { 
       $devices = $devices->where('device_type', 'LIKE', $deviceType); 
      } else { 
       $devices = $devices->orWhere('device_type', 'LIKE', $deviceType); 
      } 
      $url = $url.'&types%5B%5D='.$deviceType; 
      $check++; 
     } 
    } 
    $devices = $devices->orderBy('match_order', 'asc')->paginate(10); 

    $devices->setPath('filter'); 

    if ($request->ajax()) { 
     return view('devices.ajax.loadfilter', ['devices' => $devices, 'type' => $type, 'types' => $types])->render(); 
    } 

    return View::make('devices.all', compact('devices', 'type')); 
} 

這是我的過濾器jQuery代碼:

$(document).ready(function() { 

var types = []; 

// Listen for 'change' event, so this triggers when the user clicks on the checkboxes labels 
$('input[name="type[]"]').on('change', function (e) { 


    e.preventDefault(); 
    types = []; // reset 
    if (document.location.href.indexOf('filter') > -1) { 
     var url = '../devices/filter?type=device'; 
    } else { 
     var url = 'devices/filter?type=device'; 
    } 

    $('input[name="type[]"]:checked').each(function() 
    { 
     types.push($(this).val()); 
     url = url+'&types%5B%5D='+$(this).val(); 
    }); 

    if (document.location.href.indexOf('filter') > -1) { 
     $.get('../devices/filter', {type: 'devices', types: types}, function(markup) 
     { 
      $('.devices-holder').html(markup); 
     }); 
    } else { 
     $.get('devices/filter', {type: 'devices', types: types}, function(markup) 
     { 
      $('.devices-holder').html(markup); 
     }); 
    } 
    window.history.pushState("", "", url); 
}); 

});

因此,在一個貧窮的企圖澄清:

  • 分頁jQuery的完美的作品

  • 過濾完美的作品

  • 試圖過濾顯示所有設備不只是過濾後去另一頁即使URL是正確的,並且如果我在另一個選項卡上再次加載此URL,它也會得到正確的結果。

  • 嘗試轉到另一個篩選結果頁面後,分頁鏈接缺少附加輸入。

從這裏開始調試很困難,任何能指向正確方向或嘗試/測試的人都會很棒。

回答

0

通過改變

$(function() { 
    $('body').on('click', '.pagination a', function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     var page_number = $(this).attr('href').split('page=')[1]; 
     getProducts(page_number); 
     window.history.pushState("", "", url); 
    }); 
    function getProducts(page_number) { 
     $.ajax({ 
      url : '?page=' + page_number 
     }).done(function (data) { 
      $('.devices-holder').html(data); 
     }).fail(function() { 
      alert('Data could not be loaded.'); 
     }); 
    } 
}); 

$(function() { 
    $('body').on('click', '.pagination a', function(e) { 
     e.preventDefault(); 
     var url = $(this).attr('href'); 
     getProducts(url); 
     window.history.pushState("", "", url); 
    }); 
    function getProducts(url) { 
     $.ajax({ 
      url : url 
     }).done(function (data) { 
      $('.devices-holder').html(data); 
     }).fail(function() { 
      alert('Data could not be loaded.'); 
     }); 
    } 
}); 
固定它