asp.net - 重新加载后网格单击事件不起作用

Question

我有带有外部按钮（搜索）的 DataTable 来过滤数据，它适用于第一次加载/页面加载（参考第一次 click.PNG）

我需要使用多个条件过滤表，因此在同一页面上添加了一个搜索按钮并调用了重新加载功能

我搜索单击它会正确重新加载数据，但是单击搜索按钮后网格单击事件不起作用

如何解决这个问题？

第一次网格点击有效

ASP.NET 页面

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<style type="text/css">

</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<asp:UpdatePanel ID="UpdatePanelSalesOrder" runat="server">
<ContentTemplate>
<div class="row no-gutters">
<div class="col-sm-3">
<select class="custom-select custom-select-sm" runat="server" id="txtCategory">
</select>
</div>
<div class="col-sm-3">
<asp:Button ID="btnSearch" runat="server" Text="Search" CausesValidation="False"
CssClass="btn btn-secondary btn-sm btn-block" OnClick="btnSearch_Click" />
</div>
<div class="col-sm-6">
</div>
</div>
<table id="tblOrder" class="table-striped table-bordered table-hover table-sm" style="width: 100%">
<thead>
<tr style="height: 35px">
<th>Ord.No</th>
<th>Date</th>
<th>Product Name</th>
</tr>
</thead>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="theScript" runat="server">
<script type="text/javascript">
    $(document).ready(function () {
        fill_table();
        $('table tbody').on('click', 'tr', function () {
            alert("Data Table clicked");
        });
    });

    function fill_table()
    {
        var table = $('#tblOrder').DataTable(
        {
            'bPaginate': true,
            'bLengthChange': false,
            'bFilter': false,
            'bInfo': true,
            'bAutoWidth': false,
            'responsive': false,
            "scrollX": true,
            'ajax': {
                url: "SalesOrderIssue.aspx/get_PendingOrder",
                method: "POST",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                dataSrc: function (data) {
                    return $.parseJSON(data.d)
                }
            },
            'columns': [
                { data: "ORDER_NO" },
                { data: "ORDER_DATE", type: "date", render: function (data) { return moment(data).format("MM/DD/YYYY"); } },
                { data: "ProductMaster.PRODUCT_NAME" },
                { data: "SizeMaster.SIZE_NAME" },
            ],
            'order': [[1, 'asc']],
            'error': function (xhr, status, error) {
                alert('Error Occured -' + error);
            }
        })
    }

   function reload_data() {
        fill_table();
    }
</script>
</asp:Content>

背后的代码

[WebMethod]
public static string get_PendingOrder()
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
string strOrderList = serializer.Serialize(_listOrderMasterDTO);
return strOrderList;
}

private void fill_PendingOrder()
{
    try
    {
        var ActiveDate = DateTime.Now;
        var startOfMonth = new DateTime(ActiveDate.Year, ActiveDate.Month, 1);

        DateTime dtFromDate = Functions.ConvertToDateTime(m_strStartDate);
        DateTime dtToDate = Functions.ConvertToDateTime(m_strEndDate);
        _listOrderMasterDTO = new OrderMasterService().GetOrderMasterByDateAndSubCatIdList(dtFromDate, dtToDate, "", 0, Convert.ToString(txtCategory.Items[txtCategory.SelectedIndex].Text), Convert.ToString(Session["g_DBNAME"]));
    }
    catch (Exception ex)
    {
        Module.ShowError(ex, this, this.Page.GetType());
    }
}
protected void btnSearch_Click(object sender, EventArgs e)
{
    try
    {
        fill_PendingOrder();
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        sb.Append("$(function(){");
        sb.Append("reload_data();");
        sb.Append("});");
        ScriptManager.RegisterStartupScript(this, this.Page.GetType(), "", sb.ToString(), true);
    }
    catch (Exception ex)
    {
        Module.ShowError(ex, this, this.Page.GetType());
    }
}

标签： asp.netbootstrap-4datatables