Question

在开始之前让我说我在这个和其他论坛上看到了许多与我的问题相关的链接，但我似乎无法解决。所以我的问题是我有一个视图页面，其中加载了开始记录。现在我还有大约4到5个输入字段来搜索并在同一页面上显示结果。我正在使用jquery。现在我的问题是在页面加载时有一些默认数据与分页链接一起填充因此当我使用jquery搜索分页链接仍然存在并且它没有根据我返回的结果更新。下面我给出了我目前正在使用的代码首先是查看页面

<table class="table table-bordered table-striped table-hover table-condensed table-responsive display" id="industry_list">
                  <thead>
                    <tr>
                      <th scope="col">Sl.No.</th>
                      <th scope="col">Prop Name</th>
                      <th scope="col">Industry Name</th>
                      <th scope="col">Industry Address</th>
                      <th scope="col">Contact</th>
                      <th scope="col">District</th>
                      <th scope="col">Industry Category</th>
                      <th scope="col">Action</th>
                    </tr>
                  </thead>
                  <tbody>
                    <?php $i=1; ?>
                    @foreach($industries as $industry)
                        <tr class="success">
                          <th scope="row">{{$i++}}</th>
                          <td class="info">{{$industry->prop_fname}} &nbsp; {{$industry->prop_lname}}</td>
                          <td class="info">{{$industry->industry_name}}</td>
                          <td class="info">{{$industry->industry_address}}</td>
                          <td class="info">{{$industry->contact}}</td>
                          <td class="info">{{$industry->district}}</td>
                          <td class="info">{{$industry->category}}</td>
                          <td class="info">
                            <a href="#" class="edit_industry" data-id="{{$industry->industry_id}}" >
                              <i class="fas fa-pen-square"></i>
                              EDIT
                            </a>
                          </td>
                        </tr>
                    @endforeach
                  </tbody>
                   <tfoot>
                     <tr>
                       <td colspan="8">{{ $industries->render() }}</td>
                     </tr>
                   </tfoot>
                </table>

现在用于填充页面加载的控制器代码

public function search() {
    $user = Auth::user();
    $industries = IndustryAction::paginate(5);
    return view('search', compact('user', 'industries'));
}

以下是jquery为搜索

调用的方法

public function searchIndustry(Request $request){

    if($request->ajax()){
        $output = "";
        $i=1;

        if($request->query_category == 'industry_name') {
            $industries_name = DB::table('industries')->where('industry_name', 'LIKE','%'.$request->query_value.'%')
                               ->paginate(5);

        } else if($request->query_category == 'proprietor_name') {
            $industries_name = DB::table('industries')->where('prop_fname', 'LIKE','%'.$request->query_value.'%')
                                ->orWhere('prop_lname', 'LIKE','%'.$request->query_value.'%')->paginate(5);

        } 
        if($industries_name) {
            foreach ($industries_name as $key => $industry_name) {  
            $output .= '<tr class="success">'.
                    '<th scope="row">'.$i++.'</th>'.
                    '<td class="info">'.$industry_name->prop_fname.' &nbsp;'. $industry_name->prop_lname.'</td>'.
                    '<td class="info">'.$industry_name->industry_name.'</td>'.
                    '<td class="info">'.$industry_name->industry_address.'</td>'.
                    '<td class="info">'.$industry_name->contact.'</td>'.
                    '<td class="info">'.$industry_name->district.'</td>'.
                    '<td class="info">'.$industry_name->category.'</td>'.
                    '<td class="info"><a href="#" data-id="'.$industry_name->industry_id.'"  class="edit_industry" " >
                        <i class="fas fa-trash-alt"></i></i>EDIT</a></td>'.
                    '</tr>';    
            }

            return Response($output);
        } else {
        return Response()->json(['no'=>'No Data']);
        }
    }
}

以下是Jquery

$(document).ready(function(){    
// SEARCH QUERY ALL EXCEPT DATE
$(".search-query").on("keyup", function() {
  //$("tfoot tr td").html('');
  $value = $(this).val();
  $search_id = $(this).attr('id');
  if($search_id == 'search_industry_name') {
    $query_category = 'industry_name';
  } else if($search_id == 'search_proprietor_name') {
    $query_category = 'proprietor_name';
  } else if($search_id == 'search_address') {
    $query_category = 'industry_address';
  } else if($search_id == 'search_district') {
    $query_category = 'industry_district';
  } else if($search_id == 'search_category') {
    $query_category = 'industry_category';
  } else if($search_id == 'search_type') {
    $query_category = 'industry_type';
  }
  $.ajax({
    type: 'get',
    url: 'searchIndustry',
    data: {
        '_token':$('input[name=_token]').val(),
        'query_value':$value,
        'query_category':$query_category,
    } ,
    success:function(data){
      console.log(data);
     $('tbody').html(data);
    }   
  })      
});

因为尽管搜索功能正常，但我无法以任何方式修改或更新我的分页。 任何进行分页工作的修改都将受到赞赏

Answer 1

你总是提取相同的数据，

如果我是你，我会使用Datatables，特别是如果你在表格中显示细节......这里是Yajra Laravel Package

节省了大量的时间，并且你有很多控制权。

代码

使用此代码 resources / views / articles / load.blade.php 创建一个刀片视图

<div id="search" style="position: relative;">
@foreach($industries as $industry)
<th scope="row">{{$i++}}</th>
<td class="info">{{$industry->prop_fname}} &nbsp; {{$industry->prop_lname}}</td>
<td class="info">{{$industry->industry_name}}</td>
<td class="info">{{$industry->industry_address}}</td>
<td class="info">{{$industry->contact}}</td>
<td class="info">{{$industry->district}}</td>
<td class="info">{{$industry->category}}</td>
@endforeach
</div>
{{ $articles->links() }}

之后控制器：我在这里假设您有2种方法和2条路线：ajax（搜索）和主要（页面） //你必须在页面控制器功能中返回$ industries

  //in your ajax controller function check if it is ajax, then render

if ($request->ajax()) {
    return view('search', compact('user', 'industries'));
        return view('articles.load', ['industries' => $industries, 'user' => $user])->render();  
    }

//In your blade collect the data
  //Check if there is actually data .. the use of page function $industries variable
                @if (count($industries) > 0)
                      //your code to the show the result
                      <div class="industries">
                    @include('searchIndustry')
                      </div>
                      //rest of your code
            @endif

最后是ajax部分，其中包括分页的推送状态：

<script type="text/javascript">

$(function() {
    $('body').on('click', '.pagination a', function(e) {
        e.preventDefault();

        $('#search a').css('color', '#dfecf6');
        $('#search').append('<img style="position: absolute; left: 0; top: 0; z-index: 100000;" src="/images/loading.gif" />');

        var url = $(this).attr('href');  
        getArticles(url);
        window.history.pushState("", "", url);
    });

    function getArticles(url) {
        $.ajax({
            url : url  
        }).done(function (data) {
            $('.industries').html(data);  
        }).fail(function () {
            alert('something went wrong.');
        });
    }
});

</script>

here is a good example on it

and another one.

Answer 2

你做错了！ 如何？当您使用jQuery执行搜索时，您只使用<tbody>请求更新ajax内的内容，并且您的分页链接永远不会更新。

您应该使用searchIndustry()方法在其中呈现带有分页链接的完整表格视图。这样，只要您在客户端执行搜索，您的分页链接也会随您的数据一起更新。

所以你需要改变你的方法！我无法为您编写完整的代码，但我希望这些解释可以帮助您理解您的问题。

修改 正如你坚持认为，如果有这种方法的解决方案，那么这是你可以尝试的东西;

首先，您应该了解到，您只是在<tbody>内部返回HTML部分，并且<tfooter>中包含分页，因此您可能需要从控制器返回整个表格的HTML。例如，你可以在循环之后的循环和页脚部分之前添加<thead>部分。为了加载分页，您将在<footer>部分内写出类似的内容。

$output .= '<tr> <td colspan="8">'. $industries->render() .'</td> </tr>';

$industries->render()将输出HTML以进行分页。这样，当您从表的AJAX请求替换HTML时，也可以使用分页。在jQuery中，您需要替换<table> HTML而不是<tbody>。

Jquery搜索后的Laravel 5.5分页链接

2 个答案:

代码