DataTable : How to make a page load faster?

Question

I have about 20,000 rows in my database, and I use DataTable to load all of those data.

• DataTable is loading all of my data at the beginning.
• DataTable works fine with a small amount of data like 100 or below, but in my case, my page took about 3 minutes to load a page. Very Bad !

What is the most efficient way to improve the loading speed using DataTable ?

---

Update:

Here is my table

<table id="inventory_exact"> ...

Here is my setting to it

  // Setting to Inventory Table 
  $('#inventory_exact').dataTable({

    "lengthMenu": [ 10 ] ,
    "bLengthChange": false,
    "searchHighlight": true,
    "bInfo" : false

  });

---

Update 2: - server side

@niyou : I use PHP Laravel , so I query my data and display them by doing this

            @foreach ( Inventory::all() as $inventory)
             <tr>
                <td>{{ $inventory->sku }} </td>
                <td>{{ $inventory->description }} </td>
                <td>${{ $inventory->price }} </td>
                <td>{{ $inventory->stock }} </td>
             </tr>
            @endforeach

Answer 1

When you are dealing with client-side large datasets (by large i define as over 1000) , you would probably want to switch to the Server-side implementation of data for your datatables data

Using the newest 1.10 syntax it would look like this

table = $('#example').DataTable( {
    serverSide: true,
    ajax: {
      url:"index.cfm/observers/json",
      },
  });

where the url returns a json object that has draw, totalrecordcount, totalfilteredcount, and data

I have included links to documentation for

Datatables Server-Side Documentation

PHP example script to generate JSON needed for datatables on Github using SSP.class

PHP script to generate JSON for datatables written spagetti style (if you cant use SSP or need to use older datatables)