laravel ajaxにてページネーションの更新を行いたい
解決したいこと
ajaxにて検索を行った後に、ページネーションの更新を行いたい。
発生している問題・エラー
・ajax通信後、viewのページネーションの書き換えを行った。
→文字列として記載されてしまう。
該当するソースコード
product.js
$(function() {
$('#btn-search').click(function(event) {
event.preventDefault();
//検索値取得
var keyword = $('#keyword').val();
var company_id = $('#company_id').val();
var price_min = $('#price_min').val();
var price_max = $('#price_max').val();
var stock_min = $('#stock_min').val();
var stock_max = $('#stock_max').val();
var url = "/product/public/search" + "?keyword=" + keyword + "&company_id=" + company_id + "&price_min=" + price_min + "&price_max=" + price_max + "&stock_min=" + stock_min + "&stock_max=" + stock_max;
if(!price_min){
price_min = 0;
};
if(!stock_min){
stock_min = 0;
};
//通信開始
$.ajax({
type:"get",
url:url,
data: {
'keyword': keyword,
'company_id': company_id,
'price_min': price_min,
'price_max': price_max,
'stock_min': stock_min,
'stock_max': stock_max,
},
dataType: 'json',
})
.done(function (data){
// 取得成功
console.log(data);
var page = data.pager;
var data = data.products.data
var html = '';
//一覧表示リセット
var $result = $('#addlist');
var $page = $('#addpage');
$result.empty();
console.log(page);
//検索結果更新
$.each(data, function(data, value) {
var id = value.id;
var name = value.product_name;
var img = "http://localhost:8888/product/public" + value.img_path;
var price = value.price;
var stock = value.stock;
var company_name = value.company_name;
//更新データ表示
html = `
<tr id="${id}">
<td>${id}</td>
<td><img src=${img} class="img_list"></td>
<td>${name}</td>
<td>¥${price}</td>
<td>${stock}</td>
<td>${company_name}</td>
<td class="btn-show-del">
<a href="{{ route('product.show', ['id'=>$value->id] ) }}" class="btn btn-info">詳細</a>
<form action="{{ route('product.delete', ['id'=>$value->id]) }}" method="POST">
<button type="submit" class="btn btn-danger btn-del" value="${id}">削除</button>
</form>
</td>
</tr>
`
$result.append(html);
html = `{{ ${page}->links('vendor.pagination.bootstrap-4') }}`
$page.append(html);
})
})
//通信が失敗したとき
.fail(function (jqXHR, textStatus, errorThrown) {
// 通信失敗時の処理
console.log("ajax通信に失敗しました");
console.log("jqXHR : " + jqXHR.status); // HTTPステータスが取得
console.log("textStatus : " + textStatus); // タイムアウト、パースエラー
console.log("errorThrown : " + errorThrown.message); // 例外情報
console.log("URL : " + url);
console.log(data);
alert('ファイルの取得に失敗しました。');
});
});
});
list.blade.php
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-header top">商品一覧画面</div>
<form class="search-form" action="{{ route('search') }}" method="GET">
<!--検索ーワード-->
<div class="search">
<div class="col">
<input type="text" id="keyword" class="form-control" placeholder="検索キーワード" name="keyword">
</div>
<!--検索ー会社-->
<div class="col">
<select id="company_id" class="form-select" name="company_id">
<option value="">--未選択--</option>
@foreach($companies as $value)
<option value="{{ $value->id }}">{{ $value->company_name }}</option>
@endforeach
</select>
</div>
</div>
<!--検索ー価格-->
<div class="search">
<div class="col price_stock">
<label class="stock_peice_label" for="exampleInputEmail1">価格</label>
<input type="text" id="price_min" class="form-control" placeholder="下限" name="price_min">
<label class="stock_peice_label" for="exampleInputEmail1">～</label>
<input type="text" id="price_max" class="form-control" placeholder="上限" name="price_max">
</div>
<!--検索ー在庫数-->
<div class="col price_stock">
<label class="stock_peice_label" for="exampleInputEmail1">在庫数</label>
<input type="text" id="stock_min" class="form-control" placeholder="下限" name="price_min">
<label class="stock_peice_label" for="exampleInputEmail1">～</label>
<input type="text" id="stock_max" class="form-control" placeholder="上限" name="price_max">
</div>
</div>
<!--ソート プルダウン-->
<div class="option">
<!--検索ーボタン-->
<div class="col col1">
<button type="submit" id="btn-search" class="btn btn-outline-secondary">検索</button>
<a id="btn-clear" class="btn btn-outline-secondary">クリア</a>
</div>
</div>
</form>
<!--テーブル一覧-->
<div class="card border border-2 border-subtle">
<div class="car-body">
<table class="table table-striped">
<thead class="table-light">
<tr>
<th>@sortablelink('id', 'ID')</th>
<th>商品画像</th>
<th>@sortablelink('product_name', '名前')</th>
<th>@sortablelink('price', '価格')</th>
<th>@sortablelink('stock', '在庫')</th>
<th>@sortablelink('company_name', '会社名')</th>
<th><a href="{{ route('create.show') }}" class="btn btn-warning">新規登録</a></th>
</tr>
</thead>
<tbody id="addlist">
@foreach($products as $value)
<tr id="{{ $value->id }}">
<td>{{ $value->id }}</td>
<td><img src="{{ asset($value->img_path) }}" class="img_list"></td>
<td>{{ $value->product_name }}</td>
<td>¥{{ $value->price }}</td>
<td>{{ $value->stock }}</td>
<td>{{ $value->company_name }}</td>
<td class="btn-show-del">
<a href="{{ route('product.show', ['id'=>$value->id] ) }}" class="btn btn-info">詳細</a>
<form action="{{ route('product.delete', ['id'=>$value->id]) }}" method="POST">
@csrf
<input data-user_id="{{$value->id}}" type="submit" class="btn btn-danger btn-del" value="削除">
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
<div id="addpage">
{{ $pager->links('vendor.pagination.bootstrap-4') }}
</div>
</div>
自分で試したこと
・bootstrapのリンク先を直接書き換える→反映されなかった。
ajaxにてページネーションのリンク先を更新するには、ページリンクを使用する方法はないのでしょうか？
解決の糸口が見つからず、質問を行わせていただきます。
0
