Laravel - 与 Datatables.js 和 Yajra 包的多对多关系

Question

我需要一些帮助。

我有两个模型，Country 和 Buy，它们之间有 Many to many relationship。我正在使用 Yajra 包的Laravel Datatables 来显示所有国家和购买的表格。

国家

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

buy_country

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 包，我该怎么做？

Answer 1

对于这种情况，我认为您应该使用 yajra 数据表在表格行中填充子项。

您可以使用 jquery Datatables Child Rows 并使用 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');
        }


});