这是我的控制器文件,我在那里通过 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');
});
}
1条答案
按热度按时间q8l4jmvw1#
假设在页面中存在过滤器,并且目标是经由 AJAX 获取过滤的数据,并且在具有分页的exting页面中显示它们。
step1:
点击过滤器按钮后, AJAX 请求被发送:step2:
在blade和controller中创建一个空间视图,使用提取的数据渲染视图,如下所示:step3:
在步骤1中,我们获取已分页的数据,并将其放置在指定的html元素中( AJAX success方法中)step4:
保存 AJAX reuqest在一个隐藏元素中发送的链接,如:此步骤在步骤1中 AJAX 成功方法中完成。
step5:
和这里点击每个分页链接后,我们必须有这个事件:filter-pagination-container
添加到分页链接的父元素中。