数据表自定义删除列

Question

我有包含多个电影（行）的数据表，在每一行的末尾都有用于删除的自定义列。

这是我的数据表：

HTML

<table id="moviesTable1" class="table table-striped table-bordered">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Duration</th>
                    <th>Distributor</th>
                    <th>Origin country</th>
                    <th>Year of production</th>
                    <th></th>
                </tr>       
            </thead>
            <tbody id="moviesTbody">

            </tbody>
</table>

jquery（我也有添加电影，getAll可以正常工作）

var MoviesManager = {

        getAll : function() {
            $.get('MoviesServlet', function(data) {
                $('#moviesTable1').DataTable({
                    "paging": false,
                    "info": false,
                    "searching": false,
                    "columns": [
                        null,
                        null,
                        null,
                        null,
                        null,
                        {
                            "data": null,
                            render:function(data, type, row)
                            {
                                return '<button id="deleteMovie">Delete</button>'
                            },
                            "targets": -1
                        }
                    ]
                    });
                for(m in data.movies) {
                    $('#moviesTable1').dataTable().fnAddData ([
                        data.movies[m].title,
                        data.movies[m].duration,
                        data.movies[m].distributor,
                        data.movies[m].originCountry,
                        data.movies[m].yearOfProduction 
                    ]);
                }

            });
        },

        deleteMovie : function() {
            var rowSelector = $(this).closest('tr');
            var id = $('#moviesTable1').dataTable().row(rowSelector).data().id;
            params = {
                    'action': 'delete',
                    'id': id
            }
            $.post('MoviesServlet', params, function(data){
                console.log(data);
            });

        }
}

$(document).ready(function() {

    MoviesManager.getAll();

    $('#deleteMovie').click(function(e) {
        MoviesManager.deleteMovie();
    });
});

我正在尝试从所选行中获取ID（数据库中的ID）并将其发送到Servlet。我失败了，单击时什么也没有发生。

Answer 1

我正在草稿中，向包含按钮的最后一个单元格添加了data-id属性。基于此，单击任何按钮，我们都可以使用其父数据ID来找到ID；）

var MoviesManager = {

    getAll: function () {
        $.get('MoviesServlet', function (data) {
            $('#moviesTable1').DataTable({
                "paging": false,
                "info": false,
                "searching": false,
                "columns": [
                    null,
                    null,
                    null,
                    null,
                    null, {
                        "data": null,
                        render: function (data, type, row) {
                            return '<button id="deleteMovie">Delete</button>'
                        },
                        "targets": -1
                    }
                ],
                createdRow: function( row, data, dataIndex ) {
                $( row ).find('td:eq(5)').attr('data-id', data.id));
                }
            });
            for (m in data.movies) {
                $('#moviesTable1').dataTable().fnAddData([
                        data.movies[m].title,
                        data.movies[m].duration,
                        data.movies[m].distributor,
                        data.movies[m].originCountry,
                        data.movies[m].yearOfProduction
                    ]);
            }

        });
    },

    deleteMovie: function (ID) {
        params = {
            'action': 'delete',
            'id': ID
        }
        $.post('MoviesServlet', params, function (data) {
            console.log(data);
        });

    }
}

$(document).ready(function () {

    MoviesManager.getAll();
    $('body').on('click', '#deleteMovie', function(e){
        var id= $(this).parent().attr("data-id");
        MoviesManager.deleteMovie(id);
    });
});