Reference URL: https://stackoverflow.com/a/68456824/6462295
As of 2023Feb07_1503 - failed to achieve by method of: data: data
Published on
1/12/23 2:25 PM
My html table:
<table id="listaVideos2" class="display"> <thead> <tr> <th>nombre</th> <th>descripcion</th> <th>codigoYoutube</th> <th>bpm</th> </tr> </thead> </table>My JavaScript:
$.ajax({ "url": "listado2", "type": "GET", "datatype": 'json', "success": function (data) { $('#listaVideos2').DataTable({ "fixedHeader" : true, "paging": false, "info": true, "autoWidth": true, "order": [], data: data, select: true, columns: [ { "data": "nombre" }, { "data": "descripcion" }, { "data": "codigoYoutube", "title": "Youtube", "orderable": false }, { "data": "bpm" }, ] }); } });or another way you can use:
$('#listaVideos2').DataTable({ "fixedHeader" : true, "paging": false, "info": true, "autoWidth": true, "order": [], ajax: { url: 'listado2', dataSrc: '' }, select: true, columns: [ { "data": "nombre" }, { "data": "descripcion" }, { "data": "codigoYoutube", "title": "Youtube", "orderable": false }, { "data": "bpm" }, ], buttons: [ { extend: "create", editor: editor }, { extend: "edit", editor: editor }, { extend: "remove", editor: editor } ], dom: "Bfrtip", });And my Controller: (if your controller is a @RestController I think you wouldn't need the @ResponseBody)
@GetMapping("/listado2") @ResponseBody public List<Video> apiListadoVideos() { return videosServicio.buscarTodosLosVideos(); }where my Video class is this simple (I just remove de getters, setters...):
public class Video { private Integer id; @NotEmpty @NotBlank private String nombre; private String descripcion; @NonNull @NotBlank private String codigoYoutube; private String bpm; private Categoria categoria; private Tono tono; private Modo modo; }