У меня есть две стандартные таблицы (возможно, больше в будущем) с более чем 100 строками в каждой. Я вставил кнопку загрузки больше для каждой таблицы в 8 строк.
Работает только одна кнопка (первая таблица). Я предполагаю, что мне нужно назначить этот код для КАЖДОЙ таблицы, чтобы он работал? Но не знаете, как это сделать?
ОБНОВЛЕНИЕ:
Мне удалось заставить каждую кнопку управлять своей таблицей, однако у меня есть другая проблема сейчас же.
Когда я нажимаю одну кнопку load-more
, она загружает следующие 8 строк должным образом, когда я нажимаю другую кнопку load-more
, она загружает следующие 8 строк, которые были загружены в предыдущую таблицу, поэтому он прыгает с 8 до 17, 18, 19 ... и т. д. c
Вы можете увидеть здесь в этом коде ручки:
https://codepen.io/pixelboutiqueuk-the-lessful/pen/JjogZXa?editors=1000
Это это то, что у меня сейчас есть после многих настроек:
// load more buttons
var songTotalRows = $('.songs-table tr').length;
if ( songTotalRows > 8 ) {
$('.songs-table').after('<div class="load-more"><input id="song-show" type="button" value="Load More" /></div>');
}
var albumTotalRows = $('.album-table tr').length;
if ( albumTotalRows > 8 ) {
$('.album-table').after('<div class="load-more"><input id="album-show" type="button" value="Load More" /></div>');
}
var totalrowshidden;
var rows2display=8;
var rem=0;
var rowCount=0;
var forCntr;
var forCntr1;
var MaxCntr=0;
$('.hide').click(function() {
var rowCount = $('.spotify-table tr').length;
rowCount=rowCount/2;
rowCount=Math.round(rowCount)
for (var i = 0; i < rowCount; i++) {
$('tr:nth-child('+ i +')').hide(300);
}
});
$('#song-show').click(function() {
rowCount = $('.songs-table tr').length;
MaxCntr=forStarter+rows2display;
if (forStarter<=$('.songs-table tr').length) {
for (var i = forStarter; i < MaxCntr; i++) {
$('.songs-table tr:nth-child('+ i +')').show(200);
}
forStarter=forStarter+rows2display
} else {
$('#song-show').hide();
}
});
$('#album-show').click(function() {
rowCount = $('.album-table tr').length;
MaxCntr=forStarter+rows2display;
if (forStarter<=$('.album-table tr').length) {
for (var i = forStarter; i < MaxCntr; i++) {
$('.album-table tr:nth-child('+ i +')').show(200);
}
forStarter=forStarter+rows2display
} else {
$('#album-show').hide();
}
});
var rowCount = $('.spotify-table tr').length;
for (var i = $('.spotify-table tr').length; i > rows2display; i--) {
rem=rem+1
$('.spotify-table tr:nth-child('+ i +')').hide(200);
}
forCntr=$('.spotify-table tr').length-rem;
forStarter=forCntr+1