Paging with Spring MVC, JPA and Datatables

Question

I want to use paging in my Spring controller and in my view where I use datatables. In the controller I use a Spring data repository with paging support:

@GetMapping("my/url")
public String listAll(
        Model model,
        @PageableDefault(size=200, sort="name") Pageable pageable)
{
    Page<MyEntity> page = repository.findAll(pageable);
    model.addAttribute("page", page);
    return "path-to-html-resource";
}

In my view I don't know how to use the Page object properly.

// this is how I extract the data from the controller (thymeleaf style)
var datatableRows = /*[[${page.getContent()}]]*/'';

$('#mainTable').DataTable({
    "paging" : true,
    "serverSide" : true,
    "ajax" : function (data, callback, settings) {
        // this is definitely not the way to go
        // but so far was the only way I got some data into my table
        var myObject = new Object();
        myObject.aaData = datatableRows;
        callback(myObject);
    },
    "info" : true,
    "columns": [
        { "data": "name"},
        { "data": "validFrom"},
        { "data": "validTo"},
        { "data": "amount"},
        { "data": "currency"}
    ]
});

Also, how do I have to write the ajax part of the datatables definition so I can pass the Spring pageable object back and forth? And how to I wire the datatable buttons to the paging index?

Answer 1

you can use this structure:

Controller:

@RequestMapping(value = "/my/url/list")
public ResponseEntity listAllTable(@RequestParam("draw") int draw,
                                  @RequestParam("start") int start,
                                  @RequestParam("length") int length) {

    int page = start / length; //Calculate page number

    Pageable pageable = PageRequest.of(
            page,
            length ,
            new Sort(
                    Sort.Direction.DESC ,
                    "name"
            )
    ) ;

    Page<MyEntity> responseData = repository.findAll(pageable);

    DataTable dataTable = new DataTable();

    dataTable.setData(responseData.getContent());
    dataTable.setRecordsTotal(responseData.getTotalElements());
    dataTable.setRecordsFiltered(responseData.getTotalElements());

    dataTable.setDraw(draw);
    dataTable.setStart(start);

    return ResponseEntity.ok(dataTable);

}

DataTable Class:

public class DataTable<T> {

    private int draw;
    private int start;
    private long recordsTotal;
    private long recordsFiltered;
    private List<T> data;


    // setter and getter ...

}

javascript:

$('#mainTable').DataTable({
    "processing": true,
    "serverSide": true,
    "pageLength": 10,
    "searching": false,
    "info" : true,
    "ajax": {
        "url": "/my/url/list",
        "method":"get",
        "dataSrc": function (response) {

            var data = response.data; // your data list

            var all = [];

            for (var i = 0; i < data.length; i++) {


                var row = {

                    rows: response.start + i + 1,
                    name: data[i].name, // name ... ,
                    validFrom: data[i].validFrom,
                    validTo: data[i].validTo,
                    amount: data[i].amount,
                    currency: data[i].currency,

                };
                all.push(row);
            }
            return all;
        }

    },
    "columns": [
        { "data": "name"},
        { "data": "validFrom"},
        { "data": "validTo"},
        { "data": "amount"},
        { "data": "currency"}
    ]
});