MVC项目jQuery DataTables按钮重复、分页失效解决方案

三个异常属于同源问题，核心诱因有三点：

• 脚本重复加载：_Layout.cshtml已全局引入jQuery、DataTables核心资源，视图内再次重复引入同名脚本，导致jQuery原型链上的DataTable实例被覆盖，前期绑定的DOM事件全部失效
• 控件重复渲染：DataTables初始化时默认开启顶部搜索、操作栏、分页控件的自动生成，和页面手写的顶部按钮、搜索框DOM完全重叠，出现双份控件
• 事件绑定时机错误：手写的按钮、搜索框事件在初始DOM加载时绑定，DataTables初始化重绘DOM后原有绑定节点被替换，导致交互无响应

1. 清理重复引入的脚本引用 #

先检查_Layout.cshtml的脚本渲染节点：

• 保留全局统一引入的jQuery、Bootstrap、DataTables核心CSS/JS，移除视图内重复的同名引用，所有页面级脚本统一放到@section Scripts {}块中，确保在全局脚本加载完成后执行
• 检查_Layout中是否存在多次@RenderSection("Scripts", required: false)的重复渲染节点，只保留body标签结束前的一个即可
  正确的_Layout脚本结构参考：

<!-- _Layout.cshtml 末尾脚本部分 -->
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/datatables/js/jquery.dataTables.min.js"></script>
<script src="~/lib/datatables/js/dataTables.bootstrap5.min.js"></script>
@RenderSection("Scripts", required: false)
</body>

2. 修正DataTables初始化配置，移除重复渲染控件 #

初始化DataTable时，通过dom配置关闭自带的顶部搜索、操作按钮渲染，只保留需要的底部控件，避免和手写DOM重复：

// 视图内DataTable初始化代码
$(document).ready(function () {
    $('#yourTableId').DataTable({
        // 只保留底部分页、信息展示，关闭顶部搜索、长度选择、按钮的自动渲染
        dom: '<"row"<"col-sm-12"tr>><"row"<"col-sm-5"i><"col-sm-7"p>>',
        paging: true,
        // 其余原有业务配置保留即可
    });
});

如果需要使用DataTables自带的导出、批量操作按钮功能，不要手动写重复的按钮DOM，直接通过buttons配置项生成即可，从根源避免重复。

3. 修复控件事件绑定失效问题 #

所有针对DataTable内元素、动态渲染控件的事件，不要直接用$('.btn').click()这种直接绑定方式，改用委托绑定，绑定到不会被DataTable重绘的父节点上（比如document或者外层静态容器）：

// 错误写法：DataTable重绘后按钮节点被替换，事件直接失效
$('.top-action-btn').on('click', function () {
    // 业务操作逻辑
})

// 正确写法：事件委托，动态生成的节点也能正常触发
$(document).on('click', '.top-action-btn', function () {
    // 业务操作逻辑
})

// 自定义搜索框事件同理，绑定到静态父节点
$(document).on('input', '#customSearchInput', function () {
    // 调用DataTable原生搜索API实现查询
    $('#yourTableId').DataTable().search($(this).val()).draw();
})

4. 修复分页按钮失效问题 #

分页按钮点击无响应基本是重复引入jQuery导致DataTable分页插件实例被覆盖，完成第一步的重复脚本清理后，分页功能会自动恢复；如果仍有异常，检查是否在DataTable初始化后手动替换过分页按钮的DOM结构，不要修改DataTable生成分页节点的核心结构，仅可调整class样式。

1. 清空浏览器缓存后刷新页面，检查顶部按钮、搜索框是否只显示一次
2. 测试顶部操作按钮点击、搜索框输入是否正常响应
3. 测试底部分页按钮点击、翻页功能是否正常触发
4. 翻页、搜索后测试行内操作按钮是否能正常触发事件

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