freemarker 分页查询

<#import "../common/pageable.html" as p/>

<div class="container" id="container">
    <div class="container">
        <input type="text" value="${RequestParameters['q']!''}" placeholder="搜索文档" class="form-control search search_input">
        <button class="btn btn-success btn_search">批量导出文档</button>
    </div>
    <table class="table table-bordered table-condensed table-striped" id="table">
        <thead>
        <tr>
            <th>ID号</th>
            <th>文档标题</th>

            <th>请求方法</th>
            <th>url</th>

            <th>开始时间</th>
            <th>更新时间</th>
            <th>
                操作
            </th>
        </tr>
        </thead>
        <tbody>
        <#list list as entity>
            <tr>
                <td>${ (entity.id )!}</td>
                <td>${ (entity.title )!}</td>

                <td>${ (entity.method )!}</td>
                <td>${ (entity.url )!}</td>

                <td>${ (entity.gmtCreate )!}</td>
                <td>${ (entity.gmtModified )!}</td>
                <td>
                    <button class="btn btn-success look" data-entityId="${(entity.id)!}">查看</button>
                    <button class="btn btn-danger del" data-entityId="${(entity.id)!}">删除</button>
                </td>


            </tr>
        </#list>





        </tbody>

        <script>

            $('.look').click((e) => {
                console.log(e.target.getAttribute('data-entityId'))
            })

            $('.del').click((e) => {
                let id = e.target.getAttribute('data-entityId');
                let url = '/del_by_id?id='+id;
                $.ajax({
                    type:'delete',
                    url:url,
                    data:{},
                    success:()=> {
                        reload(${RequestParameters['page']!'1'})
                    }
                })
            })

            $('.search_input').keydown((e) => {
                if(e.keyCode===13) {

                    reload(1);
                }

            })

            function reload(page) {
                let val = $('.search_input').val();
                $('#container').load('load_table?q='+val+'&page='+page)
            }


        </script>
    </table>

    <@p.bootstrap_page_1 "page1"/>

    <script>
        $('#page1 a').on('click',(e) => {
            let page = e.target.innerText;
            reload(page)
        })
    </script>

</div>

@GetMapping("/load_table")
    public String loadtable(@RequestParam(required = false,defaultValue = "") String q, @RequestParam(required = false,defaultValue = "1") int page, @RequestParam(required = false,defaultValue = "5") int size,Model model) {
        System.out.println(q);
        Page<ApiInfoDemo> page1 = apiInfoDemoRepository.searchByTxt(q, PageRequest.of(page-1,size));

        model.addAttribute("list",page1.getContent());
        // System.out.println("总数 +" +page1.getContent());
        PageUtil.bootstrapPagination(page1,model);
        return "ajax_load/postman_record_table";
    }