javascript - 更新面板中 JQUERY 数据表中的排序列
问题描述
我在我的 ASP.NET 网站中使用 JQUERY DATATABLE 插件。我的表(列表视图)被插入到更新面板中。当我单击列标题对数据表丢失的格式和按钮进行排序时。
这是我的html:
<asp:UpdatePanel runat="server" ID="upd1">
<ContentTemplate>
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-body">
<asp:ListView ID="lvwCategories" runat="server" GroupPlaceholderID="groupPlaceHolder1" DataSourceID="odsUserList"
ItemPlaceholderID="itemPlaceHolder1">
<LayoutTemplate>
<table class="table table-striped dt-responsive nowrap" id="datatable-buttons" style="width:100%">
<thead>
<tr>
<th>
<asp:LinkButton ID="LinkButton1" runat="server" >
<asp:Label runat="server" ID="lbl01" Text="Username" ></asp:Label>
</asp:LinkButton>
</th>
<th>
<asp:LinkButton ID="LinkButton2" runat="server" >
<asp:Label runat="server" ID="Label1" Text="Nominativo" ></asp:Label>
</asp:LinkButton>
</th>
<th>
<asp:LinkButton ID="LinkButton3" runat="server" >
<asp:Label runat="server" ID="Label2" Text="Email" ></asp:Label>
</asp:LinkButton>
</th>
<th>
<asp:LinkButton ID="LinkButton6" runat="server" >
<asp:Label runat="server" ID="Label5" Text="Ruolo" ></asp:Label>
</asp:LinkButton>
</th>
<th>
<asp:LinkButton ID="LinkButton4" runat="server" >
<asp:Label runat="server" ID="Label3" Text="Ultimo accesso" ></asp:Label>
</asp:LinkButton>
</th>
<th style="text-align:center">
<asp:LinkButton ID="LinkButton5" runat="server">
<asp:Label runat="server" ID="Label4" Text="Azioni" ></asp:Label>
</asp:LinkButton>
</th>
</tr>
</thead>
<asp:PlaceHolder runat="server" ID="groupPlaceHolder1"></asp:PlaceHolder>
</table>
</LayoutTemplate>
<GroupTemplate>
<tr>
<asp:PlaceHolder runat="server" ID="itemPlaceHolder1"></asp:PlaceHolder>
</tr>
</GroupTemplate>
<ItemTemplate>
<td>
<asp:HyperLink ID="hlkUserName" runat="server" Text='<%# Eval("UserName")%>' NavigateUrl='<%# "Utente.aspx?UserId=" & Eval("ProviderUserKey").ToString %>'/>
</td>
<td><%# Eval("Comment") %> </td>
<td><%# Eval("Email") %> </td>
<td><%# Eval("Ruolo") %> </td>
<td><%# Eval("LastLoginDate") %> </td>
<td style="text-align:center">
<asp:ImageButton ID="imgBtnEdit" CommandName="Edt" ToolTip="Edit a record." CommandArgument='<%#Eval("Username") %>'
runat="server" ImageUrl="~/Images/delete_black_192x192.png" Height="18"/>
</td>
</ItemTemplate>
</asp:ListView>
<asp:ObjectDataSource runat="server" ID="odsUserList" TypeName="MembershipUtilities.MembershipUserODS" SelectMethod="GetMembers" >
<SelectParameters>
<asp:Parameter Name="sortData" Type="String" DefaultValue="UserName" />
</SelectParameters>
</asp:ObjectDataSource>
</div> <!-- end card body-->
</div> <!-- end card -->
</div><!-- end col-->
</div>
<!-- end row-->
</ContentTemplate>
这是我的 JAVASCRIPT:
function pageLoad() {
$('[data-plugin="switchery"]').each(function (idx, obj) {
if ($(this).prop("tagName") == "SPAN" && $(this).find("input[type=checkbox]:first").prop("tagName") == "INPUT") {
var chk = $(this).find("input[type=checkbox]");
new Switchery(chk[0], $(this).data());
} else {
new Switchery($(this)[0], $(this).data());
}
});
$('.selectpicker').selectpicker();
}
$(document).ready(function () {
var a = $("#datatable-buttons").DataTable({
lengthChange: !1,
responsive: true,
buttons: ["copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
language: {
paginate: {
previous: "<i class='mdi mdi-chevron-left'>",
next: "<i class='mdi mdi-chevron-right'>"
}
}
});
a.buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)")
});
我尝试在 pageLoad 事件中移动所有 javascript 代码,但在这种情况下,格式和按钮仍然存在,但单击标题不排序。
解决方案
在 pageLoad 事件中移动了 JQUERY 代码:
function pageLoad() {
$('[data-plugin="switchery"]').each(function (idx, obj) {
if ($(this).prop("tagName") == "SPAN" && $(this).find("input[type=checkbox]:first").prop("tagName") == "INPUT") {
var chk = $(this).find("input[type=checkbox]");
new Switchery(chk[0], $(this).data());
} else {
new Switchery($(this)[0], $(this).data());
}
});
$('.selectpicker').selectpicker();
$(document).ready(function () { var a = $("#datatable-buttons").DataTable({ lengthChange: !1, responsive: true, buttons: ["copyHtml5", "excelHtml5", "csvHtml5" , "pdfHtml5"], 语言: { 分页: { 上一个: "", 下一个: "" } }
}); a.buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6: eq(0)"); }); }
并在 Linkbutton 控件中添加 CommandName 和 CommandArgument:
<thead>
<tr>
<th>
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Sort" CommandArgument="Username">
<asp:Label runat="server" ID="lbl01" Text="Username" ></asp:Label>
</asp:LinkButton>
</th>
推荐阅读
- unity3d - 我如何在 unity 2018.1 中设置和使用 proGrids?
- python - Django 在保存之前加密 FileField
- javascript - 从Javascript中的字符串中删除子字符串
- nest-device-access - 列出设备和结构为空
- data-structures - 如何断言/内省嵌套的递归结构/枚举?
- php - 不在 Nginx 服务器上加载 css 文件
- android - MutableMap/HashMap 的快捷方式
- assembly - 想用Labels简化小人电脑程序BubbleSort
- firebase - Google 应用 ID 丢失 Firebase Analytics 已禁用
- android - 错误:找不到正确的提供者
高于此消费者 小部件