Question

我有一个应用程序，我必须根据从选择框中选择的项目过滤数据（见图）。我可以显示数据而无需重新加载吗？我加入了jquery。

！[从选择框中选择项目相应的项目列在表格或div] [1]

路由到初始页面加载。

public function listCampaign()
{        
    $list1s = List1::orderBy('id', 'desc')->get();
    $this->layout->title = "Listing Campaigns";
    $this->layout->main = View::make('dash')->nest('content', 'campaigns.list', compact('list1s'));
    $campaigns = Campaign::orderBy('id', 'desc')->where('user_id','=',Auth::user()->id)->paginate(10);
    Session::put('slist', $list1s);
    View::share('campaigns', $campaigns);

}

在这里，我将list1s和广告系列分享给视图（它正常运行）。

我的刀片是list.blade.php

   <h2 class="comment-listings">Campaign listings</h2><hr>
   <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
    <th>Select a List:</th>

    <th>

       <form method="post">
        <select class="form-control input" name="list1s" id="list1s" onchange="postdata()" >
        <option selected disabled>Please select one option</option>
        @foreach($list1s as $list1)

            <option value="{{$list1->id}}">{{$list1->name}}</option>
        @endforeach
        </select>
         </form> 

        </th>
  </tr>
</thead>
</table>
<table>
<thead>

<tr>
    <th>Campaign title</th>        
    <th>Status</th>
    <th>Delete</th> 
 </tr>
  </thead>
 <div id="campaign">
 <tbody>
  @foreach($campaigns as $campaign)
 <tr>
    <td>{{{$campaign->template->title}}}</td>                
    <td>

        {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
        {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
        {{Form::close()}}
    </td>
    <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}  </td>

</tr>
@endforeach

</tbody>
</div>
</table>


  <script>
   function postdata(data) {
       $.post("{{ URL::to('campaigns/get') }}", { input:data }, function(returned){
       $('.campaign').html(returned);
       });
    }   
   </script>
   {{$campaigns->links()}}

在选择更改时，会调用URL campaign / get。

URL的路由如下所示

public function getCampaigns()
{

$list1 = Input::get('input');
$campaigns = Campaign::where('list1_id','=', $list1)->paginate(10);
return View::make('campaigns.list', compact('campaigns'));

}

这里传递了POST ... // localhost / lemmeknw / public / campaigns / get但视图没有变化，它在浏览器控制台中显示404错误。

Route::post('/campaigns/get', ['as' => 'campaign.get', 'uses' => 'CampaignController@getCampaigns']);

此路线无效。

我完全错了吗？任何解决方案？

Answer 1

您可以使用view make

return View::make('Your view Path')->with('campaigns', $campaigns);

Answer 2

我编辑了我的代码，并且成功了。

刀片

<h2 class="comment-listings">Campaign listings</h2><hr>
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
    <tr>
        <th>Select a List:</th>
        
        <th>
           <select class="form-control input" name="list1s" id="list1s" onchange="displayVals(this.value)">
            <option selected disabled>Please select a list</option>
            @foreach($list1s as $list1)
                <option value="{{$list1->id}}">{{$list1->name}}</option>
            @endforeach
            </select>
           
            </th>
      </tr>
    </thead>
</table>
    <div id="campaign">
    
    </div> 
<script>
function displayVals(data)
{
    var val = data;
    $.ajax({
    type: "POST",
    url: "get",
    data: { id : val },
        success:function(campaigns)
        {
            $("#campaign").html(campaigns);
        }
    });
}
</script>

路线

Route::any('/campaigns/get', [
    'as' => '/campaigns/get', 
    'uses' => 'CampaignController@getCampaigns'
    ]);

控制器

public function getCampaigns()
{
$list1 = Input::get('id');
$campaigns = Campaign::orderBy('id', 'desc')
->where('list1_id','=', $list1)
->where('user_id','=',Auth::user()->id)
->paginate(10);
return View::make('campaigns.ajaxShow')->with('campaigns', $campaigns);
}

我现在有一个单独的刀片（ajaxShow）在选择框中更改选项时加载。

<table>
    <thead>
    <tr>
        <th>Campaign title</th>        
        <th>Status</th>
        <th>Delete</th> 
    </tr>
    </thead>
    <tbody>
@foreach($campaigns as $campaign)
    <tr>
        <td>{{{$campaign->template->title}}}</td>                
        <td>

            {{Form::open(['route'=>['campaign.update',$campaign->id]])}}
            {{Form::select('status',['yes'=>'Running','no'=>'Stoped'],$campaign->running,['style'=>'margin-bottom:0','onchange'=>'submit()'])}}
            {{Form::close()}}
        </td>
        <td>{{HTML::linkRoute('campaign.delete','Delete',$campaign->id)}}</td>
    </tr>
    @endforeach
</tbody>
</table>
{{$campaigns->links()}}

Answer 3

正如我所读到的，您可以直接从方法中访问数据集合，

dd（json_decode（json_encode（Products :: paginate（5）），true））;

并访问代码返回的数组集合....这是我找到http://www.tagipuru.xyz/2016/05/17/displaying-data-using-laravel-pagination-in-the-html-table-without-page-reload/

的好例子

如何使用Ajax加载过滤数据，而无需在laravel中重新加载整个页面

3 个答案: