jQuery Datatables - 如何检查具有给定 id 的行是否在当前页面上答案

【问题标题】：jQuery Datatables - how to check if row with given id is on the current pagejQuery Datatables - 如何检查具有给定 id 的行是否在当前页面上
【发布时间】：2020-11-20 18:35:49
【问题描述】：

我需要检查数据表当前显示的页面上是否存在具有已知 ID 的行

我正在使用以下代码

let target = table.row('#'+ ns.currentClientId, {page:'current'});

当我查看target.data() 时，它似乎总是包含由“id”列标识的行，无论它是否在当前显示的页面上。

我是否误解/误用了 API？

Here's a fiddle that isolates the problem

表中的数据是通过 API 调用填充的，id 是在创建 DataTable 时使用 rowId 属性设置的。

let table = $(selector).DataTable({
                    "ajax": {
                        "url": "/api/client/v1/client",
                        "type": "GET",
                        "dataSrc": "items",
                        "beforeSend": function (request) {
                            Object.keys(headers).forEach(function (key) {
                                request.setRequestHeader(key, headers[key]);
                            });
                        }
                    },
                    "order": [],
                    retrieve: true,
                    "select": true,
                    select: {
                        style: 'single'
                    },
                    stateSave: true,
                    info: false,
                    lengthChange: false,
                    ordering: false,
                    rowId: "id",
                    "columns": [
                        {"data": "name"},
                        {"data": "dateofbirth"},
                        {
                            "data": "id",
                            "visible": false
                        }
                    ]
                });

呈现时，HTML 看起来像这样 (sn-p)

【问题讨论】：

这对我来说看起来不错.. 你最初是如何设置 id 的？你能设置一个小提琴吗？
@F.H. - 我编辑了问题以显示表是如何实例化的。我需要一点时间来设置一个小提琴。如果当前 pge 上不存在具有指定 id 的行，您是否希望 target.data() 返回一个空数组？
如果您发布一些渲染的 html 行的小片段，它可能已经有所帮助
@F.H. - 添加了渲染的 HTML
@F.H. - 添加了一个小提琴来隔离问题

标签： jquery datatables

【解决方案1】：

我设法打破 JSFiddle 试图解决这个问题！多么奇怪！无论如何，我认为这应该满足您的需求：

$(document).ready(function () {
  var table = $('#example').DataTable({
    "drawCallback": function (settings) {
      $('#tiger').hide();
      var api = this.api();
      api.rows({ page: 'current' }).every(function (rowIdx, tableLoop, rowLoop) {
        var rowNode = this.node();
        if ($(rowNode).attr('id') === 'id_1') {
          $('#tiger').show();
        }
      });
    }
  });
});

我正在使用内置的 drawCallback 函数遍历行并获取用于生成 DataTable 的原始 HTML。

工作示例（提示：我已更改您的 CSS 以移除闪光灯）：https://jsfiddle.net/annoyingmouse/6ex5bkzq/

【讨论】：