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.

Comments

[Robin Gagnon]

As absurd as they seem sometimes, I just love me some css only implementations of "complex" UI.

I tend to do it too much, but it’s always tempting to let javascript aside.

[Takane Ichinose]

Yes, I'm just doing these things to challenge myself, and to improve my CSS skills. But in the end of the day, Javascript implementation will be more readable, in terms of coding, in my opinion.