#javascript #php #jquery #pagination #icheck
Вопрос:
Я пытаюсь создать разбиение на страницы для динамических таблиц с данными из базы данных. Что я сделал, так это сначала загрузил все записи и разбил результат на страницы. Разбиение на страницы работает, однако флажок становится недоступным.
Я предполагаю, что это из-за того, как я сохранил все tr в массиве, чтобы отобразить его.
HTML
Кнопки
lt;div class="btn-group float-right"gt; lt;button class="btn btn-white btn-sm btn-prev"gt;lt;i class="fa fa-arrow-left"gt;lt;/igt;lt;/buttongt; lt;button class="btn btn-white btn-sm btn-next"gt;lt;i class="fa fa-arrow-right"gt;lt;/igt;lt;/buttongt; lt;/divgt; Стол
lt;table class="table table-hover table-mail"gt; lt;tbodygt; lt;?php if(!empty($mails)){ foreach($mails as $key) { $isRead = ($key['isRead'] == 0) ? "unread" : "read"; $isImportant = ($key['isImportant'] == 1) ? "lt;span class='float-left text-warning important'gt;lt;i class='fa fa-star'gt;lt;/igt;lt;/spangt;" : ""; ?gt; lt;tr class="lt;?php echo $isRead; ?gt;" data-id="lt;?php echo $key['mailID']; ?gt;"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=lt;?php echo $key['mailID']; ?gt;"gt;lt;?php echo $isImportant; ?gt;amp;nbsp;lt;?php echo ucwords(strtolower($guiClass-gt;e($key['name']))); ?gt;lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=lt;?php echo $key['mailID']; ?gt;"gt;lt;?php echo mb_strimwidth(ucfirst($guiClass-gt;e($key['subject'])), 0, 60, "..."); ?gt;lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;lt;?php echo time_passed(date(strtotime($key['created_at']))); ?gt;lt;/tdgt; lt;/trgt; lt;?php }}else{ ?gt; lt;trgt; lt;td class="text-center"gt;No Messageslt;/tdgt; lt;/trgt; lt;?php } ?gt; lt;/tbodygt; lt;/tablegt; JS
lt;scriptgt; $(document).ready(function(){ $(".i-checks").iCheck({ checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green", }); // Pagination var current_page = 1; var records_per_page = 10; var records = $(".table-mail").find("tbody").find("tr").length; var data = []; $(".mail-box") .find("table") .find("tbody") .find("tr") .each(function () { data.push($(this).prop("outerHTML")); }); function prevPage() { if (current_page gt; 1) { current_page--; changePage(current_page); } } function nextPage() { if (current_page lt; numPages()) { current_page ; changePage(current_page); } } function numPages() { return Math.ceil(records / records_per_page); } function changePage(page) { var table = $(".table-mail").find("tbody"); if (page lt; 1) page = 1; if (page gt; numPages()) page = numPages(); table.html(""); for ( var i = (page - 1) * records_per_page; i lt; page * records_per_page; i ) { table.append(data[i]); } } $(".btn-next").click(function () { nextPage(); }); $(".btn-prev").click(function () { prevPage(); }); changePage(1); }); lt;/scriptgt; 
Редактировать
Основываясь на некоторых комментариях, повторная инициализация iCheck-это правильный путь. Но это все еще не работает (по крайней мере, в моем текущем коде).
В целях тестирования я попытался жестко закодировать tr s, используя приведенный ниже код, и использовал его для добавления в тело, и это сработало. Я также добавил повторную инициализацию iCheck в этом тесте.
for (var i = 0; i lt; records; i ) { tr[i] = "lt;tr class='read' data-id='" i "'gt;lt;td class='check-mail'gt;lt;input type='checkbox' class='i-checks mail' autocomplete='off'gt;lt;/tdgt;lt;td class='mail-contact'gt;lt;a href='mail_detail.php?id=1'gt;amp;nbsp;John Doelt;/agt;lt;/tdgt;lt;td class='mail-subject'gt;lt;a href='mail_detail.php?id=1'gt;This is a subject " i "lt;/agt;lt;/tdgt;lt;td class='text-right mail-date'gt;2 hours agolt;/tdgt;lt;/trgt;"; } Итак, как и мое первое предположение, я думаю, что проблема заключается в том, как я получаю все данные, сохраняю их в массиве, называемом данными, и отображаю их обратно. Есть какие-либо предложения о том, как мне правильно получить все tr?
Комментарии:
1. Здравствуйте, вы пробовали сначала инициализировать их? или после заполнения таблицы вам нужно инициализировать их обратно, потому что icheck, возможно, был уничтожен.
2. Я думаю, это происходит потому, что исходные флажки уничтожаются во время разбиения на страницы, и вы теряете всех слушателей событий. Обычно это предотвращается делегированием событий на родительском сервере, но поскольку вы инициализируете их с помощью плагина, лучше звонить
$(".i-checks").iCheck()после каждой разбиения на страницы.3. Я добавил повторную инициализацию, но она все еще не работает. Я думаю, это из-за того, как я получаю все trs и сохраняю их в массиве. Поищите мою правку
Ответ №1:
Как отметили ребята в комментариях, вам необходимо повторно инициализировать компоненты icheck после разбиения на страницы, поэтому лучше добавить приведенный ниже код в конце changePage функции :
$(document).ready(function() { // Pagination var current_page = 1; var records_per_page = 10; var records = $(".table-mail").find("tbody").find("tr").length; var data = []; $(".mail-box") .find("table") .find("tbody") .find("tr") .each(function() { data.push($(this).prop("outerHTML")); }); function prevPage() { if (current_page gt; 1) { current_page--; changePage(current_page); } } function nextPage() { if (current_page lt; numPages()) { current_page ; changePage(current_page); } } function numPages() { return Math.ceil(records / records_per_page); } function changePage(page) { var table = $(".table-mail").find("tbody"); if (page lt; 1) page = 1; if (page gt; numPages()) page = numPages(); table.html(""); for ( var i = (page - 1) * records_per_page; i lt; page * records_per_page; i ) { table.append(data[i]); } $(".i-checks").iCheck({ checkboxClass: "icheckbox_square-green", radioClass: "iradio_square-green", }); } $(".btn-next").click(function() { nextPage(); }); $(".btn-prev").click(function() { prevPage(); }); changePage(1); }); lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.min.js"gt;lt;/scriptgt; lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /gt; lt;script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/icheck.min.js"gt;lt;/scriptgt; lt;link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" /gt; lt;link href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.3/skins/all.min.css" rel="stylesheet" /gt; lt;div class="mail-box"gt; lt;div class="btn-group float-right"gt; lt;button class="btn btn-white btn-sm btn-prev"gt;lt;i class="fa fa-arrow-left"gt;lt;/igt;lt;/buttongt; lt;button class="btn btn-white btn-sm btn-next"gt;lt;i class="fa fa-arrow-right"gt;lt;/igt;lt;/buttongt; lt;/divgt; lt;table class="table table-hover table-mail"gt; lt;tbodygt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 1lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 1lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;tr class="read" data-id="1"gt; lt;td class="check-mail"gt; lt;input type="checkbox" class="i-checks mail" autocomplete="off"gt; lt;/tdgt; lt;td class="mail-contact"gt;lt;a href="mail_detail.php?id=1"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="mail-subject"gt;lt;a href="mail_detail.php?id=2"gt;PAGE 2lt;/agt;lt;/tdgt; lt;td class="text-right mail-date"gt;PAGE 2lt;/tdgt; lt;/trgt; lt;/tbodygt; lt;/tablegt; lt;/divgt; Комментарии:
1. Я добавил повторную инициализацию, но она все еще не работает. Я думаю, это из-за того, как я получаю все trs и сохраняю их в массиве. Поищите мою правку
2. Можете ли вы показать нам
mail-boxструктуру таблицы3. почтовый ящик-это просто оболочка div .table-mail. Теперь я указал саму таблицу.
4. Проверьте обновление с помощью рабочего примера.
5. Спасибо! Наконец — то это работает. Я заметил, что инициализация iCheck в верхней части скрипта приводит к тому, что флажки не могут быть установлены. Поэтому я удалил его и перенес инициализацию на после каждой разбивки на страницы-это решение. Большое спасибо.