Флажок раскрывающегося списка Bootstrap multiselect не работает в таблице с разбивкой на страницы

У меня есть динамически заполняемая таблица с разбивкой на страницы. Я использую опцию «флажок мультиселекта начальной загрузки» в одном из столбцов. Этот плагин отлично работает на первой странице таблицы, но когда я пытаюсь перейти к следующим страницам в таблице с разбивкой на страницы, «выпадающие флажки с множественным выбором форсирования становятся обычным обычным параметром с множественным выбором без флажка. Также параметр поиска не работает. Есть ли что-то здесь отсутствует?

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery.dataTables.min.css" type="text/css">
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css" type="text/css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/searchDataTable.js"></script>

<script type="text/javascript">
    $(document).ready(function() {
        $('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
    });
</script>

<script>
$(document).ready(function() {
  $('#dbResultsTable').dataTable();
} );
</script>

                <form id="form">
                    <table border="1" id="dbResultsTable" class="table table-striped" >
                        <!-- Dynamically populated table  -->
                    </table>
                <input type="submit" id="submitId"/>
                  </form>

checkbox jquery twitter-bootstrap bootstrap-multiselect jquery-datatables
person harpal18    schedule 31.12.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Учитывая вашу динамически заполняемую таблицу, вы можете подключить обработчик событий к событию изменения страницы (версия с данными > = 1.10) и повторно запустите раскрывающийся список множественного выбора внутри него.

$('#dbResultsTable').on( 'page.dt', function () {

$('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
});

Редактировать:

Вот рабочий пример

Изменил page.dt на draw.dt, так как page.dt срабатывает слишком рано.

    $('#dbResultsTable').on('draw.dt', function () {

       $('.applicationNameSelectClass').multiselect({
            includeSelectAllOption : true ,
             enableFiltering: true,
        });
});
person SSA    schedule 31.12.2014
comment
это не работает, после использования этого кода раскрывающийся список множественного выбора не работает ни на одной странице :( - person harpal18; 31.12.2014
comment
Можете ли вы создать пример jsfiddle? Какую версию datatable вы используете? Запускается ли событие page.dt? Таблица данных должна быть инициализирована перед присоединением обработчика событий page.dt. - person SSA; 31.12.2014
comment
Я использую версию DataTables-1.10.4. Событие page.dt не запускается. Я инициализирую таблицы данных перед подключением обработчика событий page.dt. я постараюсь создать для вас пример jsfiddle. - person harpal18; 31.12.2014
comment
.. вот ссылка jsfiddle: - jsfiddle.net/7x6vc4vc/1, но я не смог найти загрузите несколько ссылок cdn select, чтобы они не давали представления о моей проблеме. пожалуйста, подумайте об этом - person harpal18; 31.12.2014
comment
Обновленный ответ и ваша скрипка также. - person SSA; 31.12.2014
comment
спасибо миллион :) я боролся с этим в течение довольно долгого времени. еще одна вещь, почему мой вариант поиска не работает? - person harpal18; 31.12.2014
comment
В примере поиск jsfiddle у меня работает нормально. - person SSA; 31.12.2014
comment
да, потому что в примере я дал статические данные, для меня это работает для статических данных, но не для динамически заполняемых данных - person harpal18; 31.12.2014
comment
У меня нет четкого представления о том, что здесь jsfiddle.net/euryqcrf/31 данные взяты из источника json. и поиск работает нормально. Убедитесь, что в консоли javascript нет синтаксической ошибки. - person SSA; 31.12.2014