Ниже приведен код, который я использую. Это веб-сайт, который предоставляет телефонный справочник для сотрудников. «Первая» компания приобрела «вторую» компанию, и я пытаюсь использовать один и тот же альфа-пагинатор для обоих видов сетки. Есть 3 навигационные вкладки: userlink, userlinkTP, locationlink. Просто игнорируйте ссылку на местоположение, он не использует paginator. При нажатии на ссылку пользователя (первая компания) или ссылку пользователя (вторая компания) будет отображаться сетка с пользователем, для которого когда-либо была нажата компания. Когда вы нажимаете на ссылку пользователя и затем выбираете альфа, скажем, «B», сетка сортируется только по фамилии пользовательской ссылки, начинающейся с «B». Эта часть прекрасно работает. Когда вы нажимаете на userlinkTP, а затем выбираете альфа, скажем, "C", эта сетка сортируется по "C", которая работает ... НО ссылка пользователя показывает и по какой-то причине является активной сеткой. Я должен нажать еще раз на userlinkTP, чтобы увидеть отсортированную сетку.
Кроме того, активная альфа не остается с каждой отсортированной сеткой. Активная альфа - последняя нажатая. Я бы хотел, чтобы альфа-шоу было активным в соответствии с тем, какой выбор был в текущей выбранной сетке.
<script type="text/javascript">
var serverVariable = '<%= AlphaID %>';
var id = '#' + serverVariable
function SubmitNextForm(NextForm) {
document.getElementById('NextForm').value = NextForm;
document.getElementById('theForm').submit();
}
$(document).ready(function () {
$(id).addClass('active'); //sets pagination to All on first load
document.getElementById('gridDivTP').hidden = true; //hides 2nd grid on first load
document.getElementById('locationGrid').hidden = true; //hides location grid on first load
$("#GetCompany").val('Users'); //sets hidden field value to 1st grid on first load
//clears any active pagination on first load
$('.pagination li a').click(function (e) {
$('.pagination li.active').removeClass('active');
e.preventDefault();
});
});
var test = 'Users';
function ShowLocation() {
document.getElementById('locationGrid').hidden = false;
document.getElementById('gridDiv').hidden = true;
document.getElementById('gridDivTP').hidden = true;
$('#locationLink').addClass('active');
$('#userLink').removeClass('active');
$('#userLinkTP').removeClass('active');
document.getElementById('UserPager').hidden = true;
$('#locationGrid').removeClass('hideLocation');
test = 'Location';
}
function ShowUsers() {
document.getElementById('gridDiv').hidden = false;
document.getElementById('gridDivTP').hidden = true;
document.getElementById('locationGrid').hidden = true;
$('#locationLink').removeClass('active');
$('#userLinkTP').removeClass('active');
$('#userLink').addClass('active');
document.getElementById('UserPager').hidden = false;
$("#GetCompany").val('Users');
test = 'Users';
}
function ShowUsersTP() {
document.getElementById('gridDivTP').hidden = false;
document.getElementById('locationGrid').hidden = true;
document.getElementById('gridDiv').hidden = true;
$('#locationLink').removeClass('active');
$('#userLink').removeClass('active');
$('#userLinkTP').addClass('active');
document.getElementById('UserPager').hidden = false;
$("#GetCompany").val('UsersTP');
test = 'UsersTP';
}
}
</script>
<style type="text/css">
.hideLocation {
display: none;
}
.pagination::selection {
margin: auto;
}
.pagination{
margin:0px;
}
</style>
</head>
<body class="overflow-hidden">
<form id="theForm" runat="server">
<input type="hidden" value="" id="frmID" name="O_" runat="server" />
<input type="hidden" value="" id="NextForm" name="O_" runat="server" />
<input type="hidden" value="" id="GetCompany" name="GetCompany" runat="server" />
<!-- Overlay Div -->
<div id="" class="transparent"></div>
<div id="wrapper" class="sidebar-hide">
<nav class="navbar navbar-default" style="background: #1F5D2C">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Phone Directory
</a>
</div>
</div>
</nav>
</div>
<!-- /top-nav-->
<div id="main-container">
<div class="padding-md" style="margin-top: -5px;">
<div class="row" style="padding-bottom: 5px;">
<div class="col-md-9">
<nav id="UserPager">
<ul class="pagination">
<li></li>
<li id="ALL"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:ALL');">ALL</a></li>
<li id="A"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:A');">A</a></li>
<li id="B"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:B');">B </a></li>
<li id="C"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:C');">C</a></li>
<li id="D"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:D');">D</a></li>
<li id="E"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:E');">E</a></li>
<li id="F"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:F');">F</a></li>
<li id="G"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:G');">G</a></li>
<li id="H"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:H');">H</a></li>
<li id="I"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:I');">I</a></li>
<li id="J"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:J');">J</a></li>
<li id="K"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:K');">K</a></li>
<li id="L"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:L');">L</a></li>
<li id="M"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:M');">M</a></li>
<li id="N"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:N');">N</a></li>
<li id="O"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:O');">O</a></li>
<li id="P"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:P');">P</a></li>
<li id="Q"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:Q');">Q</a></li>
<li id="R"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:R');">R</a></li>
<li id="S"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:S');">S</a></li>
<li id="T"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:T');">T</a></li>
<li id="U"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:U');">U</a></li>
<li id="V"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:V');">V</a></li>
<li id="W"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:W');">W</a></li>
<li id="X"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:X');">X</a></li>
<li id="Y"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:Y');">Y</a></li>
<li id="Z"><a href="#" runat="server" style="color: #1F5D2C;" onclick="SubmitNextForm('Pager:Z');">Z</a></li>
</ul>
</nav>
</div>
</div>
<div class="row" style="margin-top: 5px;">
<div class="col-md-10 col-md-offset-1">
<ul class="nav nav-tabs">
<li class="nav-item active" id="userLink">
<a class="nav-link" href="#" onclick="ShowUsers();" runat="server" style="color: #1F5D2C;background-color:beige;">First Set of Employees</a>
</li>
<li class="nav-item" id="locationLink">
<a class="nav-link" href="#" runat="server" style="color: #1F5D2C;background-color:beige;" onclick="ShowLocation();">Locations</a>
</li>
<li class="nav-item" id="userLinkTP">
<a class="nav-link" href="#" onclick="ShowUsersTP();" runat="server" style="color:#1F5D2C;background-color:beige;">Second Set of Employees</a>
</li>
<li class="nav-item"></li>
<li class="nav-item pull-right">
<a class="btn btn-primary nav-link" data-toggle="modal" data-target="#exampleModal" style="background-color: #1f5D2c;">
<i class="fa fa-wrench"></i> Send Admin Message
</a>
</li>
</ul>
</div>
<div class="col-lg-10 col-lg-offset-1">
<div id="gridDiv" runat="server" >
<dx:BootstrapGridView ID="grid" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1" KeyFieldName="ID" ClientInstanceName="grid" >
<CssClasses Table="table_Class" HeaderRow="gridHeader" />
<SettingsBootstrap Striped="True" Sizing="Large" />
<Settings ShowFilterRow="True" ShowFilterRowMenu="True" ShowGroupPanel="True" />
<SettingsPager PageSize="1000" Mode="ShowAllRecords">
</SettingsPager>
<Columns>
<dx:BootstrapGridViewTextColumn FieldName="FullName" VisibleIndex="2" CssClasses-DataCell="DataCellName" Visible="False">
<CssClasses DataCell="DataCellName" HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="JobTitle" VisibleIndex="3">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="CompanyDepartment" VisibleIndex="4" Caption="Department">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="WorkPhone" VisibleIndex="8">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewHyperLinkColumn Caption="Email" FieldName="WorkEmail" VisibleIndex="7">
<CssClasses HeaderCell="gridHeader" DataCell="a" />
<PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}"></PropertiesHyperLinkEdit>
</dx:BootstrapGridViewHyperLinkColumn>
<dx:BootstrapGridViewTextColumn Caption="Ext." FieldName="Extension" VisibleIndex="9" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="Cell Phone" FieldName="CellPhone" VisibleIndex="10" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="Last Name" FieldName="LastName" SortIndex="0" SortOrder="Ascending" VisibleIndex="0" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="First Name" FieldName="FirstName" VisibleIndex="1" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
</Columns>
<SettingsDetail ExportMode="All" />
<SettingsSearchPanel Visible="True" />
</dx:BootstrapGridView>
</div>
<div id="gridDivTP" runat="server">
<dx:BootstrapGridView ID="gridTP" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSourceTP" KeyFieldName="ID" ClientInstanceName="gridTP">
<CssClasses Table="table_Class" HeaderRow="gridHeader" />
<SettingsBootstrap Striped="True" Sizing="Large" />
<Settings ShowFilterRow="True" ShowFilterRowMenu="True" ShowGroupPanel="True" />
<SettingsPager PageSize="1000" Mode="ShowAllRecords">
</SettingsPager>
<Columns>
<dx:BootstrapGridViewTextColumn FieldName="FullName" VisibleIndex="2" CssClasses-DataCell="DataCellName" Visible="False">
<CssClasses DataCell="DataCellName" HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="JobTitle" VisibleIndex="3">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="CompanyDepartment" VisibleIndex="4" Caption="Department">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="WorkPhone" VisibleIndex="8">
<CssClasses HeaderCell="gridHeader" DataCell="DataCell" />
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewHyperLinkColumn Caption="Email" FieldName="WorkEmail" VisibleIndex="7">
<CssClasses HeaderCell="gridHeader" DataCell="a" />
<PropertiesHyperLinkEdit NavigateUrlFormatString="mailto:{0}"></PropertiesHyperLinkEdit>
</dx:BootstrapGridViewHyperLinkColumn>
<dx:BootstrapGridViewTextColumn Caption="Ext." FieldName="Extension" VisibleIndex="9" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="Cell Phone" FieldName="CellPhone" VisibleIndex="10" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="Last Name" FieldName="LastName" SortIndex="0" SortOrder="Ascending" VisibleIndex="0" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn Caption="First Name" FieldName="FirstName" VisibleIndex="1" CssClasses-HeaderCell="gridHeader">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
</Columns>
<SettingsDetail ExportMode="All" />
<SettingsSearchPanel Visible="True" />
</dx:BootstrapGridView>
</div>
<div id="locationGrid" class="hiddenlocation" >
<dx:BootstrapGridView ID="grid2" runat="server" AutoGenerateColumns="False" DataSourceID="LocationDataSource" ClientInstanceName="grid2">
<CssClasses Table="table_Class" HeaderRow="gridHeader" />
<SettingsBootstrap Striped="True" />
<Settings ShowFilterRow="True" ShowFilterRowMenu="True" ShowGroupPanel="True" />
<SettingsPager PageSize="25" Mode="ShowAllRecords">
<AllButton Visible="True" />
<PageSizeItemSettings Visible="True" />
</SettingsPager>
<Columns>
<dx:BootstrapGridViewTextColumn FieldName="AccountName" CssClasses-HeaderCell="gridHeader" VisibleIndex="1" SortIndex="0" SortOrder="Ascending">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="Location" CssClasses-HeaderCell="gridHeader" VisibleIndex="7">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
<dx:BootstrapGridViewTextColumn FieldName="Extension" CssClasses-HeaderCell="gridHeader" VisibleIndex="9">
<CssClasses HeaderCell="gridHeader"></CssClasses>
</dx:BootstrapGridViewTextColumn>
</Columns>
<SettingsDetail ExportMode="All" />
<SettingsSearchPanel Visible="True" />
</dx:BootstrapGridView>
</div>
</div>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="GetPhoneDirectory" TypeName="GetGridData">
<SelectParameters>
<asp:Parameter DefaultValue="ALL" Name="Alpha" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSourceTP" runat="server" SelectMethod="GetPhoneDirectoryTP" TypeName="GetGridData">
<SelectParameters>
<asp:Parameter DefaultValue="ALL" Name="AlphaTP" Type="String" />
</SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="LocationDataSource" runat="server" SelectMethod="GetLocationList" TypeName="GetGridData"></asp:ObjectDataSource>
</div>
<!-- /.padding-md -->
</div>
<!-- /main-container -->
<!-- Button trigger modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Send Message to Admin</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<dx:BootstrapTextBox ID="myMessage" runat="server" NullText="Enter your message here"></dx:BootstrapTextBox>
<div class="input-group" style="margin-top: 30px; width: 250px;">
<span class="input-group-addon"><i class="fa fa-envelope"></i></span>
<input type="email" runat="server" class="form-control" id="myEmail" required="required" placeholder="Sender's Email Address" />
</div>
<div class="input-group" style="width: 250px; margin-top: 10px;">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input runat="server" id="myName" class="form-control" placeholder="Sender's Name" />
</div>
<p style="visibility: hidden;" id="test">Test</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a href="#" runat="server" class="btn btn-primary" onclick="required()"><i class="fa fa-envelope"></i>Send Message</a>
</div>
</div>
</div>
</div>
<a href="#" id="scroll-to-top" class="hidden-print"><i class="fa fa-chevron-up"></i></a>
</form>
</body>
</html>
Код для сортировки сеток:
Dim Workfield As Object = Split(Selection, ":")
If Selection.Contains("Pager") Then
If GetCompany.Value = "Users" Then
Dim Alpha As String = Workfield(1)
AlphaID = Workfield(1)
With ObjectDataSource1
.SelectParameters("Alpha").DefaultValue = Alpha
End With
grid.SearchPanelFilter = ""
grid.DataBind()
ElseIf GetCompany.Value = "UsersTP" Then
Dim AlphaTP As String = Workfield(1)
AlphaID = Workfield(1)
With ObjectDataSourceTP
.SelectParameters("AlphaTP").DefaultValue = AlphaTP
End With
gridTP.SearchPanelFilter = ""
gridTP.DataBind()
End If
End If