Experts Exchange for SuzzyR Suzzyr

by JonNorman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/ddenhartog/jquery-simple-pagination/master/jquery-simple-pagination-plugin.js"></script>
<div id="pagination">
  <div class="my-navigation">
    <div class="simple-pagination-first"></div>
    <div class="simple-pagination-previous"></div>
    <div class="simple-pagination-page-numbers"></div>
    <div class="simple-pagination-next"></div>
    <div class="simple-pagination-last"></div>
  </div>
  <table id="content" class="sort-table" border=0 bgcolor="lightgrey" width="99%">
    <tr class="tabb" bgcolor="#DDDDEE" border-color="">
      <td class="idc"><a class="tab1" href="./edit_wo.asp?woid=60">60</a><br/></td>

      <td><a href="print_wo.asp?woid=60" target=_blank>Daily PPM</a></td>
      <td>2 - Vac Pack Turbovac 950-STE</td>
      <td>4 - Rowley, Chris</td>
      <td>25/04/2018</td>
      <td>1 -PPM (within expected completion date) </td>
      <td>Completed</td>
      <td><a class="tab1" href="./woparts_ui.asp?woid=60">Parts</a></td>
      <td>2</td>
      <td></td>


      <td><a onclick="return validate2();" id="DeleteLink" name="DeleteLink " class="tab1" href="./wo_ui.asp?woid=60">Delete</a></td>
    </tr>



    <tr class="tabb" bgcolor="#FFFFFF" border-color="">
      <td class="idc"><a class="tab1" href="./edit_wo.asp?woid=61">61</a><br></td>

      <td><a href="print_wo.asp?woid=61" target=_blank>Daily PPM</a></td>
      <td>2 - Vac Pack Turbovac 950-STE</td>
      <td>4 - Rowley, Chris</td>
      <td>25/04/2019</td>
      <td>1 -PPM (within expected completion date) </td>
      <td>Completed</td>
      <td><a class="tab1" href="./woparts_ui.asp?woid=61">Parts</a></td>
      <td>2</td>
      <td></td>


      <td><a onclick="return validate2();" id="DeleteLink" name="DeleteLink " class="tab1" href="./wo_ui.asp?woid=61">Delete</a></td>
    </tr>



    <tr class="tabb" bgcolor="#DDDDEE" border-color="">
      <td...

CSS

/*
Styles related DIRECTLY with jQuery-simple-pagination
*/

.simple-pagination-page-numbers a {
  display: block;
  float: left;
  width: 2rem;
  text-align: center;
}

a {
  color: #216ed9;
  text-decoration: none;
}

a h1 {
  padding: 2rem;
  color: #216ed9;
  text-align: center;
}

a:hover {
  text-decoration: underline;
}

a[class^="simple-pagination-navigation-"]+a[class^="simple-pagination-navigation-"] {
  margin-right: 0;
}

a[class*="simple-pagination-navigation-disabled"] {
  color: black;
  cursor: default;
}

/*
Styles used to page things look nice :)
*/

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

body {
  font: 1rem/1rem Helvetica, sans-serif;
  background-color: #22d921;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 2em;
}

h1 {
  color: #9b21d9;
}

h3 {
  color: white;
}

h4 {
  border-radius: .25rem;
  margin: 1rem 0;
  padding: .5rem;
  background-color: white;
  color: #ff2727;
}

header {
  border-radius: .5rem .5rem 0 0;
  padding-top: 3rem;
  padding-bottom: 3rem;
  background-color: #9b21d9;
}

#header {
  border-radius: .5rem;
}

body>div,
header {
  width: 50%;
  margin: 0 auto;
  padding: 2rem;
}

body>div+header {
  margin-top: 6rem;
}

body>div {
  border-radius: 0 0 .5rem .5rem;
  background-color: white;
}

body>div>div,
div>div+table {
  margin-top: 1rem;
}

select {
  border: 1px solid black;
  font-size: 13px;
}

i {
  padding: .125rem .5rem;
  background-color: white;
  color: #ff2727;
  font-weight: normal;
}

.my-navigation:after {
  content: "";
  display: table;
  clear: both;
}

.my-navigation div {
  float: left;
}

.my-navigation div+div {
  margin-left: .5rem;
}

@media screen and (max-width: 959px) {
  body>div,
  header {
    width: 90%;
  }
}

/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/

ul.simple-pagination {
  list-style: none;
}

.simple-pagination {
  display:...

JavaScript

(function($) {
  /*    $('#first-container').simplePagination();
      $('#second-container').simplePagination({
          items_per_page: 5,
          number_of_visible_page_numbers: 10
      });*/
  $('#pagination').simplePagination({
    items_per_page: 15,
    cssStyle: "light-theme"
  });
  /*
  $('#fourth-container').simplePagination({
      first_content: '&lt;&lt;',
      previous_content: '<',
      next_content: '>',
      last_content: '>>'
  });
  $('#fifth-container').simplePagination({
      use_page_count: true
  });
  $('#sixth-container').simplePagination({
      items_per_page: 11,
      items_per_page_content: {
          'Six': 6,
              'Eleven': 11,
              'Seventeen': 17,
              'Thirty-three': 33,
              'Sixty-seven': 67
     }
  });*/
})(jQuery);

/*   jQuery(function($) {
                var items = $("#content tbody tr");

                var numItems = items.length;
                var perPage = 15;

                // Only show the first 2 (or first `per_page`) items initially.
                items.slice(perPage).hide();

                // Now setup the pagination using the `#pagination` div.
                $("#pagination").simplePagination({
                    items: numItems,
                    itemsOnPage: perPage,
                    cssStyle: "light-theme",

                    // This is the actual page changing functionality.
                    onPageClick: function(pageNumber) {
                        // We need to show and hide `tr`s appropriately.
                        var showFrom = perPage * (pageNumber - 1);
                        var showTo = showFrom + perPage;

                        // We'll first hide everything...
                        items.hide()
                             // ... and then only show the appropriate rows.
                             .slice(showFrom, showTo).show();
                    }
                });
            });*/