jQuery DataTable在应用更新面板后不工作,因此如何防止?

5sxhfpxr  于 2023-03-01  发布在  jQuery
关注(0)|答案(1)|浏览(120)

我在asp.net网页表单上工作。我面临着jQuery数据表example不工作的问题,在按下数据表上显示数据的搜索按钮后。
我尝试搜索原因,发现更新面板有问题。
如果我删除了更新面板,所有的东西都会工作,数据表jquery也会工作
但如果我添加更新面板jQuery数据表将无法工作。
我添加更新面板,以防止回发到服务器的下拉列表。
如何使用更新面板并同时应用jQuery数据表?
我的代码详细信息aspx页

<form id="ADCStatus" runat="server">
       <asp:UpdatePanel ID="updatepnl" runat="server"> 
                             <ContentTemplate> 



                                 
          
                                <div class="row">
                                    <div class="table-responsive">
                                        <table class="display" id="example">
                                            <thead>
                                                <tr>
                                                    <th>Branch Code</th>
                                                    <th>Entred Datetime</th>
                                                    <th>Order Type</th>
                                                    <th>Printer_name</th>
                                                    <th>Status</th>
                                                    <th>id</th>
                                                    <th>StatusCheck</th>
                                                    
                                                    
                                                    
                                                    
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <asp:Repeater runat="server" ID="repPSStatus">
                                                    <ItemTemplate>
                                                        <tr>
                                                            <td><%# Eval("BranchCode") %></td>
                                                            <td><%# Eval("EntredDatetime") %></td>
                                                            <td><%# Eval("OrderType") %></td>
                                                            <td><%# Eval("Printer_name") %></td>
                                                            <td><%# Eval("Status") %></td>
                                                         <%--   <td><%# Eval("id") %></td>--%>
                                                            <td><asp:Label Id="LblId" runat="server"
             Text='<%# Eval("id") %>'></asp:label></td>
                                                            <td class="GridCentre" style="width:20px;">  <asp:CheckBox id="chkSel" runat="server" Checked=false/> </td>
                                                        </tr>
                                                    </ItemTemplate>
                                                </asp:Repeater>
                                            </tbody>

                                        </table>
                                    </div>

                                </div>
                                 
                          
 </ContentTemplate> 
                                    </asp:UpdatePanel> 
 </form>

关于jquery函数

$(document).ready(function () {
    $('#example').DataTable({
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'collection',
                text: 'Export',
                buttons: [
                    //'copy',
                    'excel',
                    'csv',
                    'pdf'
                    //'print'
                ]
            },
            'copy', 'print' //'csv', 'excel', 'pdf', 
        ]
    });
});

更新帖子
我尝试通过下面的代码解决问题:

<script type="text/javascript"> 
                              var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
    if (args.get_error() == undefined) {
        UPDATEPANELFUNCTION();
    }                   
                                 }
                                 function UPDATEPANELFUNCTION() {
                                     jQuery(document).ready(function ($) {
                                         $('#example').DataTable({
                                            ///* destroy: true,*/
                                             dom: 'Bfrtip',
                                             buttons: [
                                                 {
                                                     extend: 'collection',
                                                     text: 'Export',
                                                     buttons: [
                                                         //'copy',
                                                         'excel',
                                                         'csv',
                                                         'pdf'
                                                         //'print'
                                                     ]
                                                 },
                                                 'copy', 'print' //'csv', 'excel', 'pdf', 
                                             ]
                                         });
                                     });
                                 }

                                 UPDATEPANELFUNCTION(); 
                             </script>

我得到警告表id=示例无法重新初始化数据表,因此如何防止显示此警告

vkc1a9a2

vkc1a9a21#

您需要注册您的脚本。
示例:

private void ResetDataTables()
  {
        StringBuilder builder = new StringBuilder();
        builder.Append("UPDATEPANELFUNCTION();");
        ScriptManager.RegisterStartupScript(this, this.GetType(), "UPDATEPANELFUNCTION", builder.ToString(), false);

  }

Page_Load上调用ResetDataTables()

相关问题