CODEWITHSUNDEEP
javascriptcssweb
kninjaboi
kninjaboi

Reputation: 201

(No frameworks - plain JS) Pagination with JS for a table pulling from API

function columnPagination(input){
    var table = document.getElementById("tablePrint");
    var tcolumns = table.getElementsByTagName("th");
    for (var i = 1; i < tcolumns.length; i++){
        td = tcolumns[i].getElementsByTagName("td")[0].selectColumn;
        if(i > input){
            tcolumns[i].classList.add('hide');
        }else{
            tcolumns[i].classList.remove('hide');
        }
    }
}

Above is my columnPagination function. I have buttons which call it and give an input. So it renders everything first then allows the user to just filter through the table afterwards. Right now what happens is it hides just the header without the rest of the cells in the column. I want it to hide the entire column.

Is there some CSS or something that I haven't thought of using.

P.S. I'm not using React or Angular because I only know how to build things with frameworks and I don't really know what's actually happening.

Edit: An API passes me a JSON object with the content so I don't know the size of the table or the content.

Thanks for the help everyone! Lots of helpful answers.

Upvotes: 1

Views: 775

Answers (3)

Todd
Todd

Reputation: 5454

You can do this relatively easily w/ querySelectorAll and something like this to start (this is unchecked):

let pageSize = 3;
let currentPage = 1; // 1st page

// querySelector method
const getStrQueryForPageRows = function(pageNumber, pageSize=3) {
    let idx = pageSize * (pageNumber - 1);
    return `tr:nth-child(n+${idx}):nth-child(-n+${idx+pageSize})`;
}
const hideColumnOnMyTablePage = (columnNumber, pageNumber) => {
    return document.querySelector('#myTable')
        .querySelectorAll(`${getStrQueryForPageRows(pageNumber)} td:nth-child(${col - 1})`)
        .forEach(col => col.classList.add('hide'))
}

hideColumnOnMyTablePage(2, currentPage) // hide second col of page 1

There are also table props that could help you 

// alt way to grab rows for page
const getMyTableRowsForPage = (pageNumber, pageSize = 3) => {
   let end = pageSize * (pageNumber);
   let start = end - pageSize;
   return [...document.querySelector('#myTable').tBodies[0].rows].slice(start, end);
}

Upvotes: 1

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196002

You need to find the td children of each tr and apply the class based on the index to each of those.

function toggleClass(element, className, toSet) {
  element.classList[toSet ? 'add' : 'remove'](className);
}

function columnPagination(input) {
  var table = document.getElementById("tablePrint"),
      dataRows = table.getElementsByTagName('tr');

  for (var i = 0; i < dataRows.length; i++) {
    var cells = dataRows[i].children;
    for (var cell = 0; cell < cells.length; cell++) {
      toggleClass(cells[cell], 'hide', cell == input)
    }
  }
}

columnPagination(1) // 0-based index
.hide{color:red}
<table id="tablePrint">
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1.1</td>
      <td>1.2</td>
      <td>1.3</td>
    </tr>
    <tr>
      <td>2.1</td>
      <td>2.2</td>
      <td>2.3</td>
    </tr>
    <tr>
      <td>3.1</td>
      <td>3.2</td>
      <td>3.3</td>
    </tr>
    <tr>
      <td>4.1</td>
      <td>4.2</td>
      <td>4.3</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Tim Consolazio
Tim Consolazio

Reputation: 4888

Here's a basic example to get you started. Note that I'm using a pretty naive way of identifying table cells (though it does work, I actually have used this technique quite a bit before CSS identifiers became the norm).

You click the blue square on top, it will hide column 1. If you change the code to look for c2, it'll hide column 2. And so on. You can see how you could select and hide/show/style just about anything in a grid this way. 

<html>
    <head>
    </head>
    <body>
        <script>
            function onClick() {
                var tds = document.getElementsByTagName ( 'td' );
                var arr = Array.from ( tds );
                console.log ( arr );
                arr.forEach ( function ( d ) {
                    if ( d.id.indexOf ( 'c1' ) !== -1 ) {
                        d.style.display = 'none';
                    }
                });
            }
        </script>

        <div style="width: 50px; height: 50px; background-color: blue; color: white"
             onclick="onClick()">
            Click Me
        </div>

        <table border="1px">
            <tr>
                <td id="c1_r1">
                    C1_R1
                </td>
                <td id="c2_r1">
                    C2_R1
                </td>
                <td id="c3_r1">
                    C3_R1
                </td>
            </tr>
            <tr>
                <td id="c1_r2">
                    C1_R2
                </td>
                <td id="c2_r2">
                    C2_R2
                </td>
                <td id="c3_r2">
                    C3_R2
                </td>
            </tr>
            <tr>
                <td id="c1_r3">
                    C1_R3
                </td>
                <td id="c2_r3">
                    C2_R3
                </td>
                <td id="c3_r3">
                    C3_R3
                </td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 1

Related Questions