JQuery живой поиск и нумерация страниц объединены - PullRequest
Новая
       6

JQuery живой поиск и нумерация страниц объединены

0 голосов
/ 25 августа 2018

У меня простой вопрос, но для тех, кто борется даже с базовыми навыками, это ракетостроение. Я скачал два очень простых скрипта: один - это поиск в режиме реального времени, а другой - скрипт разбиения на страницы. Они оба действуют на столе с некоторыми данными в нем. Все работает, как и ожидалось, за исключением того, что когда я удаляю поисковый запрос, а не возвращаюсь назад к разбитой на страницы таблице, мне показываются все записи. Используемые скрипты здесь:

https://www.codexworld.com/jquery-live-search-filter-on-html-table/

https://github.com/wikiti/jquery-paginate

Они идеально подходят для моего простого приложения, но я не знаю, как заставить таблицу вернуться к нумерации страниц, когда я удаляю поисковый запрос. Это код, который я использую: 

<script>    
$(document).ready(function(){
    $('.dataSearch').on('keyup',function(){
        var searchTerm = $(this).val().toLowerCase();
        $('#carriersTable tbody tr').each(function(){
            var linestr = $(this).text().toLowerCase();
            if(linestr.indexOf(searchTerm) === -1){
                $(this).hide();
            }else{
                $(this).show();
            }
        });
    });
});

$('#carriersTable').paginate({ limit: 2 });
</script>

Я попытался переместить последнюю строку (все возможные комбинации), но он просто генерирует бесчисленные ссылки на страницы при каждом поиске:).

Спасибо!

1 Ответ

0 голосов
/ 30 ноября 2018

Вот предложение.Возможно, это можно оптимизировать, но это показывает идею. 

<script>    
$(document).ready(function(){
    $('.dataSearch').on('keyup',function() {
        // Get the search searchTerm
        var searchTerm = $(this).val().toLowerCase();

        // Prepare a "state" array to store rows you need to get back to
        var state = [];

        // Use the each loop with "key" as index iterator parameter
        $('#carriersTable tbody tr').each(function(key, value) {
            var linestr = $(this).text().toLowerCase();
            if (linestr.indexOf(searchTerm) === -1) {
                $(this).hide();
            } else {
                // Here you store the row in state variable since you want to show it later
                state.push($(this));

                // Show the row for the current display
                $(this).show();
            }
        });

        // Now, you have a state var containing all the rows previously shown
        console.log(state);

        // You can create an event to detect when the search box is empty, and restore the state
        if (searchTerm.length == 0) {
            // Then you restore the state array after turning it into a string
            var restored = state.join('');

            // Empty the table and add the string
            $('#carriersTable').empty().append(restored);

            // You might need to refresh your pagination here, depends on your plugin :)
        }
    });
});
</script>
...