Question

我在使用jQuery中的.each方法向表中添加数据时遇到问题，然后实例化DataTable个后缀。查看页面时，数据将显示在表中，而不包含数据表的过滤选项。

如果有更好的方法，我不需要使用.each()方法。这正是当时对我最有意义的。

<!DOCTYPE html>
<html>
    <head>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" ></script>
    <script src=" https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" >
    <script src="js/users.js"></script>
</head>

    <body>

        <table id="table">
            <thead>
                <tr>
                    <th>id</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Email</th>
                    <th>Gender</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

    </body>

    <script>

        $(document).ready(function() {

                $('tbody').append($('<tr>', {id: "test"}));
                var $arr_length = users.length;
                for(i = 0; i <= $arr_length; i++) {
                        var $row = $('tr').get(i+1);

                        $.each(users[i], function(index, value) {
                            $($row).append("<td>" + value + "</td>");
                        });

                        $($row).after($('<tr>', {id: "test"}));

                };

                $('#table').DataTable();

        });

    </script>

</html>

Answer 1

我没有看到您的用户变量，因此我假设它是一个对象数组（每个表行一个）。

第一个错误是：ID必须是唯一的，而是创建具有相同ID的表行：

$($row).after($('<tr>', {id: "test"}));

因为您正在使用jQuery.each()，所以外部for循环无用。

您的问题的解决方案可以基于data：

$(function () {
    var users = [{"id": '1', 'firstname': 'firstname1', 'lastname': 'lastname1', 'email': 'email1', 'gender': 'male'},
        {'id': '2', 'firstname': 'firstname2', 'lastname': 'lastname2', 'email': 'email2', 'gender': 'male'},
        {'id': '3', 'firstname': 'firstname3', 'lastname': 'lastname3', 'email': 'email3', 'gender': 'female'}];

    $('#table').dataTable({
        data: users, 
        columns: [
            { data: 'id' },
            { data: 'firstname' },
            { data: 'lastname' },
            { data: 'email' },
            {data: 'gender'}
        ]});
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>


<table id="table">
    <thead>
    <tr>
        <th>id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Gender</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

基于您的代码的固定解决方案可以是：

$(function () {
    var users = [{'id': '1', 'firstname': 'firstname1', 'lastname': 'lastname1', 'email': 'email1', 'gender': 'male'},
        {'id': '2', 'firstname': 'firstname2', 'lastname': 'lastname2', 'email': 'email2', 'gender': 'male'},
        {'id': '3', 'firstname': 'firstname3', 'lastname': 'lastname3', 'email': 'email3', 'gender': 'female'}];
    $.each(users, function (index, value) {
        $('#table tbody').append($('<tr/>', {id: value.id}) /*  create first td */
                .append($("<td/>", {text: value.id})) /*  create second td */
                .append($("<td/>", {text: value.firstname}))/* ....  */
                .append($("<td/>", {text: value.lastname}))
                .append($("<td/>", {text: value.email}))
                .append($("<td/>", {text: value.gender})));
    });
    $('#table').dataTable();
});

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.3/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>


<table id="table">
    <thead>
    <tr>
        <th>id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Gender</th>
    </tr>
    </thead>
    <tbody>
    </tbody>
</table>

使用.each方法时，数据表未使用数据进行实例化

1 个答案: