Jqery操作数据的排序和分页

 ///第一步: <summary>
        /// 生成 JSON 对象
        /// </summary>
        /// <param name="dt"></param>
        /// <param name="Order"></param>
        /// <param name="PageNow"></param>
        /// <returns></returns>
        public string GetAccountsLogJSON(DataTable dt, string Order, int PageNow)
        {
            string json = "";

            string sort = "";
            switch (Order)
            {
                case "1": sort = " Updated By Asc"; break;
                case "2": sort = " Updated By Desc"; break;
                case "3": sort = " Updated Date Asc"; break;
                case "4": sort = " Updated Date Desc"; break;
            }

            DataView dv = dt.DefaultView;
            dv.Sort = sort;
            DataTable dt1 = dv.ToTable();
            DataTable new_dt = GetPagedTable(dt1, PageNow, 100);

            string dtJson = Utility.CreateJsonToDT(new_dt);
            json += "[" + (dtJson == null ? "{}" : dtJson) + ",[{\"PageNow\":\"" + PageNow + "\"}";

            int PageMax = 0;
            if (dt.Rows.Count % 100 == 0)
                PageMax = dt.Rows.Count / 100;
            else
                PageMax = Convert.ToInt32(dt.Rows.Count / 100) + 1;

            json += ",{\"PageMax\":\"" + PageMax + "\"}";
            //排序规则 1/2 Account(asc/desc),3/4 Status,5/6 Winrate,7/8 HdpWinrate, 9/10 OuWinrate
            json += ",{\"Order\":\"" + Order + "\"}]]";

            return json;
        }

  ///第二步： <summary>
        /// 根据 Datatable 进行分页
        /// </summary>
        /// <param name="dt"></param>
        /// <param name="PageIndex"></param>
        /// <param name="PageSize"></param>
        /// <returns></returns>
        public DataTable GetPagedTable(DataTable dt, int PageIndex, int PageSize)
        {
            if (PageIndex == 0)
                return dt;
            DataTable newdt = dt.Clone();
            int rowbegin = (PageIndex - 1) * PageSize;
            int rowend = PageIndex * PageSize;

            if (rowbegin >= dt.Rows.Count)
                return newdt;

            if (rowend > dt.Rows.Count)
                rowend = dt.Rows.Count;
            for (int i = rowbegin; i <= rowend - 1; i++)
            {
                DataRow newdr = newdt.NewRow();
                DataRow dr = dt.Rows[i];
                foreach (DataColumn column in dt.Columns)
                {
                    newdr[column.ColumnName] = dr[column.ColumnName];
                }
                newdt.Rows.Add(newdr);
            }

            return newdt;
        }

　　

  ///第三部调用： <summary>
        ///  获取 AccountList 数据
        /// </summary>
        private void SelectAccountList()
        {
            string Order = Request["order"] ?? "";
            int PageNow = Convert.ToInt32(Request["pagenow"] ?? "0");
            DataTable dt = LogSerDA.wsGetAccountsLog(UpdateUser, DateFrom, DateTo, UserName, LogType);
            string json = GetAccountsLogJSON(dt, Order, PageNow);
            json = json.Replace("\n", "&#34n");
            Response.Write(json);
            Response.End();
        }

　　

/****************************** report_AccountStatistics.aspx begin **********************************/

/*report_AccountStatistics 页面加载
*/
function load_Accountlog() {
    //selectAccountList(1, 4);

    //Submit 查询
    $('#btn_submit').bind('click', function () {
        selectAccountList(1, 4);
    })

    //排序
    $('#th_updateby,#th_updatedate,').bind('click', function () {
        var order = '';
        var tmporder = $('#div_hid').data('order');        //取出存放缓存中的当前排序
        var pagenow = $('#div_hid').data('pagenow');       //取出缓存中的当前页

        $('th span').html('');                             //清除页面上的上下排序箭头

        if ($(this).attr("id") == "th_updateby") {
            order = (tmporder == 1 ? 2 : 1);
            $(this).find('span').html(tmporder == 1 ? '↑' : '↓');
        }
        else if ($(this).attr("id") == "th_updatedate") {
            order = (tmporder == 3 ? 4 : 3);
            $(this).find('span').html(tmporder == 3 ? '↑' : '↓');
        }

        selectAccountList(pagenow, order);
    }).css('cursor', 'pointer');
}

/* AccountList 数据列表
pagenow:      当前页
order:        排序 1/2 Account(asc/desc),3/4 Status,5/6 Winrate,7/8 HdpWinrate, 9/10 OuWinrate
*/
function selectAccountList(pagenow, order) {
    loading();

    var Type = $('#Type').val();
    var UpdateUser = $('#UpdateUser').val();
    var DateF = $('#DateF').val();
    var DateT = $('#DateT').val();
    var UserName = $('#UserName').val();

    $.post(
        "LogList.aspx",
        { type: 'select', LogType: Type, UpdateUser: UpdateUser, DateF: DateF, DateT: DateT, UserName: UserName, order: order, pagenow: pagenow },
        function (data) {
            var json = eval("(" + data + ")");
            returnAccountList(json);
        });
}

/* AccountList 列表数据
*/
function returnAccountList(json) {
    $('#tablelist tr:gt(0)').remove();   //清除Html 以便重新加载
    var list = json[0]
    var htmlStr = '';
    var logtype = '';
    var rocord = "";
    var newstr = "";
    var pattern = /&#34n/g;
    for (var i = 0; i < list.length; i++) {

        var info = list[i];
        var istype = parseInt(info["Log Type"]);
        var testrecor = '';
        var d = new Date(info["Updated Date"]);
        var H = parseInt(d.getHours()) < 10 ? "0" + d.getHours() : d.getHours();
        var M = parseInt(d.getMinutes()) < 10 ? "0" + d.getMinutes() : d.getMinutes();
        var S = parseInt(d.getSeconds()) < 10 ? "0" + d.getSeconds() : d.getSeconds(); ;
        var DHMS = (d.getMonth() + 1) + "/" + d.getDate() + " " + H + ":" + M+ ":" + S;
        if (info["Log Details"].toString().length >100) {
            testrecor = info["Log Details"].substr(0, 100).replace(pattern, "")
        }
        else {
            var oldstr = info["Log Details"].replace(pattern, "");
            testrecor = oldstr;
        }
        switch (istype) {
            case 1:
                logtype = "Change Password";
                break;
            case 2:
                logtype = "Create Account";
                break;
            case 3:
                logtype = "Edit Account";
                break;
            case 4:
                logtype = "Edit Account Status";
                break;
            case 5:
                logtype = "Edit Account Setting";
                break;
            case 6:
                logtype = "Edit Credit Limit";
                break;
            case 35:
                logtype = "Edit Game PT";
                break;
            case 36:
                logtype = "Edit Game Setting";
                break;
            case 8:
                logtype = "Edit PT";
                break;
            case 9:
                logtype = "Edit VIP";
                break;
            case 10:
                logtype = "Create Sub-Account";
                break;
            case 11:
                logtype = "Edit Sub-Account";
                break;
            case 16:
                logtype = "Create Manager Account";
                break;
            case 17:
                logtype = "Edit Manager Account";
                break;
            case 20:
                logtype = "Edit Nick Name";
                break;
            default:

        }
        htmlStr += "<tr>";
        htmlStr += "<td style=\"text-align:left;\">" + (i + 1) + "</td>";
        htmlStr += "<td style=\"text-align:left;\">" + info["Account"] + "</td>";
        htmlStr += "<td style=\"text-align:center;\" class=\"background_all\">" + DHMS + "</td>";
        htmlStr += "<td class=\"background_all\">" + info["Updated By"] + "</td>";
        htmlStr += "<td style=\"text-align:center;\">" + logtype + "</td>";
        htmlStr += "<td class=\"background_all\"><a href=\"#\" onclick=\"Show('" + (i + 1) + "')\">" + testrecor + "</a><span id=\"" + (i + 1) + "" + "\" style=\"display:none\">" + info["Log Details"].replace(pattern, "<br>") + "</span></td>";

        htmlStr += "</tr>";
    }

    $('#tablelist').append(htmlStr);
    //如果无数据
    if (htmlStr.length == 0) {
        $('#tablelist').append("<tr><td style=\"text-align:left\" class=\"td_classcolspan\">no data</td></tr>");
        $('.td_classcolspan').attr('colspan', 14);
    }

    var pagenow = json[1][0].PageNow;
    var pagemax = json[1][1].PageMax;
    var order = json[1][2].Order;

    $('#div_hid').data('order', order);       //当前排序存放于缓存
    $('#div_hid').data('pagenow', pagenow);   //当前页存放于缓存

    loadPage(order, pagenow, pagemax, "goPage");

    unloading();
}

/*
执行分页
PageNow:跳转页面
*/
function goPage(pageNow, order) {
    selectAccountList(pageNow, order);
}

/****************************** report_AccountStatistics.aspx end     **********************************/

/*显示加载状态
*/
function loading() {
    $('#bgenable').show();
    $('.div_loading').show();
}

/*隐藏加载状态
*/
function unloading() {
    $('#bgenable').hide();
    $('.div_loading').hide();
}
function Show(id) {
    var info = $('#' + id).html();
    $('#test').html(info);
    $('#isShow').show();
}
function Close() {
    $('#isShow').hide();
}

　　

/*通用分页
Order:      排序
PageNoew:   当前页
PageMax:    最大页
goPage:     分页跳转方法
*/
function loadPage(Order, PageNow, PageMax, goPage) {
    var htmlPage = '';
    if (PageMax > 1) {
        var indexStart = PageNow <= 10 ? 0 : (PageNow % 10 == 0 ? PageNow - 10 : PageNow - PageNow % 10);

        if (PageNow > 10) {
            htmlPage += " <a href=\"#\" onclick=\"" + goPage + "(1," + Order + ")\"><<</a>";
            htmlPage += " <a href=\"#\" onclick=\"" + goPage + "(" + (PageNow - (PageNow % 10) - 9) + "," + Order + ")\">...</a>";
        }
        for (var i = indexStart; i < ((indexStart + 10) >= PageMax ? PageMax : (indexStart + 10)); i++) {
            if (PageNow - 1 == i)
                htmlPage += " " + (i + 1);
            else
                htmlPage += " <a href=\"#\" onclick=\"" + goPage + "(" + (i + 1) + "," + Order + ")\">" + (i + 1) + "</a>";
        }

        if (PageMax > 10 && (PageMax - PageNow) >= (PageMax % 10)) {
            var pagetemp = 0;
            if (PageNow % 10 == 0)
                pagetemp = PageNow + 1;
            else
                pagetemp = PageNow - (PageNow % 10) + 11;

            htmlPage += " <a href=\"#\" onclick=\"" + goPage + "(" + pagetemp + "," + Order + ")\">...</a>";
            htmlPage += " <a href=\"#\" onclick=\"" + goPage + "(" + PageMax + "," + Order + ")\">>></a>";
        }
    }

    $('.div_Page').show().html(htmlPage);

}