DataTable individual searching column working with stateSave function

DataTable individual searching column working with stateSave function

barneybearbarneybear Posts: 4Questions: 0Answers: 0

I got the individual searching column working fine with stateSave function, but when I jump to another page and redirect back to the table, the table got filtered based on the searching that I just did before but the searching field got cleared. But for this issue, I have followed the solution shared by Bfullen here...https://datatables.net/forums/discussion/comment/89795/#Comment_89795 and it works just fine...

Now the problem is, the pagination state saving is not functioning anymore after implementing Bfullen's code..Can someone please help? how to make it both work together?(saving the search value when redirecting back to the page, and also saving the pagination state as well)

Replies

  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    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

  • barneybearbarneybear Posts: 4Questions: 0Answers: 0

    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.

  • barneybearbarneybear Posts: 4Questions: 0Answers: 0
    edited March 27
      $('#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();
                }
    
  • kthorngrenkthorngren Posts: 17,238Questions: 25Answers: 4,091

    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

  • barneybearbarneybear Posts: 4Questions: 0Answers: 0

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

Sign In or Register to comment.