title: Laravel - Yajra Datatable sorting and searching for relationship column
body: <p>I am struggling to make sorting and searching for working on the relationship columns in Laravel/<a href="https://yajrabox.com/docs/laravel-datatables/master/relationships" rel="nofollow noreferrer">Yajra Datatables</a>.</p>
  
  <p>I have a <code>Metro</code> model that has a relationship with <code>Station</code>. Here is my code.</p>
  
  <h1>metros table columns</h1>
  
  <pre><code>id, name, number, origin_id, destination_id, created_at, updated_at
  </code></pre>
  
  <h1>stations table columns</h1>
  
  <pre><code>id, name, code, info, photo, created_at, updated_at
  </code></pre>
  
  <h1>Metro Model</h1>
  
  <pre><code>/**
   * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
   */
  public function origin()
  {
      return $this-&gt;belongsTo(Station::class, 'origin_id');
  }
  
  /**
   * @return \Illuminate\Database\Eloquent\Relations\BelongsTo
   */
  public function destination()
  {
      return $this-&gt;belongsTo(Station::class, 'destination_id');
  }
  </code></pre>
  
  <h1>MetroController JSON</h1>
  
  <pre><code>/**
   * DataTable json data request
   *
   * @param \App\Metro $metro
   *
   * @return mixed
   * @throws \Exception
   */
  public function jsonData(Metro $metro)
  {
      return DataTables::of($metro::select('id', 'name', 'number', 'origin_id', 'destination_id', 'created_at', 'updated_at'))
                       -&gt;addColumn('action', function ($metro) {
  
                           $show    = route('admin.metros.show', $metro);
                           $edit    = route('admin.metros.edit', $metro);
                           $destroy = route('admin.metros.destroy', $metro);
                           $attr    = 'onclick=metroDelete(' . $metro-&gt;id . ')';
  
                           return view('admin.components.action', compact([
                               'show',
                               'edit',
                               'destroy',
                               'attr',
                           ]));
  
                       })
                       -&gt;editColumn('origin_id', function ($metro) {
                           return '&lt;a href="'.route('admin.stations.show', $metro-&gt;origin-&gt;id).'"&gt;' . $metro-&gt;origin-&gt;name . '&lt;/a&gt;';
                       })
                       -&gt;editColumn('destination_id', function ($metro) {
                           return '&lt;a href="'.route('admin.stations.show', $metro-&gt;destination-&gt;id).'"&gt;' . $metro-&gt;destination-&gt;name . '&lt;/a&gt;';
                       })
                       -&gt;editColumn('created_at', function ($metro) {
                           return $metro-&gt;created_at-&gt;diffForHumans();
                       })
                       -&gt;escapeColumns([])
                       -&gt;make(TRUE);
  }
  </code></pre>
  
  <h1>View - Javascript</h1>
  
  <pre><code>$(document).ready(function () {
  
      let metroDataTable = $('#metroDataTable');
  
      metroDataTable.DataTable({
          serverSide  : true,
          processing  : true,
          autoWidth   : false,
          ajax        : '{!! route('admin.metros.json') !!}',
          lengthMenu  : [[25, 50, 75, 100, -1], [25, 50, 75, 100, "All"]],
          columns     : [
              {data: 'id', name: '{{__('admin.metro.id')}}', width: '50px'},
              {data: 'name', name: '{{__('admin.metro.name')}}', width: '100px'},
              {data: 'number', name: '{{__('admin.metro.number')}}', width: '100px'},
              {data: 'origin_id', name: '{{__('admin.metro.origin')}}', width: '200px'},
              {data: 'destination_id', name: '{{__('admin.metro.destination')}}', width: '200px'},
              {data: 'created_at', name: 'created_at'},
              {
                  data      : 'action',
                  name      : '{{__('admin.action')}}',
                  orderable : false,
                  searchable: false,
                  className : 'text-center'
              },
          ],
          initComplete: function () {
              this.api().columns().every(function () {
                  var column = this;
                  var input  = document.createElement("input");
                  $(input).appendTo($(column.footer()).empty())
                      .on('change', function () {
                          column.search($(this).val(), false, false, true).draw();
                      });
              });
          }
  
      }); // end of DataTables
  
  }); // end of jQuery Document
  </code></pre>
  
  <p>When I try to sort the <code>Origin</code> or <code>Destination</code> column or search for the column it is giving me the following error.</p>
  
  <p><a href="https://i.stack.imgur.com/baU89.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/baU89.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p><strong>Question:</strong></p>
    
    <p>How can I make 'origin<code>and</code>destination` columns sortable and searchable?</p>
  </blockquote>