DataTable individual searching column working with stateSave function

barneybear

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)

kthorngren

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

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

  $('#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

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

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