2016-06-07 103 views
2

他目前正在研究必須過濾表中數據的代碼。 Ajax將調用鏈接並獲得答案(json)結果。但是,我遇到了一個問題。我必須以某種方式呈現表格,並且我不想通過追加等來執行此操作。Laravel在ajax之後刷新數據

我可以以某種方式再次生成視圖或刀片文件嗎?

默認視圖是DefController @ index,但ajax使用URL,其中控制器是DefController @ gettabledata。

public function gettabledata($id){ 

    return response()->json(Def::find($id)->getallmy->all()); 

} 

回答

3

你可以把部分對應的表模板在一個單獨的.blade.php文件,@include在主佈局。

main.blade.php

<html> 
... 
<body> 
    <div class="table-container"> 
    @include('table') 
    </div> 
</body> 
... 

而且

table.blade.php

<table> 
    @foreach($rows as $row) 
    <tr> 
     <td> $row->title ... </td> 
    </tr> 
    @endforeach 
</table> 

通過這種方式,你可以用一個簡單的jQuery $('div.table-container').load(url)和你的服務器上只呈現,並回應說,部分爲html串。 return view('table', $data)

的Javascript:

function refreshTable() { 
    $('div.table-container').fadeOut(); 
    $('div.table-container').load(url, function() { 
     $('div.table-container').fadeIn(); 
    }); 
} 
+0

可以使用$ .ajax或$ .get或更多來擴展?當然,我想添加一個微調。但大多數情況下,他想成爲擴展,這可能是一個不好的方法。 – bradley546994

+0

這是要走的路,但是你應該用JSON返回一個呈現的視圖:'$ html = view('partials.table',$ data) - > render(); return response() - > json(compact('html'));'。 – JasonK

+0

@JasonK然後我不能使用'jQuery.load()'! – Webinan

5

答案是肯定的,你可以。 Webinan當然向您指出了正確的方向。這種方法稍有不同。

首先,您需要一個單獨的表格視圖。對於HTML標記一個很簡單的例子:var $request = $.get('www.app.com/endpoint');

<div class="table-container"> 
    @include('partials.table') // this view will be async loaded 
</div> 

我們通過調用與jQuery的服務器(可以用JavaScript做太)使用shorthand ajax function開始。您也可以將任何數據傳遞給後端的控制器。

現在在服務器端,你的控制器中,渲染和返回表格視圖:

class EndpointController extends Controller 
{ 
    /** 
    * Returns a rendered table view in JSON format. 
    * 
    * @param Request $request 
    * @return \Illuminate\Http\JsonResponse 
    */ 
    public function ajax(Request $request) 
    { 
     $html = view('partials.table', compact('view'))->render(); 

     return response()->json(compact('html')); 
    } 
} 

如果一切工作中,done回調將被觸發。只需抓取html變量並將其設置爲表格容器的內容即可。

function renderTable() { 
    var $request = $.get('www.app.com/endpoint'); // make request 
    var $container = $('.table-container'); 

    $container.addClass('loading'); // add loading class (optional) 

    $request.done(function(data) { // success 
     $container.html(data.html); 
    }); 
    $request.always(function() { 
     $container.removeClass('loading'); 
    }); 
} 

希望這有助於!

0

要更新和更改網頁內容,而無需重新加載頁面的Laravel 5.4 i執行以下操作:

首先在被稱爲「意見」文件夾中創建刀片視圖「container.blade.php」將包含以下代碼(在這種情況下從包裝保鏢渲染能力的名單(但你可以使用@foreach上任何你喜歡的Laravel集合)選擇框:

<select> 
    {{ $abilityList = Bouncer::role()::where('name','admin')->first()->getAbilities()->pluck('name') }} 
    @foreach ($abilityList as $ab) 
     <option value="{{ $ab }}">{{ $ab }}</option> 
    @endforeach 
</select> 

一下添加到您主刀文件(如home.blade。PHP)確保使用一個div一個id,你可以參考一下:

<div id="abilityListContainer"> 
    @include('container') 
</div> 

現在你的主刀文件(如home.blade.php)添加一個按鈕,將觸發將與Laravel通訊功能控制器:

<input type="button" value="reload abilities" onClick="reloadAbilities()"></input> 

然後添加JavaScript來此函數加載生成HTML到您的div容器(注意旁邊的「不用彷徨」中的「/更新能力」路線 - 這是一個Laravel路線,我們將設置在下一步中):

var reloadAbilities = function() 
    { 
     var $request = $.get('/updateAbility', {value: "optional_variable"}, function(result) 
       { 
        //callback function once server has complete request 
        $('#abilityListContainer').html(result.html); 
       }); 
    } 

現在我們爲這個動作設置Laravel路由,它引用我們的控制器並調用函數「updateAbilityContainer」。所以編輯/路由/網絡/ php文件有以下途徑:

Route::get('updateAbility', array('as'=> 'updateAbility', 'uses'=>'[email protected]')); 

最後在app/HTTP /控制器使文件「abilityController.php」(你也可以使用「PHP工匠製作:控制器abilityController 「)。現在,添加這個函數來處理的變化,生成HTML,並將其返回給JavaScript函數(注意,您可能還需要使用的命名空間以及):

namespace App\Http\Controllers;  

    use Illuminate\Http\Request; 
    use Illuminate\Support\Facades\Input; 

class AbilityController extends Controller 
{ 
    public function updateAbilityContainer() 
     { 
      // use this if you need to retrieve your variable 
      $request = Input::get('value'); 

      //render and return the 'container' blade view 
      $html = view('container', compact('view'))->render(); 

      return response()->json(compact('html')); 
     } 
} 

完蛋了,你的刀「容器」將現點擊按鈕時重新加載,並且對正在渲染的集合所做的任何更改都應該更新,而無需重新加載頁面。

希望這會填補其他答案中留下的一些空白。我希望這個對你有用。