No Javascript Table with Pagination

Pagination made entirely by CSS. There is no single Javascript code here.

I used the radio button hack, and HTML and CSS loop to implement the pagination.

To summarize the hack, I written the codes below:

Here is the HTML code

<!--This is the radio button for hacking. They should not be visible-->
<input type="radio" name="btn_radio" id="trigger1" checked />
<!--This is the table which we show and hide. It must be direct sibling of the radio button-->
<table>
  <tr>
    <td>TABLE 1</td>
  </tr>
</table>
<input type="radio" name="btn_radio" id="trigger2" />
<table>
  <tr>
    <td>TABLE 2</td>
  </tr>
</table>
<label for="trigger1">Page 1</label>
<label for="trigger2">Page 2</label>

Here is the CSS code:

input[type="radio"] {
  display: none;
}
table {
  display: none;
}
/* Plus sign is a selector for direct sibling element */
input[type="radio"]:checked + table {
  display: block;
}

Easy right? Just use your favorite HTML preprocessor, then you'll be able to populate the table, and the pagination links.

I also took advantage on

position: sticky;

CSS attribute, to have better view for layout.

If you compile the Pug source code into HTML, you will see the repetitive, pagination Elements, and "Showing x to y of z items".

The buttons above aren't working. Though, I still could add modal dialog for "Add New Data" function. It is out of the scope of my current pen, so I didn't add it.

But if I am going to add, I have 2 methods to do so:

• First, is the target CSS pseudo-class. I just have to put an ID to a modal/dialog div <div id="my_modal"></div> in HTML. Then, I am going to set #my_modal { display: none; } to the modal dialog. Then, I am going to use the target pseudo-class like this #my_modal:target { display: block; } to show the dialog. To trigger it, I need a <a href="#my_modal">link</a> to trigger the effect.

• Second is the checkbox hack. It is just similar with this Pagination hack.

Here is the preview of the Pagination.