Minimalist jQuery Based Table Paginator - simplePagination

A simple jQuery table pagination plugin which divides your long html table into multiple pages for better readability.

How to use it:

1. Insert jQuery library and the jQuery simplePagination plugin's script into your html page.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="simplepagination.js"></script>

2. Specify the number of rows per page and initial page using the number-per-page and current-page attributes on the html table.

<table class="pagination" number-per-page="5" current-page="0">
  <thead>
    <tr>
      <th>Element</th>
      <th>Value</th>
      <th>Options</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>2 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>3 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>4 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>5 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>6 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>7 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td> 8 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>9 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
    <tr>
      <td>10 Name</td>
      <td>A value</td>
      <td> Edit</td>
    </tr>
  </tbody>
</table>

3. Call the function on the html table to generate a list based pagination.

$(".pagination").pagination();

4. Style the pagination whatever you like.

ul {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

li {
  border-radius: 3px;
  color: black;
  background: #eee;
  cursor: pointer;
  display: inline;
  font-weight: 200;
  margin: 10px 5px 0px 2px;
  padding: 5px;
  text-align: center;
  width: 5px;
}

.active {
  background: teal;
  color: white;
}

---

This awesome jQuery plugin is developed by daronwolff. For more Advanced Usages, please check the demo page or visit the official website.