Jquery DataTable загружается нормально изначально, но без форматирования / стилизации при отправке команды для изменения данных

Question

Я использую плагин datatables JQuery на панели обновления ASP.NET, и он прекрасно работает, когда сначала загружается вызов для загрузки таблицы. Однако когда я вызываю метод для извлечения новых данных из таблицы, форматирование / стилирование исчезает. Данные есть, но форматирования из таблицы данных нет.

Вот что я пробовал:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

            <asp:GridView ID="tblCalendar" runat="server" AutoGenerateColumns="false" CssClass="table table-bordered table-striped" Visible="true">
                <RowStyle CssClass="myrow" />
                <AlternatingRowStyle CssClass="myrow" />
                <Columns>
                    <asp:BoundField DataField="Subject" HeaderText="Subject" />
                    <asp:BoundField DataField="Date" HeaderText="Date" />
                </Columns>
            </asp:GridView>

    </ContentTemplate>
 </asp:UpdatePanel>
</asp:Content>

и jquery - я думал, что смогу очистить и перезагрузить таблицу, но она не работает.

function reloadTable() {
 $('#tblCalendar').empty();
 var table = $('#tblCalendar').DataTable();
 table.reloadTable();

 $("[id*=tblCalendar]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "responsive": true,
    "dom": 'lBfrtip',
    "order": [[1, "asc"]],
    "buttons": ['excel', 'print', 'pdfHtml5']
 });
}

и код позади

    protected void btnUpdate_Click(object sender, EventArgs e)
    {           
        MethodThatUpdatesMyTable();
        ScriptManager.RegisterStartupScript(UpdatePanel1, UpdatePanel1.GetType(), "myFunction", "reloadTable();", true);
    }

Данные в таблице извлекаются из календаря Outlook - кнопка для изменения данных просто меняет дату календаря, и она должна загружать результаты в таблицу данных с форматированием / стилем, но это не так. Я предполагаю, что это имеет какое-то отношение, когда происходит обратная передача, но не уверен, что нужно.

Answer 1

Я нашел решение. На самом деле проблема была связана с обратной публикацией и проблемами с jquery и UpdatePanel. Может быть, есть более чистый способ сделать это, но это работает для меня.

    $(function () {
$("[id*=tblCalendar]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    "responsive": true,
    "dom": 'lBfrtip',
    "order": [[1, "asc"]],
    "buttons": ['excel', 'print', 'pdfHtml5']
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
    prm.add_endRequest(function (sender, e) {
        if (sender._postBackSettings.panelsToUpdate != null) {
            $(function () {
                $("[id*=tblCalendar]").prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
                    "paging": true,
                    "lengthChange": true,
                    "searching": true,
                    "ordering": true,
                    "info": true,
                    "autoWidth": true,
                    "responsive": true,
                    "dom": 'lBfrtip',
                    "order": [[1, "asc"]],
                    "buttons": ['excel', 'print', 'pdfHtml5']
                });
            })
        }
    });
};

})