jquery - 为 Spring MVC 选择什么 jQuery 表格插件？

Question

我使用 Thymeleaf 作为我的模板引擎。

我需要能够动态创建表。我事先不知道应该输出哪些列。它需要从数据源中读取。我必须按所有列搜索，对它们进行排序。

我可以使用什么免费的 jQuery 插件？

标签： jqueryspring-mvcspring-data-jpathymeleaf

Answer 1

您可以使用DataTables 插件

控制器：

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