сдвиг отображения столбцов таблицы по клику на кнопку

Question

Подскажите, пожалуйста, может кто реализовывал. Имеется таблица:

$("#right-button").click(function() {
  event.preventDefault();
  $(".table-responsive").animate(
    {
      scrollLeft: "+=300px"
    },
    "slow"
  );
});

$("#left-button").click(function() {
  event.preventDefault();
  $(".table-responsive").animate(
    {
      scrollLeft: "-=300px"
    },
    "slow"
  );
});

.center {
  float: left;
  width: 40%;
  height: 200px;
  border: 1px solid black;
  margin: 1px;
  overflow: hidden;
  /*will change this to hidden later to deny scolling to user*/
  white-space: nowrap;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll-table col-md-offset-2 col-md-2">
    <button class="ComparisonHeader__arrowLeft btn btn-danger" id="left-button"> <- </button>
    <button class="ComparisonHeader__arrowRight btn btn-danger" id="right-button"> -> </button>
</div>

<div class="center table-responsive" style="overflow-x: auto;">
<table class="table" id="ex3">
        <tbody>
        <tr>
            <th></th>
            <th>header 1</th>
            <th>header 2</th>
            <th>header 3</th>
            <th>header 4</th>
            <th>header 5</th>
            <th>header 6</th>
            <th>header 7</th>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
            <td>1-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
            <td>2-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>3-1</td>
            <td>3-2</td>
            <td>3-3</td>
            <td>3-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
        <tr>
            <td class="remove_button"></td>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
         <tr>
            <td class="remove_button"></td>
            <td>4-1</td>
            <td>4-2</td>
            <td>4-3</td>
            <td>4-4</td>
        </tr>
        </tbody>
    </table>
</div>

В таком виде прокрутка работает как карусель при клике на кнопку, но это не совсем то. Возможно ли сделать так: по умолчанию показывается 4 столбца таблицы, если столбцов больше чем 4 то по клике на кнопку -> 1-ый столбец таблицы делается невидимым, а 5-ый столбец добавляется (снова 4-столбца). А по клику на <- 5-ый столбец становится невидимым а 1-ый добавляется (снова видим 4 столбца). И так если двигаться вправо всегда 4 столбца. Может кто то реализовывал? Буду очень благодарен, если подскажите прям примером, что бы можно было под себя покрутить) P.S. c jquery не очень дружу, учусь можно сказать.

Answer 1

$(document).ready(function() {

  let table = $('#ex3');
  let numcols = $('th', table).length;
  let startcol = 1; // прокрутка со второй колонки, первую фиксируем
  let viewsize = 4; // число видимых колонок
  let range = numcols - viewsize;
  let index = startcol;

  // показываем нужные колонки
  for (let i = 0; i < startcol + viewsize; i++) getcol(table, i + 1).show();

  $('#right-button').click(function() {
    if (index < range) {
      getcol(table, index + 1).hide();
      getcol(table, index + viewsize + 1).show();
      index++;
    }
  });

  $('#left-button').click(function() {
    if (index > startcol) {
      getcol(table, index).show();
      getcol(table, index + viewsize).hide();
      index--;
    }
  });
})

function getcol(table, colnum) {
  return $('th:nth-child(' + colnum + '), td:nth-child(' + colnum + ')', table);
}

#ex3 th,
#ex3 td {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <button class="btn" id="left-button"> &lt;- </button>
  <button class="btn" id="right-button"> -&gt; </button>
</div>

<table class="table" id="ex3">
  <tbody>
    <tr>
      <th>fixed</th>
      <th>header 1</th>
      <th>header 2</th>
      <th>header 3</th>
      <th>header 4</th>
      <th>header 5</th>
      <th>header 6</th>
      <th>header 7</th>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>1-1</td>
      <td>1-2</td>
      <td>1-3</td>
      <td>1-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>2-1</td>
      <td>2-2</td>
      <td>2-3</td>
      <td>2-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>3-1</td>
      <td>3-2</td>
      <td>3-3</td>
      <td>3-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
    <tr>
      <td class="remove_button">Button</td>
      <td>4-1</td>
      <td>4-2</td>
      <td>4-3</td>
      <td>4-4</td>
    </tr>
  </tbody>
</table>

Возможно не самый оптимальный вариант, но работает. Можно указать любое количество отображаемых колонок, а также фиксировать левую (или несколько).

БЛОГ НА HUSL

сдвиг отображения столбцов таблицы по клику на кнопку

Ответы (1 шт):