更新面板中JQUERY数据表中的排序列

Question

我在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代码，但在这种情况下，格式和按钮仍然保留，但单击标题不进行排序。

Answer 1

在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，响应式的：是的，按钮：[“ 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>