TWBS分页无法在数据表中加载新页面数据 [英] Twbs pagination unable to load new page data in datatable

问题描述

我正在做分页，但是当我单击第二页时，发现无法从twbs插件加载数据.实际上，该方法是从ajax调用中调用的，但数据表数据仍然相同.有人可以告诉我该如何使用服务器中的新数据填充表.

Hi I am working on pagination and found that unable to load data from twbs plugin when i click on the 2nd page. in fact the method is called from the ajax call but the datatable data is still the same. can someone tell me what to do to fill the table with the new data from the server.

看看百里香和弹簧靴中的代码.

have a look to the code in thymeleaf and 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(...).

确定要使更改生效的节点.使用jquery选择器在Ajax成功(即#shortstorage.

Decide on the node you want changes to take effect. Use jquery selectors to update the DOM on Ajax success i.e. #shortstorage.

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

Find a way to present your data from the Ajax response to a table. This example just dumps the output to the console and onto the page.

<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>

---

以下是您可以了解的更多信息， $(document). ready()

这篇关于TWBS分页无法在数据表中加载新页面数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！