在JQuery DataTable中传递Id In按钮单击

8dtrkrch 于 2023-05-22 发布在 jQuery

关注(0)|答案(2)|浏览(190)

如何将id传递到此处的事件？

{
              var tr = $(this).closest('tr');
              var id = tr.children('td:eq(0)').text()
              data: null,
              render: function ( data, type, row ) {
                return '<button id="btnAddNotes" type="button" class="btn btn-success" data-toggle="modal" data-target="#my_modal">Add Notes</button>';
              }
            },

我是这样阅读的

$(document).on("click", "#btnAddNotes", function (e) {
 //here is where I want to see the id i'm passing
}

编辑

这就是我构造列的方式，我想使用列At Location的行id->我该如何设置呢？

columns: [
{ 
    title: "At Location",
    data: "id" ,
    width: "10%",
    className: "text-center",
    render: function (data, type, full, meta){
    return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
    }
},
{
    title: "Notes",
    render: function(data, type, row, meta) {
    return '<button data-id="' +
    row. + // I want to use the At Location value
    '" class="btn" type="button">Add Notes</button>'; }
}
]

jquery

来源：https://stackoverflow.com/questions/76289728/passing-id-in-button-click-in-jquery-datatable

2条答案

按热度按时间

6ju8rftf1#

您可以将其添加为数据属性。

var tr = $(this).closest('tr');
var id = tr.children('td:eq(0)').text()
{
  data: null,
  render: function(data, type, row) {
      return '<button id="btnAddNotes" type="button" data-id="' + id + '" class="btn btn-success" data-toggle="modal" data-target="#my_modal">Add Notes</button>';
  }
}


$(document).on("click", "#btnAddNotes", function(e) {
  var id = $(this).attr("data-id");
})

赞(0）回复(0）举报 2023-05-22

92dk7w1h2#

简答：

使用DataTables API填充要使用的ID。

详细说明：

你已经在你的column render函数中使用了这个API，所以我们可以利用它（我稍微简化了你的HTML）：

render: function ( data, type, row, meta ) {
  return '<button data-id="' + 
      meta.row + // the internal ID of the DataTable row
      '" class="btn" type="button">Add Notes</button>';
}

在本例中，我使用meta.row获取唯一的DataTables行索引（第一行从0开始）。
我将其分配给data-id属性-但我也可以将其分配给id属性，因为该值对于每行（因此对于每个按钮）都是唯一的。
我可以使用以下命令访问此文件：

$(document).on("click", ".btn", function (e) {
  var id = $(this).attr("data-id");
  console.log( id );
});

如果要使用数据行中的实际值填充data-id属性，则可以使用row参数而不是meta参数。
下面是一个可运行的演示，使用外部 AJAX 数据测试源，由jsonpaceholder网站提供：

$(document).ready(function() {

  var table = $('#example').DataTable({
    ajax: {
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts",
      dataSrc: ""
    },
    "columns": [{
        // https://datatables.net/reference/option/columns.render
        render: function(data, type, row, meta) {
          return '<button data-id="' +
            row.title + // the value of the "TITLE" column from the data
            '" class="btn" type="button">Add Notes</button>';
        }
      },
      {
        "title": "User ID",
        "data": "userId"
      },
      {
        "title": "ID",
        "data": "id"
      },
      {
        "title": "Title",
        "data": "title"
      }
    ]

  });

  $(document).on("click", ".btn", function(e) {
    var id = $(this).attr("data-id");
    console.log(id);
  });

});

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

  <div style="margin: 20px;">

    <table id="example" class="display" style="width:100%"></table>

  </div>


</body>

</html>

上面的demo在render函数中使用了row.title，这只是一个例子。

**警告：**根据您对所选数据的操作，您可能会遇到问题。为了安全起见，您可能应该只使用值保证唯一的列。

如果你想使用id属性而不是data-*属性，你必须保证唯一性。

赞(0）回复(0）举报 2023-05-22

我来回答

在JQuery DataTable中传递Id In按钮单击

2条答案

相关问题

热门标签

最新问答