Flask分页项目Expand按钮onclick传this失效、传递URL参数问题求助

根因分析 #

你遇到的按钮点击传参异常问题，是由两个基础错误引发的DataTables初始化失败，进而导致页面事件逻辑混乱：

1. 缺少jQuery依赖引入
   DataTables是jQuery生态的插件，必须先引入jQuery再加载DataTables资源，你的代码中只引入了DataTables的CSS和JS，没有引入jQuery本身，会直接导致DataTables初始化报错。
2. 表格ID大小写不匹配
   HTML中定义的table ID为my-table（t小写），但jQuery初始化代码写的是$('#my-Table')（T大写），JS选择器大小写敏感，因此DataTables无法找到目标表格完成初始化，插件的异常事件逻辑覆盖了你给按钮绑定的行内点击事件，才会出现传入参数不是按钮元素的问题。

修复步骤 #

步骤1：补全jQuery引入 #

在引入DataTables JS之前，添加jQuery资源引入，修改后的头部资源引入部分如下：

<link rel='stylesheet' href='//cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css'>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="//cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>

步骤2：修正DataTables初始化的选择器 #

把原来的初始化代码中的ID改成和HTML一致的小写：

$(document).ready( function () {
    $('#my-table').DataTable();
} );

可选优化：避免行内点击事件冲突 #

行内onclick绑定容易和表格插件的事件机制冲突，建议去掉按钮的onclick属性，改用事件委托统一绑定：

1. 修改按钮HTML：

<td><button id='{{count}}' class="expand-btn">Expand</button>{{val['name']}}</td>

2. 新增点击事件绑定逻辑：

$(document).on('click', '.expand-btn', function() {
  // 此处的this就是当前点击的按钮元素
  console.log(this)
  // 后续你的展开逻辑直接写在这里即可
})

额外分页功能建议 #

如果你想改用JSON接口实现无刷新分页，不需要每次跳转页面，可以把Flask的/result接口调整为同时支持返回JSON和HTML：请求头带Accept: application/json时返回分页JSON数据，否则返回页面模板，前端通过DataTables的ajax数据源配置即可实现全自动分页，不需要自己写上下页按钮逻辑。

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