Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

tonyv69's avatar

Datatables and laravel using "yajra/laravel-datatables-oracle": "^5.12"

Hi All,

I'm trying to get datatables working server-side in my laravel project, i have managed to do it on a client side implementation, however, this can only handle 50K rows of data as opposed to 100K+ rows of data when using a server-side implementation.

So my question is HELP!!! I'll explain below :

I used = http://datatables.yajrabox.com/starter

My Routes

Route::controller('datatables', 'DatatablesController', [
    'anyData'  => 'datatables.data',
    'getIndex' => 'datatables',
]);

My Controller

class DatatablesController extends Controller
{
     /**
     * Displays datatables front end view
     *
     * @return \Illuminate\View\View
     */
    public function getIndex()
    {
        return view('datatables.index');
    }

    /**
     * Process datatables ajax request.
     *
     * @return \Illuminate\Http\JsonResponse
     */
    public function anyData()
    {
        $userCostCode = Auth::user()->CostCode;

        $simsdt = Sims::whereRaw( ' left(`Cost Code`, 3) = ? ', [$userCostCode] );

        return Datatables::of($simsdt)->make(true);
    }
}

My View

<div class="box-body">
    <table id="#data-table-large-2" class="display table table-bordered">
        <thead>
             <tr>
                 <th> SIM no </th>
                  <th> Voice Number </th>
                                        
               </tr>
    </thead>
                                 
 </table>
</div><!-- /.box-body -->

@push('scripts')
<script>
$(function() {
    $('#data-table-large-2').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        columns: [
            { data: 'SIM no', name: 'SIM no' },
            { data: 'Voice Number', name: 'Voice Number' }
        ]
    });
});
</script>
@endpush

My JSON is coming from datatables/data (route= datatables.data) result below, the stars below would have data there but had to remove it NOT FOR PUBLIC VIEW and replaced with 'secret' but its just to show i am getting my JSON at the correct url.

{
"draw": 0,
"recordsTotal": 320,
"recordsFiltered": 320,
"data": [
{
"ID": 498,
"Item No": 4,
"SIM no": "****secret****",
"Voice Number": "****secret****",
"DH Data Number": "****secret****",
"DE Data Number": null,
"DC Data Number": "****secret****",
"DK Data Number": "****secret****",
"DJ Data Number": null,

So my big question is really why can't the "datatables" view show the data but the json route "datatables.data" show the data, why is the json not getting sent to the datatables/index.blade.php I'm lost at the mo and any help would be greate thanks in advance!

0 likes
3 replies
andy's avatar

If your api call is working then it's your view that is broken.

Here is a sample of what I've done.

jquery part:

$(document).ready(function() {
oTable =
    $('#table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ URL::to('/admin/api/tickets') }}",
        "columns": [
{data: 'first_name', name: 'first_name', orderable: false, searchable: true, visible: false},
{data: 'make', name: 'make', orderable: false, searchable: true, visible: false},
{data: 'model', name: 'model', orderable: false, searchable: true, visible: false},
            {
                data: 'id',
                name: 'id',
                orderable: true,
                searchable: false,
                visible: false
            },
            {
                data: 'title',
                name: 'title',
                orderable: true,
                searchable: true
            },
            {
                data: function(d){
                    return d.last_name + ', ' + d.first_name;
                },
                name: 'last_name',
                orderable: true,
                searchable: true
            },
            {
                data: 'status',
                name: 'ticket_status_translations.name',
                orderable: true,
                searchable: true
            },
            {
                data: 'priority',
                name: 'priority_translations.name',
                orderable: true,
                searchable: true
            },
            {
                data: function(d){
                    return d.make + ' : ' + d.model + ' : ' + d.model_number;
                },
                name: 'model_number',
                orderable: true,
                searchable: true
            },
            {
                data: 'updated_at',
                name: 'updated_at',
                orderable: true,
                searchable: true
            },
            {
                data: 'actions',
                name: 'actions',
                orderable: false,
                searchable: false
            }
        ]
    });
});

table:

<div class="row">
<table id="table" class="table table-striped table-hover">
    <thead>
        <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th>{{ trans('kotoba::table.title') }}</th>
            <th>{{ Lang::choice('kotoba::table.user', 1) }}</th>
            <th>{{ trans('kotoba::table.status') }}</th>
            <th>{{ trans('kotoba::table.priority') }}</th>
            <th>{{ trans('kotoba::table.asset') }}</th>
            <th>{{ trans('kotoba::table.updated_at') }}</th>

            <th>{{ Lang::choice('kotoba::table.action', 2) }}</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>
</div>

I also have a join table going on.

In your code:

$(function() {
    $('#data-table-large-2').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        columns: [
            { data: 'SIM no', name: 'SIM no' },
            { data: 'Voice Number', name: 'Voice Number' }
        ]
    });
});

could possibly be ....

$(function() {
    $('#data-table-large-2').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        columns: [
            { data: 'sim_no', name: 'sim_no' },
            { data: 'voice_number', name: 'voice_number' }
        ]
    });
});

I have never bothered trying to figure out why data isn't the information from the query.

If you get a datable 07 error. Make sure your table columns match up with your jquery call. This is why I have empty < th > headers in there.

tonyv69's avatar

I thing your last comment is correct after reading your comment I found over chats that take about spaces in column names i.e. SIM no should be SIM_no, however, i have no control over the current column naming convention trust me I have complained many times lol.

Is there anyway I can replace the space with an underscore when the JSON is created?

tonyv69's avatar

HI Again Quick update, I have managed to create a VIEW in MySQL which converts the column names i.e.

CREATE VIEW new_sims_dt AS
SELECT `SIM no` as sim_no, `Voice Number` as voice_number, `Cost code` as cost_code
FROM sim;

So now i get the new column names in my JSON file 'datatables.data' with no spaces, yay!!

{
"draw": 0,
"recordsTotal": 320,
"recordsFiltered": 320,
"data": [
{
"sim_no": "****secret****",
"voice_number": "****secret****",
"cost_code": "****secret****"
},
{
"sim_no": "****secret****",
"voice_number": "****secret****",
"cost_code": "****secret****"
},

Remember secret is a place holder for real data.

But I'm still not getting any data in the table, here is the new js

<script>
$(function() {
    $('#data-table-large-2').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{{ URL::to('datatables/data') }}',
        columns: [
            { data: 'sim_no', name: 'sim_no' },
            { data: 'voice_number', name: 'voice_number' },
            { data: 'cost_code', name: 'cost_code' }
        ]
    });
});
</script>

Please or to participate in this conversation.