如何在jQuery Datatables的操作按钮中调用Django视图？

Django模板的{% url %}标签仅在服务端模板解析阶段生效，Datatables的列渲染是前端JS运行逻辑，无法直接触达模板标签解析流程。核心解决思路是将Django reverse生成的URL规则前置暴露给前端环境，结合每行表格数据自带的主键值拼接最终跳转地址，具体实现可直接套用：

方案1：全局注入URL常量（推荐，无硬编码维护问题） #

这种方式完全复用Django自带的路由反向解析能力，后续修改路由规则不需要改动前端JS代码，从根源上避免前后端路径不匹配的问题：

• 在Datatables所在的Django模板页面（即存放<table id="datatable">的服务端渲染页面），在JS逻辑执行前提前注入URL模板：

  // 以下代码写在Django模板的script标签内，会被服务端正常解析{% url %}标签
  // 传入占位值0生成基础路径，再替换为通用占位符
  window.USER_EDIT_URL_TEMPLATE = "{% url 'feedback:useredit' 0 %}".replace('0', '__USER_ID__');
  // 页面加载完成后，window.USER_EDIT_URL_TEMPLATE的实际值类似 "/feedback/useredit/__USER_ID__/"
  

• 修改Datatables操作列的渲染逻辑，用当前行的id值拼接最终跳转地址，和你原模板里的a标签样式完全对齐：

  { 
    "data" : null, 
    render: function ( data, type, row ) {
        // 替换占位符为当前行的用户id
        const editUrl = window.USER_EDIT_URL_TEMPLATE.replace('__USER_ID__', row.id);
        return `<a href="${editUrl}" class="btn text-secondary px-0">
                  <i class="far fa-edit fa-lg"></i>
                </a>`;
    } 
  },
  

方案2：路由路径直接拼接（适合固定不变的简单路由场景） #

如果路由规则简单且几乎不会调整，可以直接在列渲染逻辑里拼路径，但这种方式维护性较差，不推荐长期使用：

{ 
  "data" : null, 
  render: function ( data, type, row ) {
      const editUrl = `/feedback/useredit/${row.id}/`;
      return `<a href="${editUrl}" class="btn text-secondary px-0">
                <i class="far fa-edit fa-lg"></i>
              </a>`;
  } 
}

按钮触发JS跳转的适配写法 #

如果你不想用原生a标签跳转，需要按钮携带额外操作逻辑（比如确认弹窗、权限校验）后再跳转，可以调整渲染逻辑为按钮元素，通过事件委托绑定点击行为，适配Datatables动态渲染的DOM元素：

• 列渲染时将跳转地址存在按钮的自定义属性上：

  render: function(data, type, row) {
    const editUrl = window.USER_EDIT_URL_TEMPLATE.replace('__USER_ID__', row.id);
    return `<button class="btn-view" data-edit-url="${editUrl}" type="button">Edit</button>`
  }
  

• 在Datatables初始化完成后，通过事件委托绑定点击逻辑，避免动态元素无法绑定事件的问题：

  $('#datatable').on('click', '.btn-view', function() {
    const targetUrl = $(this).data('edit-url');
    // 可在跳转前补充额外业务逻辑
    window.location.href = targetUrl;
  })
  

注意：你当前代码里硬编码的http://192.168.2.85:8000/fetchapi/数据接口地址，也可以用同样的全局注入方式替换为Django reverse生成的动态地址，避免上线后域名、端口变更导致的接口失效问题。

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