Squeak.ru - шаблоны программирования

Laravel — отношения «многие ко многим» с пакетом Datatables.js и Yajra

Мне нужна помощь, пожалуйста.

У меня есть две модели, Country и Buy, с Many to many relationship между ними. Я использую пакет Laravel Datatables от Yajra для отображения таблица всех стран и покупок.

Страны

Schema::create('countries', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->timestamps();
});

Покупки

Schema::create('buys', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name');
    $table->integer('code_one');
    $table->integer('code_two');
    $table->timestamps();
});

страна_покупки

Schema::create('buy_country', function (Blueprint $table) {
    $table->increments('id');
    $table->integer('buy_id');
    $table->integer('country_id');
    $table->timestamps();
});

Модели

class Country extends Model
{
    public function buys(){
        return $this->belongsToMany('App\Buy', 'buy_country');
    }
}

class Buy extends Model
{
    public function countries(){
        return $this->belongsToMany('App\Country', 'buy_country');
    }
}

Я хочу отображать название страны в первой строке и продукты из таблицы покупок в дочерних строках.

введите здесь описание изображения

Как я могу это сделать, с пакетом Yajra или без него?


  • Вы читали это в его документации? здесь 04.11.2016

Ответы:


1

В этом случае я думаю, что вы должны использовать таблицы данных yajra для заполнения дочерних строк в таблицах.

Вы можете использовать дочерние строки jquery Datatables и использовать ajax для заполнения данных под ним. Взято отсюда: https://datatables.net/examples/api/row_details.html

HTML-код:

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>  <!-- Left the head blank for plus icon -->
            <th>Country Name</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th></th> <!-- Left the footer blank for plus icon -->
            <th>Country Name</th>
        </tr>
    </tfoot>
</table>

Часть таблиц данных jQuery:

table = $('#example').DataTable({
    processing: true,
    serverSide: true,
    "order": [[ 2, "asc" ]],   
    columns: [
        {
            "className":      'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": '',
            'render': function (){
                return "<i class='fa fa-plus-circle'></i>";
            }
        },
        { //Hiding column country id for sorting purpose
            "data": "country_id",
            "searchable": false,
            "orderable": true,
            "visible": false,
        },
        { data: 'country_name', name: 'country_name' }
    ],
    ajax: function (data, callback, settings) {
        settings.jqXHR = $.ajax( {
            "dataType": 'json',
            "url": "URL",   // Link to Select All from from country
            "type": "GET",
            "data": data,
            "success": callback,
            "error": function (e) {
                console.log(e.message);
            }

        });
    }

});

function format ( d ) {
    // `d` is the original data object for the row
    // This is when you populate data from buy table
    var childContent = '';

    $.ajax({
        url: "URL",  //URL to select from buy_country using country_id and get data from buy (use join table)
        data: {country_id: d.country_id},
        type:'POST',
        dataType: "json"
        success: function( data ) { 

            childContent += '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' ;

            $.each(data, function (i, elem) {                    

                childContent += '<tr>';
                childContent += '<td>'+elem.name+'</td>';
                childContent += '<td>'+elem.code1+'</td>';
                childContent += '<td>'+elem.code2+'</td>';
                childContent += '</tr>';


            });

            childContent += '</table>';

        }
    });

    return childContent;

}

$('#example tbody').on('click', 'tr.even, tr.odd', function (e) {

        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            // This row is already open - close it
            $(this).find('td:first-child i').removeClass("fa fa-minus-circle");
            $(this).find('td:first-child i').addClass("fa fa-plus-circle");  
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            $(this).find('td:first-child i').removeClass("fa fa-plus-circle");
            $(this).find('td:first-child i').addClass("fa fa-minus-circle");
            row.child( format(row.data()) ).show();  //When open run formt() function.
            tr.addClass('shown');
        }


});
04.11.2016
Новые материалы

Угловая структура архитектуры
Обратите внимание, что эта статья устарела, я решил создать новую с лучшей структурой и с учетом автономных компонентов: https://medium.com/@marekpanti/angular-standalone-architecture-b645edd0d54a..

«Данные, которые большинство людей используют для обучения своих моделей искусственного интеллекта, поставляются со встроенным…
Первоначально опубликовано HalkTalks: https://hacktown.com.br/blog/blog/os-dados-que-a-maioria-das-pessoas-usa-para-treinar-seus-modelos-de-inteligencia-artificial- ja-vem-com-um-vies-embutido/..

Сильный ИИ против слабого ИИ: различия парадигм искусственного интеллекта
В последние годы изучению и развитию искусственного интеллекта (ИИ) уделяется большое внимание и прогресс. Сильный ИИ и Слабый ИИ — две основные парадигмы в области искусственного интеллекта...

Правильный способ добавить Firebase в ваш проект React с помощью React Hooks
React + Firebase - это мощная комбинация для быстрого и безопасного создания приложений, от проверки концепции до массового производства. Раньше (знаете, несколько месяцев назад) добавление..

Создайте API с помощью Python FastAPI
Создание API с помощью Python становится очень простым при использовании пакета FastAPI. После установки и импорта вы можете создать приложение FastAPI и указать несколько конечных точек. Каждой..

Веселье с прокси-сервером JavaScript
Прокси-серверы JavaScript — это чистый сахар, если вы хотите создать некоторую общую логику в своих приложениях, чтобы облегчить себе жизнь. Вот один пример: Связь клиент-сервер Мы..

Получить бесплатный хостинг для разработчиков | Разместите свой сайт за несколько шагов 🔥
Статические веб-сайты — это веб-страницы с фиксированным содержанием и его постоянным содержанием. Но теперь статические сайты также обрабатывают динамические данные с помощью API и запросов...