getPagination('#table-id');

function getPagination(table) {

var lastPage = 1;

$('#maxRows')
  .on('change', function(evt) {
    //$('.paginationprev').html('');                                          // reset pagination

   lastPage = 1;
    $('.pagination')
      .find('li')
      .slice(1, -1)
      .remove();
    var trnum = 0; // reset tr counter
    var maxRows = parseInt($(this).val()); // get Max Rows from select option

    if (maxRows >= 5000) {
      $('.pagination').hide();
    } else {
      $('.pagination').show();
    }

    var totalRows = $(table + ' tbody tr').length; // numbers of rows
    $(table + ' tr:gt(0)').each(function() {
      // each TR in  table and not the header
      trnum++; // Start Counter
      if (trnum > maxRows) {
        // if tr number gt maxRows

        $(this).hide(); // fade it out
      }
      if (trnum <= maxRows) {
        $(this).show();
      } // else fade in Important in case if it ..
    }); //  was fade out to fade it in
    if (totalRows > maxRows) {
      // if tr total rows gt max rows option
      var pagenum = Math.ceil(totalRows / maxRows); // ceil total(rows/maxrows) to get ..
      //      numbers of pages
      for (var i = 1; i <= pagenum; ) {
        // for each page append pagination li
        $('.pagination #prev')
          .before(
            '<li style=\'cursor: pointer; display: inline-block;\' data-page="' +
              i +
              '">\
                                                                <span>' +
              i++ +
              '<span class="sr-only">(current)</span></span>\
                                                              </li>'
          )
          .show();
      } // end for i
    } // end if row count > max rows
    $('.pagination [data-page="1"]').addClass('active'); // add active class to the first li
    $('.pagination li').on('click', function(evt) {
      // on click each page
      evt.stopImmediatePropagation();
      evt.preventDefault();
      var pageNum = $(this).attr('data-page'); // get it's number

      var maxRows = parseInt($('#maxRows').val()); // get Max Rows from select option

      if (pageNum == 'prev') {
        if (lastPage == 1) {
          return;
        }
        pageNum = --lastPage;
      }
      if (pageNum == 'next') {
        if (lastPage == $('.pagination li').length - 2) {
          return;
        }
        pageNum = ++lastPage;
      }

      lastPage = pageNum;
      var trIndex = 0; // reset tr counter
      $('.pagination li').removeClass('active'); // remove active class from all li
      $('.pagination [data-page="' + lastPage + '"]').addClass('active'); // add active class to the clicked
      // $(this).addClass('active');                                  // add active class to the clicked
              limitPagging();
      $(table + ' tr:gt(0)').each(function() {
        // each tr in table not the header
        trIndex++; // tr index counter
        // if tr index gt maxRows*pageNum or lt maxRows*pageNum-maxRows fade if out
        if (
          trIndex > maxRows * pageNum ||
          trIndex <= maxRows * pageNum - maxRows
        ) {
          $(this).hide();
        } else {
          $(this).show();
        } //else fade in
      }); // end of for each tr in table
    }); // end of on click pagination list
        limitPagging();
  })
  .val(5)
  .change();

// end of on select change

// END OF PAGINATION

}

function limitPagging(){

// alert($('.pagination li').length)

if($('.pagination li').length > 7 ){
                if( $('.pagination li.active').attr('data-page') <= 3 ){
                $('.pagination li:gt(5)').hide();
                $('.pagination li:lt(5)').show();
                $('.pagination [data-page="next"]').show();
        }if ($('.pagination li.active').attr('data-page') > 3){
                $('.pagination li:gt(0)').hide();
                $('.pagination [data-page="next"]').show();
                for( let i = ( parseInt($('.pagination li.active').attr('data-page'))  -2 )  ; i <= ( parseInt($('.pagination li.active').attr('data-page'))  + 2 ) ; i++ ){
                        $('.pagination [data-page="'+i+'"]').show();

                }

        }
}

}

$(function() {

// Just to append id number for each row
$('#table-id tr:eq(0)').prepend('<th></th>');

var id = 0;

$('#table-id tr:gt(0)').each(function() {
  id++;
  $(this).prepend('<td>' + id + '</td>');
});

});

// Developed By Yasser Mas // yasser.mas2@gmail.com