数据表过滤单元格内容而不是数据库值

Question

使用 DataTables 1.10.19

我有一个MySQL DB，结构如下；

+------+-----------------+----------+----------+
| name | email           | status   | complete |    
+------+-----------------+----------+----------+
| Joe  | me@example.com  | 1        |1         |
+------+-----------------+----------+----------+
| Jim  | you@example.com | 1        |0         |
+------+-----------------+----------+----------+
| Sara | him@example.com | 0        |0         |
+------+-----------------+----------+----------+

我正在使用this script 从数据库中检索数据。

我的数据表过滤器在搜索 0 和 1 时按预期工作，但这会过滤 both status 和 complete 列。我想搜索 单词 active / inactive 和 complete / incomplete 而不是 1 和 0。

我正在使用 datatables columns.render 选项根据行结果在这些列中呈现自定义输出。

我的数据表代码是；

$('#example').dataTable({
    "ajaxSource": "results.php", // output below
    "columns": [{
        "data": "name"
    }, {
        "data": "email"
    }, {
        "data": "status",
        "render": function(data, type, row, meta) {
            // row[2] returns an int of 0 or 1 from the db. inactive/active
            if (row[2] == 0) {
                return `inactive`;
            }
            if (row[2] == 1) {
                return `active`;
            }
        }
    }, {
        "data": "complete",
        "render": function(data, type, row, meta) {
            // row[2] returns an int of 0 or 1 from the db. incomplete/complete
            if (row[3] == 0) {
                return `incomplete`;
            }
            if (row[3] == 1) {
                return `complete`;
            }
        }
    }, ]
});

results.php 文件返回以下内容；

"data": [
    [
      "Joe",
      "me@example.com  ",
      "1",
      "1",
    ],
    [
      "Jim",
      "you@example.com  ",
      "1",
      "0",
    ],
    [
      "Sara",
      "him@example.com  ",
      "0",
      "0",
    ],
]

我的前端 HTML 表格是这样的；

+------+-----------------+----------+------------+
| name | email           | status   |complete    |
+------+-----------------+----------+------------+
| Joe  | me@example.com  | active   |complete    |
+------+-----------------+----------+------------+
| Jim  | you@example.com | active   |incomplete  | 
+------+-----------------+----------+------------+
| Sara | him@example.com | inactive |incomplete  |
+------+-----------------+----------+------------+

目前过滤器似乎过滤了 db int 值而不是单元格文本。

如何搜索单词而不是 0 和 1。

Answer 1

以下似乎工作得很好。键入“Inactive”只会显示 Sara。你有什么不一样的地方？

编辑：我已经更新了 sn-p 以匹配您的最新代码。似乎您正在为您的数据传递一个数组数组，所以我很惊讶您的表甚至正在初始化，因为data 选项在这种情况下无效（data 如何选择"name" 属性如果它在你的结果集中不存在？它应该是数组索引）。将数据选项更新为数组索引后，该表会正确搜索您呈现的表。搜索“未完成”返回 Jim/Sara，搜索“未激活”返回 Sara。

$(document).ready(function() {
  var data = getDummyData();
  $('#example').dataTable({
    "data": data,
    "columns": [{
        "data": 0
      },
      {
        "data": 1
      },
      {
        "data": 2,
        "render": function(data, type, row, meta) {
          // row[2] returns an int of 0 or 1 from the db. inactive/active
          if (data == 0) {
            return `inactive`;
          }
          if (data == 1) {
            return `active`;
          }
        }
      },
      {
        "data": 3,
        "render": function(data, type, row, meta) {
          // row[2] returns an int of 0 or 1 from the db. incomplete/complete
          if (data == 0) {
            return `incomplete`;
          }
          if (data == 1) {
            return `complete`;
          }
        }
      },
    ]
  });
});

function getDummyData() {
  return [
    [
      "Joe",
      "me@example.com  ",
      "1",
      "1",
    ],
    [
      "Jim",
      "you@example.com  ",
      "1",
      "0",
    ],
    [
      "Sara",
      "him@example.com  ",
      "0",
      "0",
    ],
  ]
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

<table id="example">
  <thead>
    <tr>
      <th>name</th>
      <th>email</th>
      <th>status</th>
      <th>complete</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>