JSON showing instead of Datatable following Ajax call to Laravel Controller

Question

I’m fairly new to ajax and json and would really appreciate some help. I’m making an Ajax call to a Laravel Controller to return some fields from a database table called "subjects" and display them in a DataTable in a Laravel View. The problem is that when I open the view, what is see is JSON rather than the Datatable.

Here’s what’s returned in the view subjects/index:

{"draw":0,"recordsTotal":8,"recordsFiltered":8,"data":[{"id":"1","name":"Biology"},{"id":"3","name":"English Language"},{"id":"4","name":"Physics"},{"id":"5","name":"Chemistry"},{"id":"6","name":"Mathematics"},{"id":"7","name":"Mathematics"},{"id":"8","name":"English Language"},{"id":"9","name":"French"}],"queries":[{"query":"select count(*) as aggregate from (select '1' as `row_count` from `subjects`) count_row_table","bindings":[],"time":4.65},{"query":"select `id`, `name` from `subjects`","bindings":[],"time":0.41}],"input":[]}

Here’s the HTML in the view /subjects/index

<table id="subjects_table" class="table table-bordered" style="width:100%">
    <thead>
            <tr>
                <th>Id</th>
                <th>Subject</th>
            </tr>
                </thead>
                <tbody>

                </tbody>
        </table>

Here’s the code in the Laravel Controller:

class SubjectsController extends Controller
{
    public function index()
    {
        $subjects = Subject::select('id', 'name');
        return Datatables::of($subjects)->make(true);
   }
}

Here’s the code making the Ajax call:

$('#subjects_table').DataTable({
      "processing": true,
      "serverSide": true,
      "ajax": "{{route('subjects.index')}}",
      "columns":[
          {"data": "id"},
          {"data": "name"}
      ]
});

Here’s the route definition in web.php:

Route::get('subjects/', 'SubjectsController@index')->name('subjects.index');

Any help you can provide would be really appreciated

user10186369 · Accepted Answer · 2018-11-01 11:02:31Z

1

You should try this:

Routes

Route::get('subjects', 'SubjectsController@index')->name('subjects.index');
Route::get('getsubjects', 'SubjectsController@getSubjects')->name('subjects.get');

SubjectsController

class SubjectsController extends Controller
{
    public function index()
    {
        return view('subjects.index');
        $subjects = Subject::select('id', 'name');
        return Datatables::of($subjects)->make(true);
   }

   public function getSubjects()
    {

        return \DataTables::of(Subject::query())->make(true);

   }
}

View

    <table id="subjects_table" class="table table-bordered" style="width:100%">
    <thead>
            <tr>
                <th>Id</th>
                <th>Subject</th>
            </tr>
                </thead>
                <tbody>

                </tbody>
        </table>

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#subjects_table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('subjects.get') }}',
            columns: [
                {data: 'id', name: 'id'},
                {data: 'name', name: 'name'},
                {data: 'email', name: 'email'},
            ]
        });
    });
    </script>

answered Nov 1, 2018 at 11:02

user10186369

Sign up to request clarification or add additional context in comments.

5 Comments

Iso B Over a year ago

Thanks so much Saurabh, It worked. I'm very grateful Does this mean that this cannot be done using a single route?

user10186369 Over a year ago

@IsoB: No, you can create two routes for datatable 1. For display view 2. For get the datatable data

user10186369 Over a year ago

@IsoB: Glad to help and if my answer work for you then please accept my answer

Iso B Over a year ago

how do i "accept" your answer? Is there a button or something i should be clicking? Can't find any

user10186369 Over a year ago

@IsoB Thank you for your reply follow this link should be guide to how to accept the answer in StackOverflow(i.e. stackoverflow.com/help/someone-answers)

Collectives™ on Stack Overflow

JSON showing instead of Datatable following Ajax call to Laravel Controller

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related