2016-06-07 4 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

Ответ: Да, вы можете. Вебинан, безусловно, указал вам в правильном направлении. Этот подход несколько отличается.

Прежде всего, вам нужно отдельное представление для стола. Очень простой пример для HTML-разметки:

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

Мы начинаем с помощью вызова к серверу с JQuery (может быть сделано с Javascript тоже), используя shorthand ajax function: var $request = $.get('www.app.com/endpoint');. Вы также можете передать любые данные вашему контроллеру на бэкэнд.

Сейчас на ServerSide, в контроллере, визуализации и вернуть вид таблицы:

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 я сделать следующее:

Сначала создайте вид лезвия в «вид» папку под названием «container.blade.php» будет содержать следующие код (в данном случае выберите поле, которое делает список способностей из пакета Bouncer (но вы можете использовать @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 с идентификатором вы можете ссылаться:

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

Теперь на вашем главном файле лезвия (например home.blade.php) добавить кнопку, которая будет запускать функцию, которая будет взаимодействовать с Laravel контроллер:

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

Затем добавить JavaScript для этой функции, это загружает сгенерированный HTML в ваш сНу контейнер (обратите внимание на «/ updateAbility» маршрут рядом с «.get» - это маршрут 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]')); 

Наконец, в приложении/Http/Контроллеры сделать файл «abilityController.php» (вы можете также использовать «PHP ремесленник грим: контроллер abilityController «). Теперь добавьте эту функцию для обработки изменений, генерировать HTML и вернуть его в яваскрипте функции (обратите внимание, вы можете также использовать пространство имен, а):

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')); 
     } 
} 

Thats это, ваше лезвие «контейнер» теперь будет перезагружайтесь, когда вы нажимаете кнопку, и любые изменения в коллекции, которую вы создаете, должны обновляться без перезагрузки страницы.

Надеюсь, это заполняет некоторые пробелы, оставленные в других ответах. Надеюсь, это сработает для вас.

Смежные вопросы