Custom Paging using AJAX with Sorting

$(document).ready(function () {
    BindUserData(1, 5, "ORDER BY User_id ASC");
});
function BindUserData(PageIndex, PageSize, ImageID) {
    var StartIndex = ((PageIndex - 1) * PageSize) + 1;
    var SortingOrder = "";

    switch (ImageID) {
        case "imgIdUp":
            SortingOrder = "ORDER BY User_id ASC";
            break;
        case "imgIdDown":
            SortingOrder = "ORDER BY User_id DESC";
            break;
        case "imgNameUp":
            SortingOrder = "ORDER BY Name ASC";
            break;
        case "imgNameDown":
            SortingOrder = "ORDER BY Name DESC";
            break;
        case "imgCityUp":
            SortingOrder = "ORDER BY City ASC";
            break;
        case "imgCityDown":
            SortingOrder = "ORDER BY City DESC";
            break;
        case "imgEmailUp":
            SortingOrder = "ORDER BY email ASC";
            break;
        case "imgEmailDown":
            SortingOrder = "ORDER BY email DESC";
            break;
        default:
            SortingOrder = ImageID;
            break;
    }

    if (SortingOrder != "") {
        document.getElementById('hdnSortingOrder').value = SortingOrder;
    }
    else {
        SortingOrder = "ORDER BY User_id ASC";
    }

    $.ajax({
        type: "POST",
        url: "JSGrid.aspx/GetAllUserData",
        data: '{"StartIndex":"' + StartIndex + '","PageSize":"' + PageSize + '","SortingOrder":"' + SortingOrder + '"}',
        contentType: "application/json;charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#divAllUsers').empty();
            $('#divAllUsers').append("<tr><table><tr class='PerformanceHeader'>" +
                                    "<td style=width:100px;><div style=display:inline;float:left;>Id</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgIdUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(document.getElementById('hdnCurrentPage').value,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgIdDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(document.getElementById('hdnCurrentPage').value,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:175px;><div style=display:inline;float:left;>Name</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgNameUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgNameDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:175px;><div style=display:inline;float:left;>City</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgCityUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgCityDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "<td style=width:350px;><div style=display:inline;float:left;>Email</div><div style=display:inline;float:left;margin-left:10px;><table><tr><td><img id=imgEmailUp src=Images/Up.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr><tr><td><img id=imgEmailDown src=Images/Down.png height=10 width=10 style=cursor:pointer; onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,this.id); /></td></tr></table></div></td>" +
                                    "</tr></table></tr>");
            if (data.d.length > 0) {
                var LastData = data.d.length - 1;
                for (var i = 0; i < data.d.length; i++) {
                    $('#divAllUsers').append("<tr><table><tr class=trUser style=vertical-align:middle;>" +
                                            "<td style=width:100px;>" + data.d[i].User_id + "</td>" +
                                            "<td style=width:75px;>" + data.d[i].Name + "</td>" +
                                            "<td style=width:75px;>" + data.d[i].City + "</td>" +
                                            "<td style=width:200px;>" + data.d[i].email + "</td></tr>" +
                                            "<tr><td colspan=4><hr/></td></tr></table></tr>");
                }
                document.getElementById('hdnEndingIndex').value = data.d[LastData].CountData;
                document.getElementById('hdnStartingIndex').value = data.d[0].CountData;
                document.getElementById('hdnLastPage').value = data.d[0].NumberOfPage;
                document.getElementById('hdnCurrentPage').value = PageIndex;

                var AppendDiv = "<tr><table><tr><td colspan=2>Showing <div class=TradesResult>" + data.d[0].CountData + "</div> to <div class=TradesResult>" + data.d[LastData].CountData + "</div> from <div class=TradesResult>" + data.d[LastData].TotalRecords + "</div> Users</td>" +
                                "<td colspan=1>Show <select id=ddlPageSize onchange=BindUserData(1,this.value,document.getElementById('hdnSortingOrder').value);><option value=2>2</option><option value=5>5</option><option value=10>10</option><option value=25>25</option><option value=50>50</option><option value=100>100</option></select> Users</td>" +
                                "<td colspan=2><table><tr>" +
                                        "<td><a class=PageLink id=LinkFirst onclick=BindUserData(1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>First</a><div id=divFirst style=display:none;color:silver;>First</div></td>" +
                                        "<td><div style=padding-left:10px;display:inline;></div></td>" +
                                        "<td><a class=PageLink id=LinkPrev onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value)-1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Prev</a><div id=divPrev style=display:none;color:silver;>Prev</div></td>" +
                                        "<td><div style=padding-left:10px;display:inline;></div></td><td>";

                for (var j = 1; j <= data.d[0].NumberOfPage; j++) {
                    AppendDiv += "<a class=PageLink id=" + j + " onclick=BindUserData(this.id,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value);>   " + j + "   </a><div class=divCurrentPage id=divCurrentPage" + j + " style=display:none;color:silver;>" + j + "</div>";
                }
                AppendDiv += "</td><td><div style=padding-left:10px;display:inline;></div></td>" +
                            "<td><a id=LinkNext class=PageLink onclick=BindUserData(parseInt(document.getElementById('hdnCurrentPage').value)+1,document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Next</a><div id=divNext style=display:none;color:silver;>Next</div></td>" +
                            "<td><div style=padding-left:10px;display:inline;></div></td>" +
                            "<td><a class=PageLink id=LinkLast onclick=BindUserData(parseInt(document.getElementById('hdnLastPage').value),document.getElementById('ddlPageSize').options[document.getElementById('ddlPageSize').selectedIndex].value,document.getElementById('hdnSortingOrder').value); style=cursor:pointer;>Last</a><div id=divLast style=display:none;color:silver;>Last</div></td>" +
                            "</tr></table></td></tr></table></tr>";

                $('#divAllUsers').append(AppendDiv);
                if (data.d[0].NumberOfPage == 1) {
                    document.getElementById('LinkLast').style.display = 'none';
                    document.getElementById('LinkNext').style.display = 'none';
                    document.getElementById('LinkFirst').style.display = 'none';
                    document.getElementById('LinkPrev').style.display = 'none';
                    document.getElementById('divLast').style.display = 'inline';
                    document.getElementById('divNext').style.display = 'inline';
                    document.getElementById('divFirst').style.display = 'inline';
                    document.getElementById('divPrev').style.display = 'inline';
                }
                if (PageIndex == data.d[0].NumberOfPage) {
                    document.getElementById('LinkLast').style.display = 'none';
                    document.getElementById('divLast').style.display = 'inline';
                    document.getElementById('LinkNext').style.display = 'none';
                    document.getElementById('divNext').style.display = 'inline';
                }
                if (PageIndex < data.d[0].NumberOfPage && PageIndex == 1) {
                    document.getElementById('LinkFirst').style.display = 'none';
                    document.getElementById('divFirst').style.display = 'inline';
                    document.getElementById('LinkPrev').style.display = 'none';
                    document.getElementById('divPrev').style.display = 'inline';
                }
                document.getElementById('ddlPageSize').value = PageSize;
                $('#divCurrentPage' + PageIndex).css({ 'display': 'inline', 'font-weight': 'bolder' });
                $('#' + PageIndex).css({ 'display': 'none' });
                $('.TradesResult').css({ 'color': 'green', 'font-weight': 'bolder', 'display': 'inline' });
            }
        },
        error: function (result) {

        }
    });
}