Продублировал таблицу и слетел плагин JQuerry

175
07 февраля 2019, 03:00

На сайте http://pta-ua.com/ добавил второй рейтинг(раньше был один) и слетели настройки. Теперь работает только тот, который я добавил, а старый - нет. При нажатии на "Показать весь рейтинг" в первом рейтинге, открывается второй.

    <div class="table2">
   <h3 class="h3">Парный рейтинг</h3>
   <table id ="myTable1" class="tablesorter tablesorter1">
      <thead>
         <tr>
            <th>№</th>
            <th>Фамилия Имя</th>
            <th class="header headerSortUp">Очки</th>
         </tr>
      </thead>
      <tbody class="selected">
         <tr>
            <td>1</td>
            <td>Мацюк Александр</td>
            <td>524</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Мурзин Максим</td>
            <td>119</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Тюков Владимир</td>
            <td>263</td>
         </tr>
         <tr>
            <td>4</td>
            <td>Гаврилов Константин</td>
            <td>261</td>
         </tr>
         <tr>
            <td>5</td>
            <td>Кутя Сергей</td>
            <td>148</td>
         </tr>
         <tr>
            <td>6</td>
            <td>Кислань Елизавета</td>
            <td>195</td>
         </tr>
         <tr>
            <td>7</td>
            <td>Моисеенко Александр</td>
            <td>546</td>
         </tr>
         <tr>
            <td>8</td>
            <td>Краснов Денис</td>
            <td>110</td>
         </tr>
         <tr>
            <td>9</td>
            <td>Кислань Сергей</td>
            <td>341</td>
         </tr>
         <tr>
            <td>10</td>
            <td>Кулага Илья</td>
            <td>276</td>
         </tr>
      </tbody>
   </table>
   <!--ТАБЛИЦА ЗАКНОЧИЛАСЬ-->
   <a id="showAll1">Показать весь рейтинг</a>
</div>

Это таблица которую добавил, а ниже таблица, которая была

<div id="rating" class="rating">
   <h3 class="h3">Одиночный рейтинг</h3>
   <!--НАЧИНАЕТСЯ ТАБЛИЦА-->
   <table id ="myTable" class="tablesorter">
      <thead>
         <tr>
            <th>№</th>
            <th>Фамилия Имя</th>
            <th class="header headerSortUp">Очки</th>
         </tr>
      </thead>
      <tbody class="selected">
         <tr>
            <td>1</td>
            <td>Мацюк Александр</td>
            <td>524</td>
         </tr>
         <tr>
            <td>2</td>
            <td>Мурзин Максим</td>
            <td>119</td>
         </tr>
         <tr>
            <td>3</td>
            <td>Тюков Владимир</td>
            <td>263</td>
         </tr>
         <tr>
            <td>4</td>
            <td>Гаврилов Константин</td>
            <td>261</td>
         </tr>
         <tr>
            <td>5</td>
            <td>Кутя Сергей</td>
            <td>148</td>
         </tr>
         <tr>
            <td>6</td>
            <td>Кислань Елизавета</td>
            <td>195</td>
         </tr>
         <tr>
            <td>7</td>
            <td>Моисеенко Александр</td>
            <td>546</td>
         </tr>
         <tr>
            <td>8</td>
            <td>Краснов Денис</td>
            <td>110</td>
         </tr>
         <tr>
            <td>9</td>
            <td>Кислань Сергей</td>
            <td>341</td>
         </tr>
         <tr>
            <td>10</td>
            <td>Кулага Илья</td>
            <td>276</td>
         </tr>
         <tr> 
      </tbody>
   </table>
   <!--ТАБЛИЦА ЗАКНОЧИЛАСЬ-->
   <a id="showAll">Показать весь рейтинг</a>
</div>

Вот js код который у меня. Мне нужно, что бы вторая таблица функционировала точно так же, как и первая

 $(document).ready(function() 
 { 
  $("#myTable").tablesorter( {sortList: [[2,1], [0,0]]} );
  $("#myTable").tablesorter( {debug:false} );
 $('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } }); 
} 
);
 $(function() {
    // add new widget called indexFirstColumn
    $.tablesorter.addWidget({
        // give the widget a id
        id: "indexFirstColumn",
        // format is called when the on init and when a sorting has finished
        format: function(table) {               
            // loop all tr elements and set the value for the first column  
            for(var i=0; i < table.tBodies[0].rows.length; i++) {
                $("tbody tr:eq(" + i + ") td:first",table).html(i+1);
            }                                   
        }
    });

    $("table").tablesorter({
        widgets: ['zebra','indexFirstColumn']
    });
    var button = document.getElementById('showAll');
    table = document.getElementById('myTable');
button.addEventListener('click', function() {
  // Проверяем на наличие класса и  вызываем соответсвуюущую функцию
  table.classList.contains('opened') ? hideRows()  : showRows();
});
function showRows() {
  table.classList.add('opened');
  button.innerHTML = 'Скрыть';
}
function hideRows() {
  table.classList.remove('opened');
  button.innerHTML = 'Показать весь рейтинг';
}
var button = document.getElementById('showAll1');
    table = document.getElementById('myTable1');
button.addEventListener('click', function() {
  // Проверяем на наличие класса и  вызываем соответсвуюущую функцию
  table.classList.contains('opened') ? hideRows()  : showRows();
});
function showRows() {
  table.classList.add('opened');
  button.innerHTML = 'Скрыть';
}
function hideRows() {
  table.classList.remove('opened');
  button.innerHTML = 'Показать всё';
}
});
Answer 1

Просто так копирование кода не даст желаемого результата. У вас две таблицы, а ссылки на одни и те же кнопки и т.д. Вам надо разделить логику чтоб JS понимал что именно надо обновить по клику на ту или другую кнопку. Примерно так, только лучше нормально назовите переменные, чтоб легче было потом с этим кодом вам же работать. https://codepen.io/Lukyanenko/pen/zmNWvK?editors=1010

$(document).ready(function() 
 { 
  $("#myTable").tablesorter( {sortList: [[2,1], [0,0]]} );
  $("#myTable").tablesorter( {debug:false} );
 $('table').tablesorter({ headers: { 0: { sorter: false}, 1: {sorter: false} } }); 
} 
);
 $(function() {
    // add new widget called indexFirstColumn
    $.tablesorter.addWidget({
        // give the widget a id
        id: "indexFirstColumn",
        // format is called when the on init and when a sorting has finished
        format: function(table) {               
            // loop all tr elements and set the value for the first column  
            for(var i=0; i < table.tBodies[0].rows.length; i++) {
                $("tbody tr:eq(" + i + ") td:first",table).html(i+1);
            }                                   
        }
    });

    $("table").tablesorter({
        widgets: ['zebra','indexFirstColumn']
    });
    var button = document.getElementById('showAll');
    var table = document.getElementById('myTable');
button.addEventListener('click', function() {
  // Проверяем на наличие класса и  вызываем соответсвуюущую функцию
  console.log(table.classList.contains('opened'))
  table.classList.contains('opened') ? hideRows()  : showRows();
});
function showRows() {
  table.classList.add('opened');
  button.innerHTML = 'Скрыть';
}
function hideRows() {
  table.classList.remove('opened');
  button.innerHTML = 'Показать весь рейтинг';
}
var button2 = document.getElementById('showAll1');
var table2 = document.getElementById('myTable1');
button2.addEventListener('click', function() {
  // Проверяем на наличие класса и  вызываем соответсвуюущую функцию
  table2.classList.contains('opened') ? hideRows2()  : showRows2();
});
function showRows2() {
  table2.classList.add('opened');
  button2.innerHTML = 'Скрыть';
}
function hideRows2() {
  table2.classList.remove('opened');
  button2.innerHTML = 'Показать всё';
}
});
  [1]: h
READ ALSO
listener на удаление элемента

listener на удаление элемента

Существуют ли какой либо стандартный Event на удаление исчезновение элемента из DOMЧто-то типа:

198
Как вернуть класс ребенка [дубликат]

Как вернуть класс ребенка [дубликат]

На данный вопрос уже ответили:

196
Сильно ли будит нагружен мой проект таким кодом?

Сильно ли будит нагружен мой проект таким кодом?

Сильно ли пострадает оптимизация от такого кода?

144