数据表未显示我的数据但在应用过滤器后

Question

我正在通过 Ajax JSON 使用数据 table 填充 table，这是我的 JS 代码：

$(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" class="table table-bordered nowrap" 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 不显示数据，一开始似乎没有呈现，但在应用列过滤器或更改条目后，数据显示： Filtering by entries number

Filtering by column order

我错过了什么吗？

Answer 1

您的问题可能是您试图设置 5 列数据（即使第 5 列有 data: null）但您的 HTML <table> 中只有 4 列.

如果您查看 控制台 ，可能应该会出现类似 Cannot read property 'style' of undefined 或类似的错误。因此，table 中的数据加载因错误而中断。

将您的 HTML 改成这个（添加一个额外的 <th></th>），应该没问题：

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

数据表未显示我的数据但在应用过滤器后

Datatables not showing my data but after applying filter

html

javascript

ajax

json

datatables