Twbs pagination unable to load new page data in datatable

问题

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>

The Controller is as folows:

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

Some few things to look at:

You want to update your HTML document once it has loaded, hence $(document).ready(...).
Decide on the node you want changes to take effect. Use jquery selectors to update the DOM on Ajax success i.e. #shortstorage.
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>

Here's something for you to learn more about, $( document ).ready()

来源：https://stackoverflow.com/questions/62427881/twbs-pagination-unable-to-load-new-page-data-in-datatable

标签

ajax

Spring

datatables

pagination