Twbs分页无法加载数据表中的新页面数据

您好，我正在处理分页，发现当我单击第二页时无法从 twbs 插件加载数据。事实上，该方法是从 ajax 调用中调用的，但数据表数据仍然相同。有人可以告诉我该怎么做才能用服务器上的新数据填充表格。

查看 thymeleaf 和 spring boot 中的代码。

     <table id=shortstorage class="table table-hover table-bordered dataTable no-footer" role="grid" aria-describedby="mtsdetails_info">
       <thead>
    <tr role="row">
      <th class="sorting_desc" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Sr.No.: activate to sort column ascending" style="width: 43px;" aria-sort="descending">Sr.No.</th>
        <th class="sorting" tabindex="0" aria-controls="mtsdetails" rowspan="1" colspan="1" aria-label="Name: activate to sort column ascending" style="width: 41px;">Name</th>

        </thead>
         <tbody>
         <tr  role="row" class="odd" th:each="compregloop,incr : ${compregList}">
            <td th:text="${incr.count}" class="sorting_1"></td>
            <td th:text="${compregloop.companyname}"></td>
        </tr>
        </tbody>
       </table>





<div class="text-center">
        <div class="col-sm-12">
        <ul id="pagination-demo" class="pagination-sm"></ul>
        </div>
        <div id="page-content" class="page-content">Page 1</div>
        </div>

    <script type="text/javascript">
        var data = {
                  "page" : "2",
                  "size" :"10"
               }
        $('#pagination-demo').twbsPagination({
            totalPages: 14,
            visiblePages: 6,
            next: 'Next',
            prev: 'Prev',
            onPageClick: function (event, page) {
                //fetch content and render here
                $('#page-content').text('Page ' + page) + ' content here';
              var datapage = { "page":page};           
                $.ajax({
                    type: "POST",
                    url: "/helloo/",
                    data:datapage,
                    contentType:'application/json',
                    success: function (data) {  
                  $('shortstorage').html(data)                 
                        }
                });
            }
        });
        </script>

控制器如下：

@RequestMapping(value = "/getcompany", method = RequestMethod.GET)
    public String getCompany(Model model,HttpServletRequest request,Optional<Integer> pageSize, Optional<Integer> page){
        /// Getting Logged in user
        System.out.println("pageSize--------------------------------");
        System.out.println(page);
        //code added by sargam
        int evalPageSize = pageSize.orElse(INITIAL_PAGE_SIZE);
        int evalPage = (page.orElse(0) < 1) ? INITIAL_PAGE : page.get() - 1;


        System.out.println(evalPage+"--------------------------"+evalPageSize);

      Page<CompanyRegistration> compregPage = companyregister.findAll(PageRequest.of(evalPage, evalPageSize));
      List<CompanyRegistration> compregList = compregPage.getContent();
      model.addAttribute("compregList",compregList);
return "admin/company";
}

      @RequestMapping(value = "/helloo", method = RequestMethod.POST , consumes = MediaType.APPLICATION_JSON_VALUE)
        public String mainWithParamhello(@RequestBody String data, Model model, HttpServletRequest request,
                RedirectAttributes redirectAttributes) {

            System.out.println(data);
            System.out.println("Inside hello2");
             redirectAttributes.addAttribute("pageSize","10");
             redirectAttributes.addAttribute("page", "2");
            return "redirect:/getcompany";
        }

需要注意以下几点：

1. 您希望在 HTML 文档加载后更新它，因此$(document).ready(...).

2. 决定您希望更改生效的节点。使用 jquery 选择器在 Ajax 成功时更新 DOM，即#shortstorage.

3. 找到一种方法将 Ajax 响应中的数据呈现到表格中。此示例只是将输出转储到控制台和页面上。

<script type="text/javascript">
      // Note: Run your scripts when the page has loaded.
      $(document).ready(function () {
        var data = {
          page: "2",
          size: "10"
        };
        $("#pagination-demo").twbsPagination({
          totalPages: 14,
          visiblePages: 6,
          next: "Next",
          prev: "Prev",
          onPageClick: function (event, page) {
            //fetch content and render here
            $("#page-content").text("Page " + page) + " content here";
            var datapage = { page: page };
            $.ajax({
              // type: "POST",
              // Note: using an API placeholder for fake responses
              url: "http://jsonplaceholder.typicode.com/users",
              // data: datapage,
              // contentType: "application/json",
              success: function (data) {
                /**
                 * Note:
                 * 1. The node '#shortstorage' is where you want the changes to take effect.
                 * 2. You will need to find a way to present the data as a table before you render the page.
                 */
                $("#shortstorage").html(JSON.stringify(data));
                console.log(data);
              }
            });
          }
        });
      });
    </script>

这里有一些东西可以让你了解更多，$( 文档 ).ready() https://learn.jquery.com/using-jquery-core/document-ready/