javascript - 无法使用 Java 脚本在 asp.net 中绑定(bind) HTML DataTable

Question

HTML 代码:

<div class="" style='overflow: scroll; overflow-y: hidden;'>
    <table id="datatable" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Company Name</th>
                <th>Customer Type</th>
                <th>First Name</th>
                <th>Last Name</th>
                <th>Mobile1</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody id="table-list-data">
        </tbody>
    </table>
</div>

Java 脚本代码:

$.ajax({
    dataType: "json",
    type: "POST",
    url: 'http://localhost:52235/api/AdminPanel/GetCustomer',
    data: data,
    async: true,
    success: function (data) {
        var trHTML = '';

        $.each(data.response.customers, function (i, item) {

            trHTML += '<tr><td>' + item.customerID + '</td><td>' + item.companyname + '</td><td>' + item.customertypelovid + '</td><td>' + item.firstname + '</td><td>' + item.lastname + '</td><td>' + item.mobile1 + '</td><td>' +
                '<a href="#" class="on-default edit-row"><i class="fa fa-pencil"></i>Edit</a><br /> <a href="#dialog" class="on-default remove-row"><i class="fa fa-trash-o"></i>Delete</a>' + '</td></tr>';
        });

        $('#datatable').append(trHTML);
    },
    error: function (jqXHR, textStatus, errorThrown) {
    }
});

我得到这样的输出，它显示数据，但它没有将数据绑定(bind)到数据表，请帮助了解数据表的绑定(bind)。

Answer 1

从服务器获取数据后，有多种方法可以使用此工具:
您可以像您一样浏览每一行并自行填充表格，也可以让datatables为您做这件事。我建议您关注此 datatables tutorial 。

我建议您按照本教程进行操作，因为如果您不这样做，您几乎每个操作都必须使用数据表 API。
例如，您的删除操作必须使用 row remove api ，仅从 DOM 中删除行而不使用 api 不会更新表，并且会在排序/搜索时导致错误..

这是demo with your problem 这是WORKING DEMO

*注意，您首先填充表格，然后才将其转换为DataTable。对于您的代码，只需在将行附加到表后添加即可:

 $('#datatable tbody').append(trHTML);
 $('#datatable').DataTable();