Question

我将Thymeleaf用作模板引擎。

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

我可以使用哪些免费的jQuery插件？

Answer 1

我使用spring + thymeleaf已有一段时间了，最聪明的人是DataTables。自2007年以来，它就已经存在了，并且拥有大量的文档和“插件”库来执行您可以想到的几乎所有事情。

现在，如果您感到有点大胆，那就是Tabulator这个大竞争对手。无论是外观还是代码方面，它都感觉更现代，但是还缺少一些更具体的功能（它正在积极开发中）。您可以在这里查看他们的路线图：Tabulator Roadmap

Answer 2

您可以使用DataTables plug-in

控制器：

@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选择了哪种表的jQuery插件？

2 个答案: