Replies

• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2022

  Now the problem is, the pagination state saving is not functioning anymore after implementing

  Are you saying that the paging buttons aren't displayed or that your are losing the page length specified by the user. Best thing to do is to provide a simple test case showing what you are doing so we can help debug. Also take a look at the browser's console for errors.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• barneybear Posts: 4Questions: 0Answers: 0

  March 2022

  Hi thanks for the reply, what I meant for the pagination state saving is supposed when the stateSave is on 'true', for example, I navigate to the second page of the table, and then I jumped to the other page to do something else and return back to the table, it should be staying on the second page of the table, but after implementing Bfullen's code( which solved my problem for saving the search value in the search input columns when returning to the page), it just doesn't work anymore.
• barneybear Posts: 4Questions: 0Answers: 0

  March 2022 edited March 2022

    $('#all-book-types-table tfoot tr .searchable').each(function() {
                  var title = $(this).text();
                  $(this).html('<input type="text" id="' + title +
                      '" class="form-control search-column fas" placeholder="&#xf002" />');
              });
  
   var all_book_types_table = $('#all-book-types-table').DataTable({
                  "sDom": '<"top"lB><"toolbar">rt<"bottom"ip><"clear">',
                  "responsive": true,
                  "autoWidth": false,
                  "stateSave": true,
                  "columnDefs": [
                          {
                              "width": '15%',
                              "targets": 0
                          },
                          {
                              "width": '25%',
                              "targets": 1
                          },
                          {
                              "width": '18%',
                              "targets": 2
                          },
                          {
                              "width": '18%',
                              "targets": 3
                          },
                          {
                              "width": '5%',
                              "targets": 4
                          },
                          {
                              "width": '11%',
                              "targets": 5
                          },
                          {
                              "width": '10%',
                              "targets": 6
                          },
                          {
                              "width": '5%',
                              "className": "text-center",
                              "targets": 7
                          },
                          {
                              "width": '5%',
                              "className": "text-center",
                              "targets": 8
                          }
                      ],
                  "order": [
                          [ 8, "desc"]
                      ],
                  "pagingType": "full_numbers",
                  "lengthMenu": [
                          [10, 25, 50, -1],
                          [10, 25, 50, "All"]
                      ],
                  "language": {
                      "lengthMenu": "Show _MENU_ Book Types &nbsp;",
                      "zeroRecords": "No book type found",
                      "infoEmpty": "No book type available",
                      "info": "Showing _START_ to _END_ of _TOTAL_ book type",
                      "infoFiltered": "(filtered from _MAX_ total book type)"
                  },
                  initComplete: function() {
                      // Apply the search
                      this.api().columns().every(function() {
                          var that = this;
  
                          $('input', this.footer()).on('keyup change clear', function() {
                              if (that.search() !== this.value) {
                                  that
                                      .search(this.value)
                                      .draw();
                              }
                          });
                          
                      });
                  }
              });
  
              // load the searching value when savestate happens
              var state = all_book_types_table.state.loaded();
              if (state) {
                  all_book_types_table.columns().eq(0).each(function (colIdx) {
                      var colSearch = state.columns[colIdx].search;
  
                      if (colSearch.search) {
                          $('input', all_book_types_table.column(colIdx).footer()).val(colSearch.search);
                      }
                  });
  
                  all_book_types_table.draw();
              }
  
• kthorngren Posts: 20,425Questions: 26Answers: 4,794

  March 2022

  The problem is likely doe to all_book_types_table.draw(); on line 95. The draw() will cause Datatables to display the first page. You can probably remove it or pass the parameter false into the draw() API to stay on the same page, like this:

  all_book_types_table.draw(false);
  

  Kevin
• barneybear Posts: 4Questions: 0Answers: 0

  March 2022

  Thank you very much...it works! Xie xie