Pagination, checkbox and modal


Step 1 - bottom table UI

There are two small subcomponents that we are still missing in our table.

The first one is pagination. The second, a Select with the numbers of rows displayed in the table.

Below the table but within card-body place a divider and a wrapper with Flexbox utilities.



<hr class="my-0">

<!--Bottom Table UI-->
<div class="d-flex justify-content-between">



</div>
<!--Bottom Table UI-->

    

That will align one component to the left and the second to the right.

Then add a select with options for row numbers:



<!--Bottom Table UI-->
<div class="d-flex justify-content-between">

    <!--Name-->
    <select class="mdb-select colorful-select dropdown-primary mt-2 hidden-md-down">
        <option value="" disabled>Rows number</option>
        <option value="1" selected>10 rows</option>
        <option value="2">25 rows</option>
        <option value="3">50 rows</option>
        <option value="4">100 rows</option>
    </select>

</div>
<!--Bottom Table UI-->

    

Have you noticed the .hidden-md-down class? It makes a given element invisible on a screen smaller than 768px.

It's good practice to hide the elements on small screens if they are hard to use on a mobile device. For example, allowing the user display of 100 rows in a table may be not a good idea when using a mobile device.

To learn more about hiding elements have a look at our Display utilities documentation.

Step 2 - pagination

Pagination is a crucial component for any table with a huge amount of data.

Go to Components / Pagination documentation and copy the code of the first pagination. Then paste it below the select, within bottom table UI:



<!--Pagination -->
<nav class="mt-4">
    <ul class="pagination pagination-circle pg-blue mb-0">

        <!--First-->
        <li class="page-item disabled">
            <a class="page-link">First</a>
        </li>

        <!--Arrow left-->
        <li class="page-item disabled">
            <a class="page-link" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
                <span class="sr-only">Previous</span>
            </a>
        </li>

        <!--Numbers-->
        <li class="page-item active">
            <a class="page-link">1</a>
        </li>
        <li class="page-item">
            <a class="page-link">2</a>
        </li>
        <li class="page-item">
            <a class="page-link">3</a>
        </li>
        <li class="page-item">
            <a class="page-link">4</a>
        </li>
        <li class="page-item">
            <a class="page-link">5</a>
        </li>

        <!--Arrow right-->
        <li class="page-item">
            <a class="page-link" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
                <span class="sr-only">Next</span>
            </a>
        </li>

        <!--First-->
        <li class="page-item">
            <a class="page-link">Last</a>
        </li>

    </ul>
</nav>
<!--/Pagination -->

    

Step 3 - checkbox

To make possible the editing of a single row, we need a component which allows to check/uncheck a given element.

A checkbox will do the work.

Within the thead element of the table, replace the code within the first cell with the following code for the checkbox:



<thead>
  <tr>
      <th>
          <input class="form-check-input" type="checkbox" id="checkbox">
          <label for="checkbox" class="label-table form-check-label"></label>
      </th>
      <th>First column</th>
      <th>Second column</th>
      <th>Third column</th>
      <th>Fourth column</th>
      <th>Fifth column</th>
      <th>Sixth column</th>
  </tr>
</thead>

    

As you can see, an input element requires an ID and the label refers to this ID.

Each checkbox in your project requires an individual ID value. If you forget about this, it will cause conflicts and errors.

Place the checkbox within each first cell of each row:



<table class="table text-nowrap">
    <thead>
      <tr>
          <th>
              <input class="form-check-input" type="checkbox" id="checkbox">
              <label for="checkbox" class="label-table form-check-label"></label>
          </th>
          <th>First column</th>
          <th>Second column</th>
          <th>Third column</th>
          <th>Fourth column</th>
          <th>Fifth column</th>
          <th>Sixth column</th>
      </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox1">
                <label for="checkbox1" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox2">
                <label for="checkbox2" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
        <tr>
            <th scope="row">
                <input class="form-check-input" type="checkbox" id="checkbox3">
                <label for="checkbox3" class="label-table form-check-label"></label>
            </th>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
            <td>Lorem Ipsum</td>
        </tr>
    </tbody>
</table>

    

To learn more about Checkboxes read our Checkbox Docs.

Step 4 - modals

A Modal is a dialog box/popup window which can be used for lightboxes, user notifications, UI enhancements, e-commerce components and many other uses.

For the purpose of this tutorial, we'll use the Modal as a confirmation pop-up of deletion.

Within the .view element (an additional table UI with buttons and table name) find a button.

Then add data-toggle and data-target attributes to it:



<button type="button" class="btn btn-outline-white btn-rounded btn-sm px-2" data-toggle="modal" data-target="#modalConfirmDelete">
    <i class="fa fa-remove mt-0"></i>
</button>

    

data-toggle="modal" defines which Bootstrap functionality we want to trigger.

data-target="#modalConfirmDelete" refers to the Modal ID that we'll create in the next step.

Go to Modals Docs and copy the code for Modal Confirm Delete (without a trigger button). Then paste it into the Section: Modals that we created at the very beginning of this tutorial.



<!--Section: Modals-->
<section>

    <!--Modal: modalConfirmDelete-->
    <div class="modal fade" id="modalConfirmDelete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm modal-notify modal-danger" role="document">
            <!--Content-->
            <div class="modal-content text-center">
                <!--Header-->
                <div class="modal-header d-flex justify-content-center">
                    <p class="heading">Are you sure?</p>
                </div>

                <!--Body-->
                <div class="modal-body">

                    <i class="fa fa-times fa-4x animated rotateIn"></i>

                </div>

                <!--Footer-->
                <div class="modal-footer flex-center">
                    <a href="https://mdbootstrap.com/products/jquery-ui-kit/" class="btn btn-danger">Yes</a>
                    <a type="button" class="btn btn-outline-danger waves-effect" data-dismiss="modal">No</a>
                </div>
            </div>
            <!--/.Content-->
        </div>
    </div>
    <!--Modal: modalConfirmDelete-->

</section>
<!--Section: Modals-->

    

Best practice: Whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.

Note: That modal has already a proper ID (the ID which we have referred to in the trigger button) so we don't need to do anything else.

Save the file, refresh the browser and click on the button. The modal should work as expected.

To learn more about Modals have a look at Modals documentation.


Rate this lesson

Previous lesson Live preview Next lesson

Spread the word:
Do you need help? Use our support forum

About the author

User avatar
Michal Szymanski
Co-Founder at MDBootstrap & BrandFlow. Entrepreneur, UI/UX designer, marketing analyst. Dancer & nerd.
Sign up to follow your progress and get additional benefits