本文例項為大家分享了實現Table分頁效果的具體程式碼，供大家參考，具體內容如下

：

<style>
    .pager {
        font-size: 18px;
    }
 
    .pagerTotal {
        font-size: 18px;
        height: 36px;
        line-height: 36px;
        margin-left: 2px;
    }
 
    .pager_a {
        display: block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        float: left;
        text-align: center;
        border: 1px solid black;
        color: black;
        margin-left: 2px;
        cursor: pointer;
    }
 
    .pager_a_red {
        display: block;
        width: 36px;
        height: 36px;
        line-height: 36px;
        float: left;
        text-align: center;
        border: 1px solid red;
        color: red;
        font-weight: bold;
        margin-left: 2px;
        cursor: pointer;
    }
</style>

HTML：

<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>
<table>
<tr>
    <th>品牌</th>
    <th>店鋪</th>
    <th>倉庫</th>
</tr>
<tbody id='tbody'></tbody>
</table>
<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>

：

<script>
    //初始化
    $(function () {
        ReportPage(1);
    });
    //載入報表-分頁
    function ReportPage(pageIndex) {
        var index = pageIndex;//頁碼
        var size = 500;//每頁條數
        var startDate = $("#startDate").val();
 
        $("tbody").empty();
        $.ajax({
            async: false,type: "GET",data: {
                "startDate": startDate,"pageIndex": index,"pageSize": size,},url: "/Controller/GetData",dataType: "on",success: function (request) {
                //拼表格
           
 
     $.each(request.data,function (i,field) {
                    var html = "";               
                    html += "<tr>";
                    html += "<td>" + field.品牌 + "</td>";        
                    html += "<td>" + field.店鋪 + "</td>";
                    html += "<td>" + field.倉庫 + "</td>";
                    html += "</tr>";
           http://www.cppcns.com         $("#tbody").append(html);
                });           
                Pages(pageIndex,request.allPage,request.total);//生成分頁
            },});
    }
 
    //分頁按鈕
    function Pages(pageIndex,pageCount,pageTotal) {
        $(".pagerTotal").html("&nbsp;&nbsp;總共：<font color='red'>" + pageTotal + "</font>&nbsp;條資料!");
        $(".pager").empty();
        var page = "";
        for (var i = 0; i < pageCount; i++) {
            if ((i + 1) == pageIndex) {
                page += "<span class='pager_a_red'>" + (i + 1) + "</span>";
            }
            else {
                page += "<span class='pager_a' onclick='ReportPage(" + (i + 1) + ")'>" + (i + 1) + "</span>";
            }
        }
        $(".pager").append(page);
    }
</script>

MVC:

public ActionResult GetData(string startDate,int pageIndex,int pageSize)
        {
                string json = string.Empty;          
                if (!string.IsNullOrEmpty(startDate))
                {
                    int total = 0;
                    int allPage = 0;
                    DataTable dt = bll.GetData(startDate,pageIndex,pageSize,out total,out allPage);
                    if (dt != null && dt.Rows.Count > 1)
                    {
       http://www.cppcns.com                 json = JsonConvert.Serialwww.cppcns.comizeObject(new
                        {
                            total = total,//總記錄數
                            allPage = allPage,//總頁數
                            data = dt,//分頁後資料
                        });
                    }
                }        
                return Content(json);
        }

獲得分頁資料dataTable、總資料數total、總頁數allpage：

public DataTable GetDate(string startDate,int pageSize,out int total,out int allPage)
{
    //計算總資料數 和 總分頁數
    string sqlCount = "select count(*) from table where date='"+startDate+"'";//獲取資料總數
    total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString());//總資料行數
    allPage = total / pageSize;//總分頁個數 = 總資料行數 / 每頁行數 
    allPage += total % pageSize == 0 ? 0 : 1;//不足一頁也算一頁
    
    //獲取分頁資料
    string sql = "";
    sql = "DECLARE @PageIndex INT;";
    sql = "DECLARE @PageSize INT;";
    sql = "SET @PageIndex=" + pageIndex;
    sql = "SET @PageSize=" + pageSize;
 
    sql += " SELECT * FROM (SELECT ROW_NUMBER() OVER(ORDER BY ID desc) rownum,* FROM table where date ='"+ startDate +"')a";
    sql += " WHERE rownum > @PageSize * (@PageIndex - 1) AND rownum <= @PageSize * @PageIndex";
    sql += " order by ID desc";
 
    DataTable dt = SqlHelper.GetDate(sql);//分頁資料
    return dt;
}

預覽：

點選頁碼會重新呼叫ajax獲取新的資料。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。