【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序
来源：互联网 发布：入骨相思知不知百度云 编辑：程序博客网 时间：2024/05/15 12:46
1、AspNetPager分页，实现每一列都可排序：
（1）、需要将默认排序字段放在HTML页面中。
（2）、排序字段放置为td节点的属性。
如图：
实现的效果图如：
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);//数据绑定 0 0
- 【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序
- 【Bootstrap3.0建站笔记一】表单元素排版
- 【Bootstrap3.0建站笔记一】表单元素排版
- MVC5 + EF6 + Bootstrap3 (11) 排序、搜索、分页
- AspNetPager控件的分页与排序
- AspNetPager控件的分页与排序
- AspNetPager控件的分页与排序
- AspNetPager分页
- AspNetPager分页
- AspNetPager分页
- AspNetPager 分页
- AspNetPager 分页
- aspnetpager分页
- AspNetPager分页
- aspnetpager分页
- AspNetPager分页
- AspNetPager 分页
- aspnetpager 排序
- monkeyrunner工具
- STL双向队列之排队买饭（deque）
- 我非常喜欢在这里注册一个博客分享我的生活
- dhtcrawlerDHT网络原理制作
- 数组名访问数组元素
- 【Bootstrap3.0建站笔记三】AspNetPager分页，每一列都可排序
- pomelo 单独启动各个服务器
- Strust2环境搭建及HelloWorld
- 隐式Intent
- 嵌入式 命令行修改网络配置方法小结
- MyEclipse通过Oracle数据库表反转生成实体类，hibernate反向生成
- 素颜来袭，再强悍的女子也有软弱的一面
- _aligned_malloc自己实现
- Javascript 正确使用方法
