0

Подскажите как ограничить количество записей в html таблице при помощи js

UPDATE2

Вот код с таблицей, как прикрутить? Делаю так

<head>
    <style>
        table tbody tr:nth-child(n+6) {
            display:none;
        }

        table.viewall tbody tr:nth-child(n+6) {
            display:table-row;
        }
    </style>
<script 
     src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body th:fragment="payments-scheduled(firstBunches, secondBunches, 
failedBunches, firstFriday, secondFriday)">
<fieldset>
<div class="form-group">
    <div class="table-container">
        <h3 class="header bolder smaller" th:text="#{bunch.failed}></h3>
        <div class="row">
            <div class="col-lg-11">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <table class="footable table table-stripped toggle-arrow-tiny">
                            <thead>
                            <tr>
                                <th width="10" th:text="#{provider.code}">Имя</th>
                                <th width="200" th:text="#{provider.legalName}">Имя</th>
                                <th width="200" th:text="#{providerBalance.balance}">Состояние</th>
                                <th width="100" th:text="#{providerPaymentBunch.paymentDueDate}">Код</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="entity,iterStat : ${balances}" th:object="${entity}">
                                <td th:text="*{provider.code}"></td>
                                <td th:text="*{provider.legalName}"></td>
                                <td><a th:text="*{balance}" th:href="@{${rootPath}+'/balance/'+ *{id}}"></a></td>
                                <td th:text="*{#ldates.format(providerPaymentBunch?.date)}"></td>
                            </tr>
                            </tbody>
                        </table>
                        <button class="btn-viewall">показать все</button>
                    </div>
                </div>
            </div>
        </div>
     ....
 <script>
    $('.btn-viewall').on('click',function(){
        $('table').toggleClass('viewall');
    });
</script>
</body>

Ошибка

actual:697 Uncaught ReferenceError: $ is not defined at actual:697

строка

$('.btn-viewall').on('click',function(){ $('table').toggleClass('viewall'); });

14
  • что значит отграничить?
    – Cheg
    4 июл 2017 в 7:00
  • @Cheg, к примеру с сервера пришло данных на 10 строк, показать первых 5, а все остальные показывать по нажатию кнопки "Select All'
    – YuriyK
    4 июл 2017 в 7:02
  • вариант на jquery подойдет?
    – Cheg
    4 июл 2017 в 7:08
  • @Cheg, да, подойдет!
    – YuriyK
    4 июл 2017 в 7:19
  • @Cheg, upd, гляньте плиз
    – YuriyK
    4 июл 2017 в 8:25

2 ответа 2

2

Вариант #1:

$('.btn-viewall').on('click', function() {
  $(this).closest('.block-with-table').find('table').toggleClass('viewall');
});
.block-with-table {
  padding-bottom: 20px;
  border-bottom: #ccc solid 1px;
  margin-bottom: 20px;
}

table tbody tr:nth-child(n+6) {
  display: none;
}

table.viewall tbody tr:nth-child(n+6) {
  display: table-row;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-with-table">
  <table>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  <button class="btn-viewall">показать все</button>
</div>
<div class="block-with-table">
  <table>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  <button class="btn-viewall">показать все</button>
</div>

Вариант #2:

$('.btn-viewall').on('click', function() {
  if (!$(this).hasClass('active')) {
    $(this).closest('.block-with-table').find('table tbody tr:nth-child(n+6)').show();
  } else {
    $(this).closest('.block-with-table').find('table tbody tr:nth-child(n+6)').hide();
  }
  $(this).toggleClass('active');
});
.block-with-table {
  padding-bottom: 20px;
  border-bottom: #ccc solid 1px;
  margin-bottom: 20px;
}

table tbody tr:nth-child(n+6) {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-with-table">
  <table>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  <button class="btn-viewall">показать все</button>
</div>
<div class="block-with-table">
  <table>
    <tbody>
      <tr>
        <td>1</td>
      </tr>
      <tr>
        <td>2</td>
      </tr>
      <tr>
        <td>3</td>
      </tr>
      <tr>
        <td>4</td>
      </tr>
      <tr>
        <td>5</td>
      </tr>
      <tr>
        <td>6</td>
      </tr>
      <tr>
        <td>7</td>
      </tr>
      <tr>
        <td>8</td>
      </tr>
      <tr>
        <td>9</td>
      </tr>
      <tr>
        <td>10</td>
      </tr>
    </tbody>
  </table>
  <button class="btn-viewall">показать все</button>
</div>

1-й вариант подойдет больше, если при адаптиве планируется изменять кол-во отображаемых/скрытых строк.

2
  • В CSS table tbody tr:nth-child(n+6) {... и JS $('table tr:nth-child(n+6)')... разные селекторы, лучше привести к одному виду (добавить/убрать tbody) 4 июл 2017 в 8:08
  • 1
    @ЕвгенийМиронов спасибо за замечание, поправил ответ
    – Cheg
    4 июл 2017 в 8:13
1

Вот так можно совсем без js:

input {
  display: none;
}
label {
  border: solid 1px;
  padding: 2px 5px;
}
label::before {
  content: 'Show all';
}
input:checked ~ label::before {
  content: 'Hide';
  /* maybe display: none; =) */
}

tbody tr:nth-child(n+6) {
  display: none;
}
input:checked ~ table tbody tr {
  display: table-row;
}
td,th {
  border: solid 1px;
  padding: 2px 5px;
}
<div>
  <input type=checkbox id='toggleRowsVisibility' />
  <table>
    <thead>
      <tr><th>##</th></tr>
    </thead>
    <tbody>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
      <tr><td>10</td></tr>
    </tbody>
  </table>
  <br />
  <label for='toggleRowsVisibility'></label>
</div>

Добавил <tbody> и <thead>, что бы заголовок не учитывался как одна из 5 строк

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.