您的位置: 首页  >  IT文章  >  【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

分类: IT文章 • 2023-03-30 15:56:08

1、AspNetPager分页，实现每一列都可排序：

          （1）、须要将默认排序字段放在HTML页面中。
          （2）、排序字段放置为td节点的属性。
  

如图：

【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

实现的效果图如：

【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序

HTML代码： 



JS代码：



//获取地址參数
function request(paras) {
    var url = location.href;
    var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
    var paraObj = {}
    for (i = 0; j = paraString[i]; i++) {
        paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
    }
    var returnValue = paraObj[paras.toLowerCase()];
    if (typeof (returnValue) == "undefined") {
        return "0";
    } else {
        return returnValue;
    }
}
window.onload = function () {
    var OrderBySort = request('OrderBySort');//获取地址栏排序

    var filed = '';//排序字段
    var orderClass = '';//排序class
    if (OrderBySort.indexOf('*') != -1) {
        filed = OrderBySort.substring(0, OrderBySort.indexOf('*'));
        orderClass = OrderBySort.substring(OrderBySort.indexOf('*') + 1);
    }
    //获取文字
    var text = unescape(request('text'));
    var value = filed + "*" + orderClass;
    if (OrderBySort != '0') {//当地址栏有參数时
        $('#DataTables_Table_0 thead tr td').each(function (index, element) {
            var defaultorder = $('#MainContent_defaultOrder').val();
            if (OrderBySort.indexOf(defaultorder) == -1) {//假设不是以发表时间排序的，设置其样式为不排序
                if ($(this).attr("sortf") == defaultorder) {
                    $(this).attr("class", "sorting");
                }
                if ($(this).attr("sortf") == filed) {
                    $(this).after("<td class='" + orderClass + "' onclick='OrderBy(this)'  sortf='" + filed + "' text='" + text + "'>" + text + "<input name='ctl00$MainContent$hidden_Orderby' type='hidden' id='MainContent_hidden_Orderby' value='" + value + "'></td>");
                    $(this).remove();
                }
            } else {//以时间排序时
                if ($(this).attr("sortf") == filed) {
                    $(this).after("<td class='" + orderClass + "' onclick='OrderBy(this)'  sortf='" + filed + "' text='" + text + "'>" + text + "<input name='ctl00$MainContent$hidden_Orderby' type='hidden' id='MainContent_hidden_Orderby' value='" + value + "'></td>");
                    $(this).remove();
                }
            }
        });
    }
    var top = request('scrollTop');
    $("body,html").animate({ scrollTop: top });//网页被卷去的高
};
function OrderBy(obj) {
    //获取文字
    var text = $(obj).attr("text");
    //获取排序class
    var orderClass = $(obj).attr("class");
    //获取排序字段
    var filed = $(obj).attr("sortf");
    if (orderClass == 'sorting') {
        orderClass = 'sorting_asc';
    }
    if (orderClass == 'sorting_asc') {
        orderClass = 'sorting_desc';
    }
    else if (orderClass == 'sorting_desc') {
        orderClass = 'sorting_asc';
    }
    var value = filed + "*" + orderClass;
    $(obj).after("<td class='" + orderClass + "' onclick='OrderBy(this)'  sortf='" + filed + "'>" + text + "<input name='ctl00$MainContent$hidden_Orderby' type='hidden' id='MainContent_hidden_Orderby' value='" + value + "'></td>");
    $(obj).remove();
    var top = document.documentElement.scrollTop;//IE
    if (top == 0) {
        top = document.body.scrollTop;//非IE  网页被卷去的高
    }
    var url = location.href;
    url = location.href.substring(0, url.indexOf("?"));
    window.location.href = url + '?OrderBySort=' + filed + "*" + orderClass + '&scrollTop=' + top + '&Text=' + escape(text) + '';//字段*排序 和 当前
}




C#后台代码：

相关推荐