jQuery實(shí)現(xiàn)Table分頁效果

更新時(shí)間：2021年10月15日 09:39:41 作者：djk8888

這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)Table分頁效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jQuery實(shí)現(xiàn)Table分頁效果的具體代碼，供大家參考，具體內(nèi)容如下

CSS：

<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>

JavaScript：

<script>
    //初始化
    $(function () {
        ReportPage(1);
    });
    //加載報(bào)表-分頁
    function ReportPage(pageIndex) {
        var index = pageIndex;//頁碼
        var size = 500;//每頁條數(shù)
        var startDate = $("#startDate").val();
 
        $("tbody").empty();
        $.ajax({
            async: false,
            type: "GET",
            data: {
                "startDate": startDate,
                "pageIndex": index,
                "pageSize": size,
            },
            url: "/Controller/GetData",
            dataType: "json",
            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>";
                    $("#tbody").append(html);
                });           
                Pages(pageIndex, request.allPage, request.total);//生成分頁
            },
        });
    }
 
    //分頁按鈕
    function Pages(pageIndex, pageCount, pageTotal) {
        $(".pagerTotal").html("&nbsp;&nbsp;總共：<font color='red'>" + pageTotal + "</font>&nbsp;條數(shù)據(jù)!");
        $(".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)
                    {
                        json = JsonConvert.SerializeObject(new
                        {
                            total = total,//總記錄數(shù)
                            allPage = allPage,//總頁數(shù)
                            data = dt,//分頁后數(shù)據(jù)
                        });
                    }
                }        
                return Content(json);
        }

獲得分頁數(shù)據(jù)dataTable、總數(shù)據(jù)數(shù)total、總頁數(shù)allpage：

public DataTable GetDate(string startDate, int pageIndex, int pageSize, out int total, out int allPage)
{
    //計(jì)算總數(shù)據(jù)數(shù) 和 總分頁數(shù)
    string sqlCount = "select count(*) from table where date='"+startDate+"'";//獲取數(shù)據(jù)總數(shù)
    total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString());//總數(shù)據(jù)行數(shù)
    allPage = total / pageSize;//總分頁個(gè)數(shù) = 總數(shù)據(jù)行數(shù) / 每頁行數(shù) 
    allPage += total % pageSize == 0 ? 0 : 1;//不足一頁也算一頁
    
    //獲取分頁數(shù)據(jù)
    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);//分頁數(shù)據(jù)
    return dt;
}

預(yù)覽：