【Bootstrap3.0建站筆記三】AspNetPager分頁，每一列都可排序

標籤：bootstrap3.0   aspnetpager分頁   每一列都可排序   

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);//資料繫結