Asp.Net C#下拉框切换DataTables语言后表格无法正常显示求助

我正在开发一个支持多语言的项目，希望DataTables的语言能随下拉框（ddlLang）的选中值切换。但写完JavaScript代码后，语言切换仅瞬间生效，之后DataTables就无法正常显示了。

ASP代码 #

<asp:DropDownList ID="ddlLang" runat="server" CssClass="selectpicker w-auto form-control-sm" AutoPostBack="true" OnSelectedIndexChanged="ddLang_SelectedIndexChanged">  
          <asp:ListItem Value="tr" data-icon="flag-icon flag-icon-tr mr-2" Text="<%$Resources:Resources, LangTR %>">  </asp:ListItem>
          <asp:ListItem Value="en" data-icon="flag-icon flag-icon-gb mr-2" Text="<%$Resources:Resources, LangEN %>"> English </asp:ListItem>  
       </asp:DropDownList> 

JavaScript代码 #

<script type="text/javascript">
    $(function () {
            $('#ddlLang').on('change value',  function () {
            var ddlvalue = $(this).val();
                if (ddlvalue == 'tr') {
                    $('#regIn').DataTable({
                        "paging": true,
                        "lengthChange": true,
                        "searching": false,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json"
                        }
                    });
                }
                else if (ddlvalue == 'en') {
                    $('#regIn').DataTable({
                        "paging": true,
                        "lengthChange": true,
                        "searching": false,
                        "ordering": true,
                        "info": true,
                        "autoWidth": false,
                        "responsive": true,
                        "language": {
                            "url": "//cdn.datatables.net/plug-ins/1.13.4/i18n/en-GB.json"
                        }
                    });
                }
            });
        });
</script>

问题根源 #

1. AutoPostBack触发页面刷新：下拉框设置了AutoPostBack="true"，切换选项时会触发服务器端回发，页面整体刷新，前端JS的DataTables初始化状态被重置，导致语言切换仅瞬间生效。
2. 重复初始化引发冲突：每次下拉框变化时直接调用DataTable()初始化，会导致多个表格实例冲突，引发表格异常。

修复步骤 #

方案1：关闭AutoPostBack（无需服务器端处理时）

如果语言切换不需要服务器端逻辑，直接移除AutoPostBack="true"，避免页面回发：

<asp:DropDownList ID="ddlLang" runat="server" CssClass="selectpicker w-auto form-control-sm" AutoPostBack="false">  
    <asp:ListItem Value="tr" data-icon="flag-icon flag-icon-tr mr-2" Text="<%$Resources:Resources, LangTR %>"></asp:ListItem>
    <asp:ListItem Value="en" data-icon="flag-icon flag-icon-gb mr-2" Text="<%$Resources:Resources, LangEN %>"> English </asp:ListItem>  
</asp:DropDownList> 

同时修改JS，先销毁旧实例再重新初始化：

<script type="text/javascript">
$(function () {
    // 初始化默认表格实例
    let table = $('#regIn').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "language": {
            "url": "<%= ddlLang.SelectedValue == 'tr' ? '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json' : '//cdn.datatables.net/plug-ins/1.13.4/i18n/en-GB.json' %>"
        }
    });

    $('#ddlLang').on('change', function () {
        const ddlvalue = $(this).val();
        const langUrl = ddlvalue === 'tr' 
            ? '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json' 
            : '//cdn.datatables.net/plug-ins/1.13.4/i18n/en-GB.json';

        // 销毁旧实例
        table.destroy();
        // 重新初始化表格
        table = $('#regIn').DataTable({
            "paging": true,
            "lengthChange": true,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
            "responsive": true,
            "language": {
                "url": langUrl
            }
        });
    });
});
</script>

方案2：保留AutoPostBack时的同步处理

如果必须保留服务器端回发，在页面加载时根据服务器端选中的语言重新初始化DataTables：

<script type="text/javascript">
$(function () {
    // 获取服务器端当前选中的语言值
    const currentLang = '<%= ddlLang.SelectedValue %>';
    const langUrl = currentLang === 'tr' 
        ? '//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Turkish.json' 
        : '//cdn.datatables.net/plug-ins/1.13.4/i18n/en-GB.json';

    $('#regIn').DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": false,
        "ordering": true,
        "info": true,
        "autoWidth": false,
        "responsive": true,
        "language": {
            "url": langUrl
        }
    });
});
</script>

内容的提问来源于stack exchange，提问作者Mustafa