Пагинация Twbs не может загрузить данные новой страницы в datatable - PullRequest
Новая
       19

Пагинация Twbs не может загрузить данные новой страницы в datatable

0 голосов
/ 17 июня 2020

enter image description here

Привет, я работаю над разбивкой на страницы и обнаружил, что не могу загрузить данные из плагина twbs, когда я нажимаю на вторую страницу. на самом деле метод вызывается из вызова ajax, но данные остаются теми же. может кто-нибудь сказать мне, что делать, чтобы заполнить таблицу новыми данными с сервера.

посмотрите код в тимелеафе и весенней загрузке. 

     <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 Ответ

1 голос
/ 18 июня 2020

Некоторые вещи, на которые стоит обратить внимание:

  1. Вы хотите обновить документ HTML после его загрузки, следовательно, $(document).ready(...).

  2. Решите, на каком узле вы хотите, чтобы изменения вступили в силу. Используйте селекторы jquery, чтобы обновить DOM при успешном Ajax, т.е. #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>

Вот кое-что, о чем вы можете узнать больше, $ (document) .ready ()

...