abp.libs.datatables.normalizeConfiguration修改DataTable搜索标签不生效

配置不生效有两个核心原因：

• abp.libs.datatables.normalizeConfiguration 会自动合并ABP框架预置的DataTable全局默认配置，你直接传入的自定义language字段会被框架默认加载的语言包覆盖，不会生效。
• 你当前设置的dom: '<"toolbar">'没有声明搜索控件（DataTable dom配置里的f对应搜索过滤模块）的渲染位置，就算语言配置正确，自定义文案的搜索框也不会渲染出来。

单表格配置覆写（推荐，不影响其他表格） #

不要把language配置直接传给normalizeConfiguration，等配置标准化完成后再手动覆写language属性，同时修正dom配置加入搜索模块位置，修正后完整代码如下：

// 先生成标准化配置
var tableConfig = abp.libs.datatables.normalizeConfiguration({ 
    serverSide: true,
    paging: true,
    order: [[2, 'asc']],
    searching: true,
    scrollX: true,
    // 修正dom配置，加入f（搜索框）、l（每页条数选择）、p（分页）模块，可按需求调整位置
    dom: '<"toolbar"f>rt<"d-flex justify-content-between mt-2"<"per-page-l"l><"pagination-wrap"p>>',
    // 原lengthMenu两个数组值不匹配，会导致选项和显示文案对应错误，这里修正
    lengthMenu: [
        [5, 10, 25],
        [5, 10, 25]
    ],
    ajax: abp.libs.datatables.createAjax(gcaspp.contabilidade.contratoAlerta.contratoAlerta.getListAlerta,
        () => {
            var visto = $("#ExibirVisto").is(":checked") ? "" : "true";
            return { visto: visto };
        }),
    columnDefs: [
        {
            title: '<input type="checkbox" class="alternarTodos" id="alternar" name="alternar" value="" >',
            data: "visto",
            orderable: false,
            render: function (data) {
                return data 
                    ? '<input type="checkbox" class="visto" name="visto" value="" checked> '
                    : '<input type="checkbox" class="visto" name="visto" value="" >';
            }
        },
        {
            title: '',
            render: function () {
                return '<input type="checkbox"  class="editado" name="teste" value="" style="display: none;" >';
            }
        },
        {
            title: 'Tipo',
            data: "tipo",
            render: function (data) {
                return '<p class="' + data + '">' + data + '</p>';
            }
        },
        {
            title: 'Numero',
            data: "numero"
        },
        {
            title: 'Exercicio',
            data: "exercicio"
        },
        {
            title: 'Descricao',
            data: "descricao"
        },
        {
            title: 'Fornecedor',
            data: "fornecedor"
        },
        {
            title: 'DataAssinatura',
            data: "dataAssinatura",
            render: (data) => moment(data).format("DD/MM/YYYY")
        },
        {
            title: 'DataTermino',
            data: "dataTermino",
            render: (data) => moment(data).format("DD/MM/YYYY")
        },
        {
            title: 'DiasRestantes',
            data: "diasRestantes"
        }
    ]
});
// 手动覆写语言配置，避免被默认配置覆盖
tableConfig.language.search = "Dias restantes ";
tableConfig.language.searchPlaceholder = "30";
// 初始化表格
var dataTable = $('#ContratoAlertaTabela').DataTable(tableConfig);

全局配置修改（适合全项目统一文案场景） #

如果项目内所有DataTable都需要统一使用这个搜索文案，可以直接修改ABP的DataTable全局默认配置，一次修改所有表格生效：

// 放在项目全局公共JS里，在所有DataTable初始化前执行
abp.libs.datatables.defaultConfigurations.language.search = "Dias restantes ";
abp.libs.datatables.defaultConfigurations.language.searchPlaceholder = "30";

补充说明：DataTable的dom配置每个字符对应一个控件模块，常用标识：l为每页长度选择、f为搜索框、t为表格本身、i为表格信息提示、p为分页控件、r为加载状态提示，配置时需要把要显示的模块对应标识加到dom字符串里，否则对应控件不会渲染。

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