Tell me how to limit the number of entries in the html table using js

UPDATE2

Here is the code with the table, how to screw? Do so

<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>

Mistake

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

line

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

  • What does it mean to limit? - Cheg
  • @Cheg, for example from the server came data on 10 lines, show the first 5, and all others show by pressing the button "Select All ' - YuriyK
  • option on jquery fit? - Cheg
  • @Cheg, yes, it will do! - YuriyK
  • @Cheg, upd, look pliz - YuriyK

2 answers 2

Option 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>

Option # 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>

The 1st option is more suitable if, with adaptive, you plan to change the number of displayed / hidden rows.

  • In CSS table tbody tr:nth-child(n+6) {... and JS $('table tr:nth-child(n+6)')... different selectors, it is better to bring to the same form (add / remove tbody) - Yevgeny Mironov
  • one
    @YevgenyMironov thanks for the comment, corrected the answer - Cheg

That's how you can do it without 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>

Added <tbody> and <thead> so that the title is not counted as one of 5 lines