正文 

当前位置： 首页 > 问答 >

将自定义数据属性插入 JQuery DataTables

     2023-05-07     303

关键词：

【中文标题】将自定义数据属性插入 JQuery DataTables【英文标题】：Inserting custom data attributes into JQuery DataTables 【发布时间】：2014-11-07 21:41:50 【问题描述】：

问题：

我正在将 JQuery DataTables v1.10 用于与工作相关的项目。 该项目需要使用作为表值传入的解析 JSON 数据来定义和创建数据表

创建数据表后，每列中的每个单元格都应该有一个单击事件，该事件会打开一个弹出窗口并以 JSON 格式传入从端点接收的名称列表。端点会根据单击的表格单元格而变化。

我认为，在数据表实例化时，我需要在每个表格单元格元素上定义的 HTML5 数据属性中存储某种唯一信息。我希望声明一个自定义数据属性（例如：data-endpoint = "endpoint id"），但我不确定如果表行是通过 DataTables 动态生成的，是否可以这样做。

因为我不知道/不明白我的选择是什么，所以我想描述一下我最想做的事情：

实例化一个数据表并将解析的 JSON 数据传递给它。 在表格实例化时，为每个表格单元格元素设置自定义数据属性。 访问表格单元格单击事件，将存储在正确数据属性中的信息传递给它，以获取正确的端点。 创建一个显示从端点接收到的结果的 popin。

我不明白的部分是如何在表格单元格元素上创建自定义数据属性。这是可能的还是我需要考虑另一种方法。非常感谢任何帮助！

【问题讨论】：

【参考方案1】：

您可以尝试在实例化时使用createdRow 回调。示例：

$table.dataTable(

    "destroy": true, // To replace existing data
    "data": jsonData,
    "columns": columns,

    // Per-row function to iterate cells
    "createdRow": function (row, data, rowIndex) 
        // Per-cell function to do whatever needed with cells
        $.each($('td', row), function (colIndex) 
            // For example, adding data-* attributes to the cell
            $(this).attr('data-foo', "bar");
        );
    
);

我认为这可以帮助你做你需要的。

【讨论】：

【参考方案2】：

我不得不做类似的事情。我不确定其余的，但我使用 columnDefs 选项来设置属性。

....
"destroy": true, // To replace existing data
"data": jsonData,
"columns": columns,
// Sets the attribute
"columnDefs": [
    "targets":'_all',
    "createdCell": function(td)
        td.setAttribute('foo','bar');
    
]
...

它仍然使用 createdCell 选项，但它模仿了我在他们的文档 (https://datatables.net/reference/option/columns.createdCell) 中找到的内容。

【讨论】：

将自定义类插入到由 tinyMCE 通过 jQuery 呈现的 WYSIWIG 输出中（在 Wordpress 中处理带有标题的图像）

】将自定义类插入到由tinyMCE通过jQuery呈现的WYSIWIG输出中（在Wordpress中处理带有标题的图像）【英文标题】：InsertcustomclassesintoWYSIWIGoutputrenderedbytinyMCEviajQuery(handlingimageswithcaptionsinWordpress)【发布时间】：2019-06-1421:45:48【问题描述... 查看详情

使用字符串变量将自定义日期和当前时间插入 Oracle 数据库

】使用字符串变量将自定义日期和当前时间插入Oracle数据库【英文标题】：InsertingcustomdateandcurrenttimeintoOracledatabaseusingstringvariables【发布时间】：2012-03-0822:41:12【问题描述】：所以我想做的是将自定义日期与当前时间一起设置为O... 查看详情

php将自定义字段中的架构数据插入header.php(代码片段)

查看详情

可以将自定义信息插入 GridView 寻呼机吗？

】可以将自定义信息插入GridView寻呼机吗？【英文标题】：InsertcustominformationintoGridViewPagerpossible?【发布时间】：2010-03-0416:08:12【问题描述】：是否可以将信息插入到gridview的分页器中，例如“显示55个项目中的10个（您在第3页）... 查看详情

将自定义数据属性添加到 Vuetify v-select 选项

】将自定义数据属性添加到Vuetifyv-select选项【英文标题】：AddcustomdataattributetoVuetifyv-selectoptions【发布时间】：2021-12-2109:37:48【问题描述】：我正在使用v-autocomplete组件来列出选择器中的项目。由于v-autocomplete只是一个高级v-select... 查看详情

GeoTools：将自定义多边形插入现有的 .shapefile

】GeoTools：将自定义多边形插入现有的.shapefile【英文标题】：GeoTools:insertcustomPolygonsintoexistiong.shpfile【发布时间】：2020-11-2509:42:19【问题描述】：我是Geotools的新手。现在我想在奥地利的Shapefile中插入一个自定义区域（多边形）... 查看详情

markdown将自定义帖子类型着陆页插入yoastbreadcrumbs(代码片段)

查看详情

markdown将自定义帖子类型着陆页插入yoastbreadcrumbs(代码片段)

查看详情

将自定义 C++ 对象传递给 Qml 错误（无属性）

】将自定义C++对象传递给Qml错误（无属性）【英文标题】：PasscustomC++objecttoQmlerror(noproperties)【发布时间】：2015-03-0507:49:34【问题描述】：我正在尝试编写代码，通过信号将一些数据从C++引擎传递到Qml脚本，但看起来我做错了一... 查看详情

如何将自定义视图插入 XML 的 LinearLayout

】如何将自定义视图插入XML的LinearLayout【英文标题】：HowtoinsertcustomviewintoXML\'sLinearLayout【发布时间】：2011-05-3111:14:16【问题描述】：所以我有一个从View扩展而来的CustomView。我有一个来自XML的线性布局。名为example的XML：<?xmlver... 查看详情

python将自定义浏览器选项卡插入pythonista(代码片段)

查看详情

python将自定义浏览器选项卡插入pythonista(代码片段)

查看详情

将自定义形状应用于剪辑属性 CSS

】将自定义形状应用于剪辑属性CSS【英文标题】：applycustomshapetoclippropertyCSS【发布时间】：2013-01-1109:11:21【问题描述】：我只是在发现和研究CSS的clip属性。我读过可以将矩形或正方形对象应用于剪辑。在调查并没有找到明确的... 查看详情

Keycloak 将自定义属性检索到 KeycloakPrincipal

】Keycloak将自定义属性检索到KeycloakPrincipal【英文标题】：KeycloakretrievecustomattributestoKeycloakPrincipal【发布时间】：2015-12-1704:31:51【问题描述】：在我的休息服务中，我可以使用身份验证后获取主体信息KeycloakPrincipalkcPrincipal=(Keycloak... 查看详情

如何将自定义列添加到数据表？

】如何将自定义列添加到数据表？【英文标题】：Howtoaddcustomcolumnstodatatable?【发布时间】：2021-01-0221:09:49【问题描述】：我正在使用gem\'jquery-datatables-rails\',\'3.4.0\'gem\'ajax-datatables-rails\'我的数据表看起来像我的这个表的CoffeeScript... 查看详情

将自定义样式属性添加到 MXML 自定义组件

】将自定义样式属性添加到MXML自定义组件【英文标题】：AddcustomstylepropertytoMXMLCustomComponent【发布时间】：2011-09-2007:17:48【问题描述】：我有一个自定义组件，它有几个Canvas并分配了一些背景颜色。现在我已经对颜色进行了硬编... 查看详情

如何将自定义事件添加到 jQuery 插件模式中

】如何将自定义事件添加到jQuery插件模式中【英文标题】：HowcanIaddcustomeventsintojQuerypluginpattern【发布时间】：2015-04-0417:18:55【问题描述】：如何将自定义事件添加到命名空间的jQuery插件模式？我想添加类似这样的自定义事件：$.m... 查看详情

如何将自定义结构插入另一个包含初始结构的二维指针的结构中？

】如何将自定义结构插入另一个包含初始结构的二维指针的结构中？【英文标题】：HowdoIinsertacustomstructintoanotherstructthatholdsa2dimensionalpointeroftheinitialstruct?【发布时间】：2020-03-1919:05:43【问题描述】：我有两个结构，一个用于创建... 查看详情