検索結果を維持したままsortableを使ってソートさせたい

実現したいこと

リストから条件で絞り込みをした後に、検索結果を維持したままsortableを使ってソートさせたいです。現状ではソートボタンを押すとリロードしてしまって全てのリストがまた表示されます。

発生している問題・分からないこと

現状ではソートボタンを押すとリロードしてしまって全てのリストがまた表示されます。

該当のソースコード

php

1<table>2 <thead>3 <tr>4 <th>id @sortablelink('id','▼')</th>5 <th>商品画像</th>6 <th>商品名@sortablelink('product_name','▼')</th>7 <th>価格@sortablelink('price','▼')</th>8 <th>在庫数@sortablelink('stock','▼')</th>9 <th>メーカー名@sortablelink('company_id','▼')</th>10 <th>11 <button class="entry-btn" onclick="location.href='{{route('entry')}}'">新規登録</button>12 </th>13 </tr>14 </thead>15 <tbody id="search-result">16 @foreach ($products as $product)17 <tr>18 <td>{{$product->id}}</td>19 <td><img src="{{asset($product->img_path)}}"></td>20 <td>{{$product->product_name}}</td>21 <td>{{$product->price}}円</td>22 <td>{{$product->stock}}</td>23 <td>{{$product->company->company_name}}</td>24 <td>25 <button class="more-btn" onclick="location.href='{{route('more',$product)}}'">詳細</button>26 27 <button class="delete-btn" data-product_id="{{$product->id}}">削除</button>28 </form>29 </td>30 </tr>31 32 @endforeach33 </tbody>34 </table>

controller

1 public function search(Request $request, Product $product) { 2 $query = Product::query(); 3 4 $companies = Company::all(); 5 6 $keyword = $request->input('keyword'); 7 $company = $request->input('company'); 8 $minPrice = $request->input('minPrice'); 9 $maxPrice = $request->input('maxPrice'); 10 $minStock = $request->input('minStock'); 11 $maxStock = $request->input('maxStock'); 12 13 if ($keyword != null) { 14 // echo "bbb"; 15 $query->where('product_name', 'LIKE', "%{$keyword}%"); 16 } 17 18 if ($company != null) { 19 20 $query->where('company_id', $company); 21 } 22 23 if ($minPrice != null) { 24 $query->where('price', '>=', $minPrice); 25 } 26 27 if ($maxPrice != null) { 28 $query->where('price', '<=', $maxPrice); 29 } 30 31 if ($minStock != null) { 32 $query->where('stock', '>=', $minStock); 33 } 34 35 if ($maxStock != null) { 36 $query->where('stock', '<=', $maxStock); 37 } 38 39 40 $products = $query->sortable()->paginate(7); 41 return response()->json(['products' => $products]); 42 } 43 44

js

1 $('.search-btn').click(function(event) {2 3 let product_name = $('#keyword').val();4 let company = $('#company').val();5 let minPrice = $('#minPrice').val();6 let maxPrice = $('#maxPrice').val();7 let minStock = $('#minStock').val();8 let maxStock = $('#maxStock').val();9 10 $.ajax({11 headers: {12 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')13 },14 url: 'search',15 type: 'GET',16 dataType: 'json',17 data: {18 keyword: product_name,19 company: company,20 minPrice: minPrice,21 maxPrice: maxPrice,22 minStock: minStock,23 maxStock: maxStock 24 }25 }).done(function(data){26 /* 通信成功時 */27 console.log('成功');28 // console.log(data.products); 29 let $result = $('#search-result');30 $result.empty(); //結果を一度クリア31 32 33 34 $.each(data.products.data, function(index, product) {35 let homeUrl = document.getElementById('homeUrl').getAttribute('data-url');36 let imageUrl = homeUrl + product.img_path;37 // console.log(homeUrl);38 let moreUrl = homeUrl + '/' + product.id + '/' + 'more';39 let companies_data=$('#myCompany').data('company');40 console.log(companies_data);41 let company_id=product.company_id - 1;42 // console.log(company_id);43 let company=companies_data[company_id];44 // console.log(company); 45 let company_name=company['company_name'];46 // console.log(company_name);47 48 let html = `49 <tr> 50 <td>${product.id}</td> 51 <td><img src="${imageUrl}"></td> 52 <td>${product.product_name}</td> 53 <td>${product.price}円</td> 54 <td>${product.stock}</td> 55 <td>${company_name}</td> 56 <td> 57 <button class="more-btn" onclick="location.href='${moreUrl}'">詳細</button> 58 <button class="delete-btn" data-product_id="${product.id}">削除</button> 59 </td> 60 </tr> 61 `;62 $result.append(html);63 64 65 $deleteEvent(data);66 67 });68 69 }).fail(function(data){70 /* 通信失敗時 */71 console.log('失敗');72 console.log(data);73 });74 });75});76

試したこと・調べたこと

上記の詳細・結果

ネットやteratailで調べてみたのですが、参考になりそうな記事を見つけられず、全く手をつけられない状態です。どなたか詳しいかた、アドバイスお願いいたします。

補足

特になし