title: Laravel 5 dataTables, initialise table with controller function
body: <p>I'm trying to create a dataTable of users where each row has a drop-down child row that contains checkboxes of the user privileges. So quite dynamically a 'super' admin can click on users and assign their privileges within the table.</p>
  
  <p>Firstly, not sure if this is a good idea, so feel free to suggest a better way of doing it. Maybe a simple popup modal per row would be easier but for now I've decided this would be a cool way of doing it, so I push on.</p>
  
  <p>Trying to initialise the dataTable with AJAX has me stumped currently however.</p>
  
  <p><strong>PermissionsController.php</strong></p>
  
  <pre><code>public function grid()
  {
      //retrieve data from models
      $data['data'] = collect([ 'admins' =&gt; $admins, 'roles' =&gt; $roles ]);
  
          return $data;
  }
  </code></pre>
  
  <p><strong>routes.php</strong></p>
  
  <pre><code>Route::get('user-permissions', 'PermissionsController@grid');
  </code></pre>
  
  <p><strong>permissions.blade</strong></p>
  
  <pre><code>&lt;table class="table table-striped" id="admins_table" &gt;
      &lt;thead&gt;
      &lt;tr&gt;
          &lt;th&gt;Last Name&lt;/th&gt;
          &lt;th&gt;First Name&lt;/th&gt;
          &lt;th&gt;Email&lt;/th&gt;
          &lt;th&gt;Phone&lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>var oTable = $('#admins_table').dataTable( {
      "sDom": "&lt;'row'&lt;'col-md-6'l&gt;&lt;'col-md-6'f&gt;r&gt;t&lt;'row'&lt;'col-md-12'p i&gt;&gt;",
      "aaSorting": [],
      "oLanguage": {
          "sLengthMenu": "_MENU_ ",
          "sInfo": "Showing &lt;b&gt;_START_ to _END_&lt;/b&gt; of _TOTAL_ entries"
      },
      "ajax": {
         //here's where I'm trying to grab the data
         "url": "http://example.app/user-permissions", 
         "dataSrc": "data"
      },
      "columns": [
          { "data": "last_name" },
          { "data": "first_name" },
          { "data": "email" },
          { "data": "phone" }
      ]
  });
  </code></pre>
  
  <p><strong>Ajax</strong></p>
  
  <pre><code>{
  "data":
      {
      "admins":
      [{
          "id":31,
          "email":"example@gmail.com",
          "last_login":"2015-07-27 09:50:50",
          "first_name":"Gary",
          "last_name":"Barlow",
          "roles":[{
              "id":1,"slug":"admin"
          }]
      }],
  
      "roles":
      [
          {"id":3,"slug":"admin","name":"Admin"},
          {"id":7,"slug":"accounts","name":"Accounts"}, 
          {"id":8,"slug":"sales","name":"Sales"},
          {"id":9,"slug":"superAdmin","name":"SuperAdmin"}
      ]
      }
  }
  </code></pre>
  
  <p>The "admin" object encompasses all the admins that are passed through and their already assigned roles. These should appear as already ticked within the child-row.
  The "roles" object will contain all the current roles available to allow for assignment of additional roles. Basically, this identifies the number of checkboxes that need to appear.</p>
  
  <p>I've abstracted out the rest as what's above pertains to the initialisation. Greatly appreciate any help.</p>
  
  <hr>
  
  <p>Trying to use AJAX I'm getting nothing but "No data available in table" when if I type in the browser the route path I get the JSON object output.</p>
  
  <p>I'm not sure how I should call the route.</p>
  
  <pre><code>url: '/user-permissions',
  dataSrc: 'data.admins',
  success: function (data) {
      console.log(data);
  }
  </code></pre>
  
  <p>Will the above suffice? I don't really want to be calling the whole url. I even added a success function to try and get a console output of the data but still nothing.</p>