Datatable custom delete column

问题

I have datatable with multiple movies(rows), at the end of each row, there is custom column for delete.

Here is my datatable:

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 (I also have add movie, getAll which works fine)

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();
    });
});

I am trying to get id from selected row (id that's in database) and send it to servlet. I am failing, nothing happens on click.

Here is the servlet that's receiving id

public class MoviesServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;


    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        List<Movie> movies = MovieDAO.getAll(); 

        Map<String, Object> data = new HashMap<>();
        data.put("movies", movies);

        ObjectMapper mapper = new ObjectMapper();
        String jsonData = mapper.writeValueAsString(data);

        response.setContentType("application/json");
        response.getWriter().write(jsonData);

    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String action = request.getParameter("action");

        try {
            switch(action) {
            case "add": {
                String title = request.getParameter("title");
                String duration = request.getParameter("duration");
                String distributor = request.getParameter("distributor");
                String originCountry = request.getParameter("originCountry");
                String yearOfProduction = request.getParameter("yearOfProduction");

                Movie movie = new Movie();
                movie.setTitle(title);
                movie.setDuration(duration);
                movie.setDistributor(distributor);
                movie.setOriginCountry(originCountry);
                movie.setYearOfProduction(Integer.parseInt(yearOfProduction));
                MovieDAO.addMovie(movie);
                break;
            }
            case "delete": {
                Integer id = Integer.parseInt(request.getParameter("id"));
                MovieDAO.delete(id);
                break;
            }
            }
        } catch (Exception ex) {
            ex.printStackTrace();
        }

    }

}

and finally DAO which executes SQL query

public static boolean delete(Integer id) {
        Connection con = ConnectionManager.getConnection();
        PreparedStatement ps = null;

        try {

            String query = "DELETE FROM movies WHERE id = ?";
            ps = con.prepareStatement(query);
            ps.setInt(1, id);

            return ps.executeUpdate() == 1;

        }catch (Exception ex){
            ex.printStackTrace();
        }finally {
            try {ps.close();} catch (Exception ex1) {ex1.printStackTrace();}
            try {con.close();} catch (Exception ex1) {ex1.printStackTrace();}
        }

        return false;
    }

回答1:

[UPDATED] I'm making a draft where I add a unique data-id attribute to each button. Your server' code seems ok ! So after applying those small changes, I think everything should work properly.

Here is the Fiddle using static Dataset

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" data-id="' + data.id + '">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).attr("data-id");
        MoviesManager.deleteMovie(id);
    });
});

Here is data that gets to jquery

{"movies":[
{   "id":1,
    "title":"The Irishman",
    "duration":"03:37",
    "distributor":"Netflix",
    "originCountry":"United States",
    "yearOfProduction":2019
},
{   "id":2,
    "title":"The Lion King",
    "duration":"01:58",
    "distributor":"Walt Disney Studios",
    "originCountry":"United States",
    "yearOfProduction":2019}
]}

来源：https://stackoverflow.com/questions/59829528/datatable-custom-delete-column