Question

我想在我的Spring控制器和我使用数据表的视图中使用分页。在控制器中，我使用具有分页支持的Spring数据存储库：

@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";
}

在我看来，我不知道如何正确使用Page对象。

// 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"}
    ]
});

此外，我该如何编写datatables定义的ajax部分，以便可以来回传递Spring可分页对象？以及如何将数据表按钮连接到分页索引？

Answer 1

您可以使用以下结构：

控制器：

@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);

}

数据表类：

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"}
    ]
});

使用Spring MVC，JPA和数据表分页

1 个答案: