如何从 DataTables 中获取自定义存储的 HTML5 数据-* 属性值答案

【问题标题】：How to get custom stored HTML5 data -* attributes values from DataTables如何从 DataTables 中获取自定义存储的 HTML5 数据-* 属性值
【发布时间】：2017-09-10 00:46:00
【问题描述】：

注意：我接受 Stephen Muecke 作为这个问题的答案。

我正在使用 DataTables (datatables.net) 创建包含项目列表的表格。

表格在一个单元格中有自定义存储的 HTML5 数据。

如何获取存储的值

数据ID 数据描述

等等

它自己的表格只显示标题，就是这样。

其他数据是“隐藏的”，需要将其传递给同一页面上的其他一些字段。

更像是一个表格的“更多”细节功能。

目标是让用户点击“标题”，然后 jQuery 提取 HTML5 数据并使用它来填充用户点击的表格下方的字段。

用户还可以选择编辑数据并将其保存回数据库。

这是我迄今为止尝试使用的方法，但没有运气。

 <script> $(document).ready(function () { $('#SaveSearches').DataTable(); });

 </script>


$('#SaveSearches tbody').on('click', 'td', '.savedSearch', function ()
{
    alert(table.cell(this).data());

    table.$(this).data('Id');


    alert(table.$(this).data('Id'));
});

上面的代码只是试图从 HTML5 数据中获取值。

感谢您的帮助:)

【问题讨论】：

$('#SaveSearches tbody').on('click', '.savedSearch', function() { var id = $(this).data('id'); })

标签： c# jquery asp.net-mvc datatables

【解决方案1】：

您的选择器正在处理任何<td> 元素的.click() 事件（注意on() 的第三个参数（在您的情况下为'.savedSearch'）是

触发事件时要在 event.data 中传递给处理程序的数据。

参考documentation

另外，data属性的名字是区分大小写的，所以你的代码应该是

$('#SaveSearches tbody').on('click', '.savedSearch', function() {
    // get the value of the data-id attribute
    var id = $(this).data('id');
    ....
})

另请注意，您的属性应全部小写（另请参阅 are html5 data attributes case insensitive? 和相关的标准链接）

【讨论】：