html:

<div class="tishi"></div>
<table id="dataList" class="table table-bordered text-center" style="">
      <thead>
             ....
      </thead>
      <tbody class="color allData">
             ....
      </tbody>
</table>
<ul class="Newpagination  clearfix"
 
>
      <li>
          <a href="#2" class="pageBtn page_up">&laquo;上一頁</a>
      </li>
      <li>
          <a href="#" class="page_number">1</a>
      </li>
      <li class="">
          <a href="#2" class="pageBtn page_next">下一頁&raquo;</a
 
>
      </li>
      <li>
         <p style="float:left;margin:5px;">共<span class="getPage">1</span>頁</p>
      </li>
      <li>
      <input type="text" class="form-control inputPage pageNum" placeholder="請輸入頁碼" autofocus onkeyup="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}"
 
 onafterpaste="if(this.value.length==1){this.value=this.value.replace(/[^1-9]/g,'')}else{this.value=this.value.replace(/\D/g,'')}">
       </li>
       <li class="">
           <a href="#2" class="pageBtn goPage">跳轉</a>
       </li>
</ul>

css(部分)：

.tishi {
    display: none;
    position: fixed;
    top: 30%;
    left: 30%;
    width: 50%;
    padding: 10px 20px;
    border-radius: 10px;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    z-index: 100000;
}

@media screen and (min-width: 768px) {
    .tishi {
        width: 180px !important;
        margin: 0px auto;
        left: calc(50% - 100px) !important;
    }
}
.pageBtn {
    padding: 5px 10px !important;
    /*background: rgba(12, 12, 12, 0.2) !important;*/
    background:rgb(3, 51, 50) !important;
    /*background: #1e2d40 !important;*/
    color: #fff !important;
    border-radius: 4px;
}

.pageNum {
    height: 31px;
    padding: 0;
    padding-left: 6px;
    margin-right: 5px;
    width: 19%;
    background: rgba(255, 255, 255, 0.1);
    background:#033131\9;
    border: 1px solid #006666;
    color: #fff;
    float: left;
}   
.Newpagination {
    position: absolute;
    bottom: 10px;
    display: inline-block;
    padding-left: 0;
    margin: 20px 0 10px 35%;
    border-radius: 4px;
}

    .Newpagination > li {
        display: inline;
    }

        .Newpagination > li > a {
            position: relative;
            float: left;
            line-height: 1.52857143;
            text-decoration: none;
            color: #515253;
            margin-left: -1px;
        }

@media only screen and (max-width: 768px) {
    .Newpagination {
        margin: 20px 0 10px;
    }
}

.page_number {
    padding: 5px 15px;
    color: #fff !important;
}

js(jquery):

 //翻頁------------------------------------------
        var pageNum = 1;
        var ii = 0;
        var jj = 5;//每頁顯示五條資料
        goPage(ii, jj);
        function goPage(i, j) {
            $('.allData tr').css('display', 'none');
            for (i; i < j ; i++) {
                $('.allData tr').eq(i).css('display', 'table-row');
            }
        }
        //下一頁
        $('.page_next').click(function () {
            if (pageNum < pageNumber) {
                pageNum++;
                ii = ii + 5;
                ji = ji + 5;
                goPage(ii, ji);
                $('.page_number').html(pageNum);
            }
            else {
                $(".tishi").text("當前是最後一頁！");
                $(".tishi").fadeIn(500).delay(600).fadeOut(500);
            }
        })
        //上一頁
        $('.page_up').click(function () {
            if (pageNum > 1) {
                pageNum--;
                ii = ii - 5;
                ji = ji - 5;
                goPage(ii, ji);
                $('.page_number').html(pageNum);
            }
            else {
                $(".tishi").text("當前是第一頁！");
                $(".tishi").fadeIn(500).delay(600).fadeOut(500);
            }
        })
        //跳頁
        $('.goPage').click(function () {
            //cbHeight();
            pageNum = ($('.inputPage').val()) * 1;
            if (pageNum <= pageNumber && pageNum > 0) {
                ia = (pageNum - 1) * 5;
                ja = pageNum * 5;
                goPage(ii, ji);
                $('.page_number').html(pageNum);
            }
            else {
                $(".tishi").text("請輸入正確的頁碼！");
                $(".tishi").fadeIn(500).delay(600).fadeOut(500);
            }
        })

        $(".inputPage").keydown(function (e) {//當按下按鍵時
            if (e.which == 13) {//.which屬性判斷按下的是哪個鍵，回車鍵的鍵位序號為13
                $('.goPage').trigger("click");//觸發搜尋按鈕的點選事件

            }
        });