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

【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);//数据绑定

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

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/119076.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • nofollow标签浪费了多少站长做外链的时间

    nofollow标签浪费了多少站长做外链的时间

    2021年11月17日
  • Java贪吃蛇全代码

    Java贪吃蛇全代码用Java编写精典小游戏——贪吃蛇!前言  我想贪吃蛇应该是不少90后和00后的童年(我本人是01年的),回想起从前偷偷拿着我爹的诺基亚在被窝里玩贪吃蛇,不禁感慨万分,时间飞逝,没想到10年后的我也可以自己做一个贪吃蛇了。    该程序主要实现了以下功能:  1.按空格开始游戏、暂停游戏或重新开始游戏。  2.方向键控制蛇移动的方向。  3.蛇吃掉食物可以增长,并增加游戏分数(不会加快游戏速度)。  4.蛇咬到自己会结束游戏。  5.蛇撞到游戏区域外会结束游戏。    接下来放

  • AndroidStudio 编译Gradle build running/ download maven依赖下载太慢

    AndroidStudio 编译Gradle build running/ download maven依赖下载太慢

  • C++中resize函数的用法

    resize(),设置大小;reserve(),设置容量;resize()是分配容器的内存大小,而reserve()只是设置容器容量大小,但并没有真正分配内存。resize()可以传递两个参数,分别是大小和初始值,初始值默认为0,reserve()只能传递一个参数,不能设置初始值,其初始值为系统随机生成。例:#include<iostream>#include&…

  • 可视化报表开发_可视化数据报表

    可视化报表开发_可视化数据报表当今时代,传统的报表工具已经很难满足人们对于数据可视化的期望了,而大数据处理工具却可以为人们提供了更多的选择。微金时代的RDP报表工具操作简便,可直接上手使用,无需编码,就可以制作各种复杂、炫酷的报表。RDP报表工具表格式报表功能和亮点根据中国特色的报表需求,研发出的轻量级的企业级Web报表工具。仅需简单拖拽式配置,即可制作出各种复杂、炫酷的报表。支持中国式复杂报表的处理,例如:Excel清单报表、交叉报表、分组报表、多源分片式报表、分块报表、表单报表、图形报表、回写报表、假设分析报表、二次.

  • 面试题总结 —— JAVA高级工程师

    面试题总结 —— JAVA高级工程师面试题总结——JAVA高级工程师近期考虑换工作的问题,于是投简历面试,面试5家公司的高级Java工程师,有4家给了我offer,想着总结一下面试经验,方便最近正在寻求机会的你们一、无笔试题不知道是不是职位原因还是没遇到,面试时,都不需要做笔试题,而是填张个人信息表格,或者直接面试二、三大框架方面问题1、Spring事务的隔离性,并说说每个隔离性的…

发表回复

您的电子邮箱地址不会被公开。

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