data is not displaying in jquery DataTable

I am trying to fetch data from database and display in jquery DataTable but the data is not displaying in DataTable. Table is

ordered_books with attributes 'BookID', 'BilledNum','BilledDate', 'Qunatity', 'Price', 'Remarks'

view page code

<table id="showBooksIn" class="table table-bordered">
    <thead>
        <tr>
            <th>BOOK ID</th>
            <th>BILLED DATE</th>
            <th>BILLED NUMBER</th>
            <th>QUANTITY</th>
            <th>PRICE</th>
            <th>REMARKS</th>
        </tr>
    </thead>
</table>

<script type="text/javascript">
    $(document).ready(function(){
        $('#showBooksIn').DataTable({
            "processing":true,
            "serverside":true,
            "ajax":
            "columns":[
                {"data": "BookID"},
                {"data": "BilledNum"},
                {"data": "BilledDate"},
                {"data": "Qunatity"},
                {"data": "Price"},
                {"data": "Remarks"},
            ]
        });
    });
</script>

controller code

public function index()
    {
        return view('pages.booksin', $this->fetchData());
    }

function fetchData()
{
    $ordered_books = OrderedBook::select('BookID', 'BilledNum','BilledDate', 'Qunatity', 'Price', 'Remarks');
    return Datatables::of($ordered_books)->make(true); //return an instance of the class or interface you request
}

model code

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class OrderedBook extends Model
{
    //
}

route code

Route::resource('/order','OrderedBookController');
Route::get('/order/data','OrderedBookController@fetchData')->name('data');

I think the problem is with DataTable javascript code. But I am not sure. Please help!!!

via Chebli Mohamed