jQuery implements Table paging effect

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

<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>
<table>
<tr>
    <th>Brand</th>
    <th>Shop</th>
    <th>Warehouse</th>
</tr>
<tbody id='tbody'></tbody>
</table>
<span class="pager"></span>&nbsp;<span class="pagerTotal"></span>

<script>
    // Initialize $(function () {
        ReportPage(1);
    });
    //Load report - paging function ReportPage(pageIndex) {
        var index = pageIndex; //page number var size = 500; //number of entries per page 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) {
                //Spelling table$.each(request.data, function (i, field) {
                    var html = "";               
                    html += "<tr>";
                    html += "<td>" + field.brand+ "</td>";        
                    html += "<td>" + field.Shop+ "</td>";
                    html += "<td>" + field.warehouse+ "</td>";
                    html += "</tr>";
                    $("#tbody").append(html);
                });           
                Pages(pageIndex, request.allPage, request.total);//Generate paging},
        });
    }
 
    //Paging button function Pages(pageIndex, pageCount, pageTotal) {
        $(".pagerTotal").html("&nbsp;&nbsp;Total: <font color='red'>" + pageTotal + "</font>&nbsp;Data!");
        $(".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>

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, //Total number of records allPage = allPage, //Total number of pages data = dt, //Data after paging });
                    }
                }        
                return Content(json);
        }

public DataTable GetDate(string startDate, int pageIndex, int pageSize, out int total, out int allPage)
{
    //Calculate the total number of data and total number of pages string sqlCount = "select count(*) from table where date='"+startDate+"'"; //Get the total number of data total = int.Parse(SqlHelper.GetSingel(sqlCount ).ToString()); //Total number of data rows allPage = total / pageSize; //Total number of pages = total number of data rows / number of rows per page allPage += total % pageSize == 0 ? 0 : 1; //Less than one page is also counted as one page //Get paging data 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);//paging data return dt;
}