DataTables SearchBuilder点击报错：this.popover is not a function

问题场景 #

引入的脚本 #

<script src="Scripts/datatables.min.js"></script>
<script src="Scripts/bootstrap.min.js"></script>
<script src="Scripts/jquery.dataTables.min.js">
<script src="Scripts/dataTables.buttons.min.js"></script>
<script src="Scripts/dataTables.dateTime.min.js"></script>
<script src="Scripts/buttons.print.min.js"></script>
<script src="Scripts/searchBuilder.bootstrap.js"></script>

DataTables初始化代码 #

$('#tblData').DataTable(
    {
        retrieve: true,
        scrollY: '56vh',
        scrollX: false,
        "iDisplayLength": 30,
        scrollCollapse: true,
        paging: false,
        dom: 'Bfrtip',
        buttons:
        [
            {
                extend: 'copyHtml5',
                messageTop: 'As On: ' + customMessage
            },
            {
                extend: 'excelHtml5',
                messageTop: 'As On: ' + customMessage
            },
            {
                extend: 'csvHtml5',
                messageTop: 'As On: ' + customMessage
            },
            {
                extend: 'pdfHtml5',
                messageTop: 'As On: ' + customMessage
            },
            {
                extend: 'searchBuilder',
                config: {
                    depthLimit: 2
                }
            }
        ]
    }
);

报错信息 #

dataTables.searchBuilder.min.js:136 Uncaught TypeError: this.popover is not a function
at s.action (dataTables.searchBuilder.min.js:136:109)
at v (index.js:22:1)
at HTMLButtonElement. (index.js:22:1)
at HTMLButtonElement.dispatch (jquery-3.5.1.js:5429:27)
at elemData.handle (jquery-3.5.1.js:5233:28)

解决步骤 #

1. 修正脚本引入顺序与依赖完整性 #

报错核心是依赖缺失和脚本顺序错误，按以下顺序引入（必须严格遵守）：

• jQuery（所有脚本的基础，必须放在最前面）
• Popper.js（Bootstrap的popover组件强制依赖）
• Bootstrap核心脚本
• DataTables核心脚本（二选一，禁止重复引入）
• DataTables扩展插件（Buttons、SearchBuilder核心、SearchBuilder Bootstrap适配等）

正确引入示例：

<!-- jQuery -->
<script src="Scripts/jquery-3.5.1.min.js"></script>
<!-- Popper.js 支持Bootstrap弹窗组件 -->
<script src="Scripts/popper.min.js"></script>
<!-- Bootstrap -->
<script src="Scripts/bootstrap.min.js"></script>
<!-- DataTables核心（保留一个即可，推荐整合包） -->
<script src="Scripts/datatables.min.js"></script>
<!-- DataTables Buttons扩展 -->
<script src="Scripts/dataTables.buttons.min.js"></script>
<!-- 导出相关依赖 -->
<script src="Scripts/dataTables.dateTime.min.js"></script>
<script src="Scripts/buttons.print.min.js"></script>
<!-- SearchBuilder核心脚本（必须先引核心，再引Bootstrap适配） -->
<script src="Scripts/dataTables.searchBuilder.min.js"></script>
<!-- SearchBuilder Bootstrap样式适配 -->
<script src="Scripts/searchBuilder.bootstrap.js"></script>

2. 移除重复的DataTables核心脚本 #

你同时引入了datatables.min.js和jquery.dataTables.min.js，二者功能重复，保留其中一个即可（推荐datatables.min.js，它是包含核心功能的整合包）。

3. 验证Bootstrap Popover可用性 #

确保Bootstrap的popover组件正常工作，可添加测试代码验证：

$(function(){
    $('<button>测试弹窗</button>').appendTo('body').popover({
        title: '测试',
        content: '弹窗正常工作'
    });
});

如果测试弹窗能正常显示，说明popover依赖无问题；若仍报错，检查Popper.js与Bootstrap的版本兼容性（Bootstrap 4+必须搭配Popper.js）。

4. 确认版本兼容性 #

保证SearchBuilder扩展版本与DataTables核心版本完全一致，版本不匹配也会导致函数未定义类错误。

总结 #

按上述步骤修正后，重新加载页面，SearchBuilder按钮即可正常弹出筛选面板。

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