Having issues with the delete button

lieyongchang · December 2020

<script>
     $(document).ready(function() {      
        var editor = $('#users').DataTable({
                "processing" : true,
                "serverSide" : true,
                "ajax" : {
                    "url" : "findall",
                    "dataSrc":"",
                    "type" : "POST",
                    "dataType" : "json",
                    "contentType" : "application/json",
                    "data" : function(d) {
                        return JSON.stringify(d);
                    }
                },
                 "columns": [
                        {"data": "id"},
                        {"data": "name"},
                        {"data": "age"},
                        {"data": "gender"},
                        {"data": "country"},
                        {"data": "email"},
                        {"data": "mobile"},
                        {"data": "contact"},
                        {"data": "birthdate"},
                        {
                            data: null,
                            className: "center",
                            defaultContent: '<a href="">Edit</a> / <a href="" class="editor_remove">Delete</a>'
                        }
                    ]
                });
         
        // Delete a record
         $('#users').on('click', 'tbody tr', function() {
             editor.row(this).remove().draw( false );
            }); 
         });
</script>

Description of problem:
I am trying to delete a row inside datatable , but it just refresh the page and the row is still there.

in fact I also try this :

<a href="@{/delete/{id}(id=${user.id})}" class="editor_remove">Delete</a>

i pass in the href, where i also did the method in the service layer, but it gave me a 404 error:

GEThttp://localhost:8080/@%7B/delete/%7Bid%7D(id=$%7Buser.id%7D)%7D

lieyongchang · December 2020

the same applies for my edit button, I have done a method in my service method, which i will to execute wheh n i press the button, same error message

kthorngren · December 2020

With server side processing you will need to remove the row from your DB then use ajax.reload() to have Datatables refresh its data from the server. Server side processing doesn't allow for client side API's like row().remove(). Server side processing expects all the processing to happen in the server script.

You could use the Editor to perform these functions. See this Server Side example.

Kevin

lieyongchang · December 2020

so using my current data, it should be like this?

$(document).ready(function() {       
        
        editor = new $.fn.dataTable.Editor( {
            "ajax":  {
                        "url" : "findall",
                        "dataSrc":"",
                        "type" : "POST",
                        "dataType" : "json",
                        "contentType" : "application/json",
                        "data" : function(d) {
                            return JSON.stringify(d);
                        }
                    },
            "table": "#users",
            "fields": [{"data": "id"},
                  {"data": "name"},
                  {"data": "age"},
                  {"data": "gender"},
                  {"data": "country"},
                  {"data": "email"},
                  {"data": "mobile"},
                  {"data": "contact"},
                  {"data": "birthdate"},
                         ]
                 });
            
            $('#users').DataTable({
                "processing" : true,
                "serverSide" : true,
                "ajax" : {
                    "url" : "findall",
                    "dataSrc":"",
                    "type" : "POST",
                    "dataType" : "json",
                    "contentType" : "application/json",
                    "data" : function(d) {
                        return JSON.stringify(d);
                    }
                },
                 "columns": [
                     {"data": "id"},
                        {"data": "name"},
                        {"data": "age"},
                        {"data": "gender"},
                        {"data": "country"},
                        {"data": "email"},
                        {"data": "mobile"},
                        {"data": "contact"},
                        {"data": "birthdate"},      
                    ],
                    select: true,
                    buttons: [
                        { extend: "create", editor: editor },
                        { extend: "edit",   editor: editor },
                        { extend: "remove", editor: editor }
                    ]
                });
         });

immediatly i got this error: Uncaught TypeError: $.fn.dataTable.Editor is not a constructor

lieyongchang · December 2020

i inlucde this to try

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.22/b-1.6.5/sl-1.3.1/datatables.min.css"/>
<link rel="stylesheet" type="text/css" href="Editor-1.9.6/css/editor.dataTables.css">
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/dt-1.10.22/b-1.6.5/sl-1.3.1/datatables.min.js"></script>
<script type="text/javascript" src="Editor-1.9.6/js/dataTables.editor.js"></script>

but my scripts are gettting a 404 error

any suggestions?

lieyongchang · December 2020

     $(document).ready(function() {      
        var editor = $('#users').DataTable({
                "processing" : true,
                "serverSide" : true,
                "responsive": true,
                "ajax" : {
                    "url" : "findall",
                    "dataSrc":"",
                    "type" : "POST",
                    "dataType" : "json",
                    "contentType" : "application/json",
                    "data" : function(d) {
                        console.log("data: ", d);
                        return JSON.stringify(d);
                    }
                },
                 "columns": [
                        {"data": "id"},
                        {"data": "name"},
                        {"data": "age"},
                        {"data": "gender"},
                        {"data": "country"},
                        {"data": "email"},
                        {"data": "mobile"},
                        {"data": "contact"},
                        {"data": "birthdate"},
                        {"mRender": function ( data, type, row ) {
                            return '<a href="@{/edit/{id}(id=${user.id})}">Edit</a>';}
                        },
                        {"mRender": function ( data, type, row ) {
                            return '<a href="@{/delete/{id}(id=${user.id})}">Delete</a>';}
                        }
                    ]
                });
      });

upon further research, this is what I have. I add my own href, but it is showing 404 error. Anyone encounter this issue before?

colin · December 2020

Yep, you'll get that constructor error is you're getting a 404 when loading the Editor files, so that's the place to start. Have you put the source files at the top-level of your web-server, as the path in the error message wants? See the installation pages for more info,

Colin

lieyongchang · December 2020

i am moving away from the Editor path, as I want to customize my csv, pdf , xml downloader.

which leave me with this

$(document).ready(function() {     
   var editor = $('#users').DataTable({
           "processing" : true,
           "serverSide" : true,
           "responsive": true,
           "ajax" : {
               "url" : "findall",
               "dataSrc":"",
               "type" : "POST",
               "dataType" : "json",
               "contentType" : "application/json",
               "data" : function(d) {
                   console.log("data: ", d);
                   return JSON.stringify(d);
               }
           },
            "columns": [
                   {"data": "id"},
                   {"data": "name"},
                   {"data": "age"},
                   {"data": "gender"},
                   {"data": "country"},
                   {"data": "email"},
                   {"data": "mobile"},
                   {"data": "contact"},
                   {"data": "birthdate"},
                   {"mRender": function ( data, type, row ) {
                       return '<a href="@{/edit/{id}(id=${user.id})}">Edit</a>';}
                   },
                   {"mRender": function ( data, type, row ) {
                       return '<a href="@{/delete/{id}(id=${user.id})}">Delete</a>';}
                   }
               ]
           });
 });

lieyongchang · December 2020

but when i click on the delete/edit button, it gave me a 404 error, thats where i am stuck now.

This method is in my service layer

public void deleteById(Long idToDelete) {
        userRepository.deleteById(idToDelete);
    }

This method is in my controller layer

    @GetMapping
    @RequestMapping("/delete/{id}")
    public String deleteUser(@PathVariable("id") long id) {

        userInfoService.deleteById(Long.valueOf(id));

        return "/user/userList";
    }

lieyongchang · December 2020

post wrong place

Having issues with the delete button

Having issues with the delete button

Replies

Howdy, Stranger!

Categories

DataTables

Having issues with the delete button

Having issues with the delete button

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables