DataTable 跳转到指定页 自定义跳转

1、DataTable JS的介绍

DataTable JS是一款前端插件，可以根据后端返回的JSON数据快速生成前端数据表格的插件。

2、页面如何引用

这里要配合Bootstrap使用，页面展示会更好看

<!-- CSS 引用 -->
<link href="assets/css/bootstrap.css" rel="stylesheet"/>

<!-- JS 引用 -->
<script src="assets/js/jquery-1.10.2.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/dataTables/jquery.dataTables.js"></script>
<script src="assets/js/dataTables/dataTables.bootstrap.js"></script>

<!-- datatable 加载数据的代码-->
<script>
var table = $("#DataTable").DataTable({
                "ajax": {
                    "url": "getAsinAttributeList",
                    "type": "get",
                    "data": {
                        jobName: $("#configName").val()
                    },
                    "dataType": "json"
                },
                "dom": "lrtip",
                "pageLength": 10,
                "destroy": true,
                "columns": [
                    {"data": "jobName"},
                    {"data": "asin"},
                    {"data": "competitorAttributeName"},
                    {"data": "competitorAttributeValue"}
                ]
            });
</script>

3、自定义跳转到第N页按钮

注意：我们这里引用了layer UI JS进行弹出框提示，可以根据自己需求更改其他插件

$('#DataTable').on('draw.dt', function () {
            // Skip Page HTML
            var skipHtml = "<li class='paginate_button disabled'><a>Skip</a></li>";
            var inputHtml = "<li class='paginate_button'><input id='skipPageNumber' type='text' class='form-control' style='width:80px;float: left' /></li>";
            var GoHtml = "<li class='paginate_button'><a id='skipBT'>Go</a></li>";
            $("ul.pagination").append(skipHtml + inputHtml + GoHtml);
            // Skip Function
            $("#skipBT").on('click', function () {
                var info = table.page.info();
                var pageNumber = parseInt($("#skipPageNumber").val());
                if (pageNumber > 0 && pageNumber <= info.pages) {
                    table.page(pageNumber - 1).draw(false);
                } else {
                	// layer UI JS
                    layer.msg(pageNumber + " pages do not exist.")
                }
            });
        });

4、后端数据格式（Java）

4.1 定义一个数据返回类

import org.springframework.http.HttpStatus;

public class RetDTO<T> {
    private int code;
    private String msg;
    private T data;

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public T getData() {
        return data;
    }

    public void setData(T data) {
        this.data = data;
    }

    public static <T> RetDTO<T> success(String msg) {
        RetDTO retDTO = new RetDTO();
        retDTO.setCode(HttpStatus.OK.value());
        retDTO.setMsg(msg);
        return retDTO;
    }

    public static <T> RetDTO<T> success(T data, String msg) {
        RetDTO retDTO = new RetDTO();
        retDTO.setCode(HttpStatus.OK.value());
        retDTO.setData(data);
        retDTO.setMsg(msg);
        return retDTO;
    }

    public static <T> RetDTO<T> error(String msg) {
        RetDTO retDTO = new RetDTO();
        retDTO.setCode(HttpStatus.BAD_REQUEST.value());
        retDTO.setMsg(msg);
        return retDTO;
    }

}

4.2 数据返回类如何和DataTable JS的数据格式一样

注意：我们这里的数据是一次全部返回，需求不同，可以设定Datatable JS的服务器模式，原理就是Datatable JS的服务器模式，在请求后端的时候，会携带分页的参数，例如：PageNumber等，然后你就可以在后台写分页查询

@RequestMapping(value = "getAsinAttributeList", method = RequestMethod.GET)
public RetDTO<List<AsinAttributeList>> getAsinSearchList(AsinAttributeList asinAttributeList) {
     List<AsinAttributeList> lists = asinAttributeListService.getListByParam(asinAttributeList);
     return RetDTO.success(lists, "Query Success!");
}