I have an [API](https://jsonblob.com/57c09794e4b0dc55a4f0f369) that return 1000 accounts.
My goal is to load only my first 10 rows, and load more - if the user click on the `next`.

---

HTML
====

**table**

```
<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Account ID</th>
            <th>Name</th>
            <th>Email</th>
        </tr>
    </thead>
</table>

```

---

JS
==

Try #1
======

**config**

```
$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "serverSide": true,
        ajax: {
            url: 'http://localhost:8888/api/account_index',
            dataSrc: 'data'
        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true,
        "deferLoading": 10 <-----
    } );

```

---

I got

[![enter image description here](https://i.stack.imgur.com/P2go6.png)](https://i.stack.imgur.com/P2go6.png)

---

Try #2
======

**config**

```
$('#example').DataTable( {
        "bPaginate": true,
        "processing": true,
        "serverSide": true,
        ajax: {
            url: 'http://localhost:8888/api/account_index',
            dataSrc: 'data',
            deferLoading: 10 <-----

        },
        columns: [
            { data: 'account_id' },
            { data: 'name' },
            { data: 'email' }
        ],
        "deferRender": true

    } );

```

---

I got all 1000 account listed:

[![enter image description here](https://i.stack.imgur.com/SyFmg.png)](https://i.stack.imgur.com/SyFmg.png)