I am populating a table via Ajax JSON with datatables, this is my JS code:

$(document).ready(function () {

$.ajax({
    url: "../WebService.asmx/LoadUsers",
    type: 'POST',
    datatype: 'json',
    //content: 'json',  lo mismo que arriba
    contentType: 'application/json; charset=utf-8',
    success: function (data) {

        var datos = JSON.parse(data.d);

        //  METODO  JQUERY DATATABLES  Documentación
        $('#tblUsers').DataTable({
            data: datos,
            columns: [
                { 'data': 'id' },
                { 'data': 'username' },
                { 'data': 'password' },
                { 'data': 'dregistered' },
                {
                    'data': null,
                    'defaultContent': "<img src='../assets/img/delete.png' id='btnDel' style='width: 22px; cursor:pointer;' />"
                }
                //
            ],
            responsive: true
        });
        /*DataTables instantiation.*/
        /*$("#tblUsers").DataTable();*/
    },
    error: function () {
        alert('Fail!');
    }
});
});

Html table:

<table id="tblUsers"  style="width:100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Usuario</th>
                <th>Contraseña</th>
                <th>Fecha</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Usuario</th>
                <th>Contraseña</th>
                <th>Fecha</th>
            </tr>
        </tfoot>
    </table>

My table after loading html page Is not showing data, it seems like not rendering at first, but after applying column filter or changing entries, the data is showing: Filtering by entries number

Filtering by column order

Am I missing something?