JQuery 数据表和 ASP.NET UpdatePanel

Posted 2023-05-07

【中文标题】JQuery 数据表和 ASP.NET UpdatePanel

【英文标题】：JQuery Datatables and ASP.NET UpdatePanel

【发布时间】：2016-12-29 09:10:56

【问题描述】：

我在 ASP.NET 更新面板内的列表视图中使用 JQuery 数据表插件。对后端本身的调用正在工作，但我认为在调用后需要重新绘制表格，很难做到这一点。

代码如下：

    <asp:DropDownList 
    ID="ddlSector" 
    AutoPostBack="true"
    EnableViewState="true" 
    OnSelectedIndexChanged="ddlSector_SelectedIndexChanged"
    runat="server" />

<asp:UpdatePanel ID="upTopProducts" UpdateMode="Always" runat="server">

<ContentTemplate>

 <asp:ListView
    ID="lvTopProducts"
    runat="server">

    <ItemTemplate>
        <tr style="padding-top: 5px; padding-bottom:5px;">
            <td><%# Eval("productId") %></td>
            <td><%# Eval("productDesc") %></td>
            <td style="text-align:right;"><%# Eval("quantity") %></td>
        </tr>
    </ItemTemplate>

    <LayoutTemplate>
        <table ID="tblTopProducts" style="width: 100%">

             <thead>
                <tr style="padding-bottom: 10px; border: none;">
                    <th style="text-align:left; border: none; padding-left: 0px;">ID</th>
                    <th style="text-align:center; border: none; padding-left: 0px;">Name</th>
                    <th style="text-align:center; border: none;">Quantity</th>
                </tr>
            </thead>

            <tfoot>
                <tr>
                    <td style="border: none;"></td>
                    <td style="border: none;"></td>
                    <td style="border: none;"></td>
                </tr>          
            </tfoot>

            <tbody runat="server">
                <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
            </tbody>

        </table>                            
    </LayoutTemplate>          
</asp:ListView>

</ContentTemplate>

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ddlSector" EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>

和 Jquery：

       var topProductsTable = $('#tblTopProducts').dataTable(
            
                "scrollY": "150px",
                "scrollCollapse": true,
                "bSort": false,
                "paging": false,

                dom: '<"toolbar">rt<"floatRight"B><"clear">',

                buttons: 
                    buttons: [
                         extend: 'excel', text: 'Export to Excel', exportOption:  page: 'current' , footer: true 
                    ]
                

            );

【参考方案1】：

我不确定这是否能解决您的问题，但我会担心当更新面板刷新时，由于 ddlSector 的AutoPostBack，您将丢失您的 jQuery DataTable。

您可以使用 UpdatePanel 的 javascript API 重新连接它： How can I run some javascript after an update panel refreshes?

所以你可能有一些这样的代码：

$(function() 
    bindDataTable(); // bind data table on first page load
    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(bindDataTable); // bind data table on every UpdatePanel refresh
);

function bindDataTable() 
    var topProductsTable = $('#tblTopProducts').dataTable(
        
            "scrollY": "150px",
            "scrollCollapse": true,
            "bSort": false,
            "paging": false,

            dom: '<"toolbar">rt<"floatRight"B><"clear">',

            buttons: 
                buttons: [
                     extend: 'excel', text: 'Export to Excel', exportOption:  page: 'current' , footer: true 
                ]
            

        );

【讨论】：

这也应该有效，重要的是在回调之后调用 $.dataTable()。但更新面板与 jquery 不友好。

【参考方案2】：

回调后需要调用$.dataTables()，因为原表已经销毁。

   <ItemTemplate>
        <tr style="padding-top: 5px; padding-bottom:5px;">
            <td><%# Eval("productId") %></td>
            <td><%# Eval("productDesc") %></td>
            <td style="text-align:right;"><%# Eval("quantity") %></td>
        </tr>
    <script>
        var topProductsTable = $('#tblTopProducts').dataTable(
                                
                                    "scrollY": "150px",
                                    "scrollCollapse": true,
                                    "bSort": false,
                                    "paging": false,

                                    dom: '<"toolbar">rt<"floatRight"B><"clear">',

                                    buttons: 
                                        buttons: [
                                             extend: 'excel', text: 'Export to Excel', exportOption:  page: 'current' , footer: true 
                                        ]
                                    

                                );
                    </script>    

    </ItemTemplate>

【讨论】：

这不起作用，将脚本移动到确切的位置，但第二次调用时桌子爆炸了。

抱歉，将脚本移到 itemTemplate 中。可能是表中的脚本导致错误，我稍后去测试。

回调后需要运行脚本，等我回家我写一个更完整的解决方案。