sorting items via ajax pagination links working without its html format
When user click View All Items button it will navigate to a page with all items with pagination. Then after loading page if user click view items per drop-down and change its value items should with requested amount and also pagination links get to be changed.(If user click 20 items per page it will load 20 items with pagination links)
This is initial load
ItemController
public function allItems()
{
$items= Items::all->paginate(15);
return view('items',compact('items'));
}
This is items.blade.php
<html>
<head>
<!-- Styles goes here -->
</head>
<body>
<!-- Heading and other stuffs goes here -->
<!-- partial for data load here -->
<div id="ajaxchange">
@incude('item_data')
</div>
</body>
<script>
//When user change the per page value from the dropdown
$('body').on('change', '#changePerPage', function() {
//Get its value
var sort = $('#changePerPage').val();
$.ajax({
//Pass new value to this url
url: '/change/ajax',
method: 'GET',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
data: {
list: sort,
}
}).done(function(xhr, status, error) {
if (status === 'success') {
$('#ajaxchange').html('');
$('#ajaxchange').html(xhr);
}
}).fail(function(data) {
});
</script>
</html>
This is item_data.blade.php
@foreach ($items as $item)
<!-- Images and other stuff goes here -->
@endforeach
<!---Pagination links-->
{{ $items->links('vendor.pagination.bootstrap-4') }}
Function for ajax call in ItemController
public function show_per_page_ajax(Request $request)
{
$per_page = $request->list;
$items= Items::all->paginate($per_page);
return view('item_data', compact('items'))->render();
}
So things works as I wanted. It also generate all the pagination links too. But the problem is that when I click a pagination link it just load the next page Without its styles mean header and footer. So data views without any style. Could anyone please help me to fix this
Please or to participate in this conversation.