DataTable筛选选项存在多余>字符问题求助（JS/JQuery）

问题场景 #

使用DataTable实现列筛选功能时，筛选下拉选项中出现了多余的>字符，需要去除该问题。

原实现代码 #

var a = $("#datatable-buttons").DataTable({
    lengthChange: !1,
    buttons: [{
        className: 'btn btn-outline-danger btn-sm waves-effect rounded-pill waves-light',
        text: '<i class="mdi mdi-account-plus-outline"></i> Add User',
        init: function(api, node, config) {
            $(node).removeClass('btn-secondary');
        },
        action: function(e, dt, node, config) {
            //This will send the page to the location specified
            window.location.href = 'add_user.php';
        }
    }],
    ordering: false,
    pageLength: 20,
    lengthChange: false,
    scrollY: "550px",
    initComplete: function () {
        this.api().columns().every(function () {
            var column = this;
            var select = $('<select class="form-select form-select-sm"><option value=""></option></select>')
                .appendTo($(column.header()).empty())
                .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });

            column.data().unique().sort().each(function (d, j) {
                select.append('<option value="' + d + '">' + d + '</option>');
            });
        });
    }
});

a.buttons().container().appendTo("#datatable-buttons_wrapper .col-md-6:eq(0)");
$(".dataTables_length label").addClass("form-label");

问题原因 #

下拉选项中出现多余>，是因为column.data()获取的是单元格的原始内容（包含HTML标签或转义字符如>），这些内容直接被插入到下拉选项中，导致显示异常。

解决方法 #

在生成下拉选项前，先提取单元格的纯文本内容，去除HTML标签和转义字符。修改initComplete中的循环部分：

column.data().unique().sort().each(function (d, j) {
    // 将HTML内容转为纯文本，自动处理转义字符并去除标签
    var pureText = $('<div>').html(d).text().trim();
    select.append('<option value="' + pureText + '">' + pureText + '</option>');
});

补充说明 #

• 该方法通过jQuery将HTML内容转为DOM元素后提取文本，能处理各种HTML标签和HTML实体转义字符（如>、<等）。
• 如果需要保持筛选逻辑与原始数据匹配，可调整为：保留原始值作为option的value，仅用纯文本作为显示内容，代码示例：

  select.append('<option value="' + d + '">' + pureText + '</option>');
  

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