1. 全栈程序员必看首页

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

全栈程序员-站长 • • 未分类 • 阅读 44

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

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

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

如图：

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

实现的效果图如：

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

HTML代码：

<div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
                            <table class="table table-striped table-hover  table-bordered  bootstrap-datatable   " id="DataTables_Table_0" >
                                <thead>
                                    <tr><input type="hidden" id="defaultOrder" value="FirstDaijaDate" runat="server" /><!--默认排序-->
                                        <td class="sorting_asc" onclick="OrderBy(this)" sortf="FirstDaijaDate" text="首次代驾">首次代驾<input type="hidden" id="hidden_Orderby" value="FirstDaijaDate*sorting_desc" runat="server" /></td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="CustomerName" text="姓名">姓名</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="CustomerPhone" text="联系方式">联系方式</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="Attribution" text="归属地">归属地</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="DaiJiaCount" text="代驾次数">代驾次数</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="LastRechargeDate" text="最后充值">最后充值</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="LastRechargeMoney" text="充值金额">充值金额</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="TrackingState" text="跟踪状态">跟踪状态</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="IsVisit" text="是否回訪">是否回訪</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="IsVIP" text="是否VIP">是否VIP</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="NextContactDate" text="再联系时间">再联系时间</td>
                                        <td class="sorting" onclick="OrderBy(this)" sortf="LastTrackingCustomerService" text="客服">客服</td>
                                        <td >操作</td>
                                    </tr>
                                </thead>
                                <tbody>
                                    <asp:Repeater ID="Repeater1" runat="server">
                                        <ItemTemplate>
                                            <tr>
                                                <td ><%# Eval("FirstDaijaDate") %></td>
                                                <td ><%# Eval("CustomerName") %></td>
                                                <td ><%# Eval("CustomerPhone") %></td>
                                                <td ><%# Eval("Attribution") %></td>
                                                <td ><%# Eval("DaiJiaCount") %></td>
                                                <td ><%# Eval("LastRechargeDate").ToString()!="0001/1/1 0:00:00"?Eval("LastRechargeDate"):"" %></td>
                                                <td ><%# Eval("LastRechargeMoney") %></td>
                                                <td ><%# GetTrackingState(Eval("TrackingState").ToString().Trim())%></td>
                                                <td ><%# GetIsVisit(Eval("IsVisit")==null?"":Eval("IsVisit").ToString())%></td>
                                                <td ><%# Eval("IsVIP").ToString()=="true"?"是":"否"%></td>
                                                <td ><%# Eval("NextContactDate").ToString()!="0001/1/1 0:00:00"?Eval("NextContactDate"):"" %></td>
                                                <td ><%# Eval("LastTrackingCustomerService") %></td>
                                                <td>
                                                    <div class="porpre">
                                                        <div class="input-group-btn" style="width: auto">
                                                            <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=CustomerDetail" class="btn btn-primary dropdown-toggle">    查  看    </a>
                                                            <a href="javascript:void(0);" onclick="btngroupClick(this,event)" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
                                                        </div>
                                                        <div style="display: none;" class="pHide" id="pHide">
                                                            <ul>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=ViewAccount" class="btn btn-success ">查看子号</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=Records" class="btn btn-info ">推荐记录</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=FailureOrder" class="btn btn-warning ">未报订单</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=DaijiaRecords" class="btn btn-danger ">代驾记录</a>
                                                                </li>
                                                                <li>
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=RechargeRecord" class="btn btn-primary ">充值记录</a>
                                                                </li>
                                                                <li class="ma">
                                                                    <a href="CustomerInformationDetails.aspx?Id=<%#Eval("Id") %>&phone=<%#Eval("CustomerPhone") %>&RecommendationNumber=<%#Eval("RecommendationNumber") %>&tabPage=BillingRecord" class="btn btn-warning ">开票记录</a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        </ItemTemplate>
                                    </asp:Repeater>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="row" style="margin-top: 15px;">
                        <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
                         <div style='font-size:14px;'>共<label style="color:#20A8D8; font-size:14px;""><%=this.AspNetPager1.RecordCount %></label>条记录</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
                            <webdiyer:AspNetPager ID="AspNetPager1" CssClass="paginator" CurrentPageButtonClass="cpb"
                                OnPageChanged="AspNetPager1_PageChanged" runat="server" FirstPageText="首页"  PageSize="5"
                                LastPageText="尾页" NextPageText="← 下一页" PrevPageText="← 上一页" AlwaysShow="true" ShowPageIndexBox="Never" NumericButtonCount="10"
                                CurrentPageButtonPosition="End"
                                ShowFirstLast="false">
                            </webdiyer:AspNetPager>
                        </div>
                    </div>

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#后台代码：

string OrderBySort = "FirstDaijaDate*sorting_desc";
if (Request.QueryString["OrderBySort"] != null && Request.QueryString["OrderBySort"] != "")
{
     OrderBySort = Request.QueryString["OrderBySort"];
}
this.hidden_Orderby.Value = OrderBySort.Trim();
BindProList(OrderBySort);//数据绑定

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/119076.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • 容斥原理的证明_容斥原理三集合公式解释

    容斥原理的证明_容斥原理三集合公式解释

    容斥原理的证明_容斥原理三集合公式解释容斥原理的证明原链接地址容斥原理（翻译）-vici-C++博客       我们要证明下面的等式：                其中B代表全部Ai的集合         我们需要证明在Ai集合中的任意元素，都由右边的算式被正好加上了一次（注意如果是不在Ai集合中的元素，是不会出现在右边的算式中的）。         假设有一任意元素在k个A

    全栈程序员-站长的头像 全栈程序员-站长
    2025年7月15日
    5
  • Qt多线程通信

    Qt多线程通信

    Qt多线程通信简述：1>Qt线程间共享数据主要有两种方式：1）使用共享内存。即使用一个两个线程都能够共享的变量（如全局变量），这样两个线程都能够访问和修改该变量，从而达到共享数据的目的。2）使用singal/slot机制，把数据从一个线程传递到另外一个线程。第一种方法在各个编程语言都普遍使用，而第二种方法是QT的特有的，本文主要介绍第二种。2>

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月19日
    209
  • 怎么开外汇平台_如何搭建一个外汇平台

    怎么开外汇平台_如何搭建一个外汇平台

    怎么开外汇平台_如何搭建一个外汇平台外汇市场从世纪之初进入中国，到如今有十几个年头。从起初耳熟能详的几个平台商到现在如雨后春笋般出现，中国的外汇市场越来越开放，价格成本也越来越透明。很多外汇代理商不断发展壮大，对搭建自己的平台有了需求。开外汇平台赚钱，是一个普遍流传的说法。但是开平台到底有怎么样的风险，需要注意哪些环节，要办理哪些手续，多数人还是感到非常神秘。汇商琅琊榜小编今天结合平台搭建行业资深人士的经验，来和大家谈谈怎么样搭建…

    全栈程序员-站长的头像 全栈程序员-站长
    2025年10月25日
    4
  • 安装matplotlib模块「建议收藏」

    安装matplotlib模块「建议收藏」

    安装matplotlib模块「建议收藏」matplotlib是python中强大的画图模块。首先确保已经安装python，然后用pip来安装matplotlib模块。进入到cmd窗口下，执行python-mpipinstall-Upipsetuptools进行升级。接着键入python-mpipinstallmatplotlib进行自动的安装，系统会自动下载安装包。安装完成后，可以用python-mpip…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月21日
    46
  • jdbc的增删改查_netbeans数据库增删改查

    jdbc的增删改查_netbeans数据库增删改查

    jdbc的增删改查_netbeans数据库增删改查JBDC数据的持久化:把数据保存到磁盘上。JDBC是java访问数据库的基石,JDO,Hibernate,Mybatis等都是基于JDBCJDBC是一个独立于特定数据库的管理系统，通用的SQL数据库存取和操作的公共接口配置文件:jdbc.propertiesuser=rootpassword=abc123url=jdbc:mysql://localhost:3306/testdriverClass=com.mysql.jdbc.Driver获取Connectionpublic s

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月8日
    6
  • wireshark抓包工具详细说明及操作使用「建议收藏」

    wireshark抓包工具详细说明及操作使用「建议收藏」

    wireshark抓包工具详细说明及操作使用「建议收藏」前言①wireshark是非常流行的网络封包分析软件，功能十分强大。可以截取各种网络封包，显示网络封包的详细信息。②使用wireshark的人必须了解网络协议，否则就看不懂wireshark。③

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月3日
    26

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号