Having issues with the delete button

lieyongchang

<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

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

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

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

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

     $(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

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

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

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

post wrong place