JQuery Datatable потерян после выпадающего списка изменения выбранного индекса панель обновления asp.net

Я добавил библиотеку jquery в свой gridview, и это было действительно полезно. когда на странице загружается эта таблица данных, отображается отлично, но когда я меняю значение раскрывающегося списка jquery datatable disapper. в этом случае gridview просто отображает данные на основе значения параметров раскрывающегося списка. Я слежу за этим руководство.

ссылка ссылка jquery:

<link type = "text/css" rel = "stylesheet" href = "https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type = "text/css" rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type = "text/css" rel = "stylesheet" href = "https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type = "text/javascript" src = "https://code.jquery.com/jquery-1.12.4.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type = "text/javascript" src = "https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type = "text/javascript" src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

установить синтаксис javascript в gridview:

<script type = "text/javascript">
    //on page load
    $(function () {
        $('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true,
            "sPaginationType": "full_numbers"
        });
    });

</script>

вот мой gridview asp.net:

<form id = "form1" runat = "server">
    <div>
        <asp:ScriptManager ID = "ScriptManager1" runat = "server"></asp:ScriptManager>
        <asp:UpdatePanel ID = "UpdatePanel1" runat = "server" RenderMode = "Inline">
            <ContentTemplate>
                <asp:DropDownList ID = "DropDownList1" runat = "server" AutoPostBack = "true" DataTextField = "Name" DataValueField = "Name" 
                OnSelectedIndexChanged = "DropDownList1_SelectedIndexChanged" Width = "30%" placeholder = "select">
                </asp:DropDownList>
                <br />
                <br />
                <asp:Label ID = "Label1" runat = "server" Text = "Label"></asp:Label>
                <br />
                <asp:GridView ID = "GridView1" runat = "server" AutoGenerateColumns = "false" class = "table table-striped"
                    Width = "100%" OnRowCommand = "GridView1_RowCommand">
                    <Columns>
                        <asp:BoundField DataField = "Name" HeaderText = "Name" />
                        <asp:BoundField DataField = "Address" HeaderText = "Address" />
                        <asp:ButtonField CommandName = "editRecord" ControlStyle-CssClass = "btn btn-info"
                            ButtonType = "Button" Text = "Edit" HeaderText = "Edit Record" HeaderStyle-Width = "10%">
                            <ControlStyle CssClass = "btn btn-info"></ControlStyle>
                        </asp:ButtonField>
                    </Columns>
                </asp:GridView>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
</form>

когда я запустил эту страницу, это сработало:

НО после того, как я попытался выбрать одно из значений раскрывающегося списка, jquery с данными больше не появлялся.

нужно предложить эту проблему и исправить это. Спасибо