代码之家 › 专栏 › 技术社区 › TheOrdinaryGeek

数据表筛选单元格内容而不是数据库值

datatables mysql jquery javascript

TheOrdinaryGeek · 技术社区 · 6 年前

+------+-----------------+----------+----------+
| 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 ,但这个过滤器 二者都 status complete 柱。我想找话 active inactive 和 完成 incomplete 而不是 1 .

我在用数据表 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  |
+------+-----------------+----------+------------+

目前过滤器似乎过滤数据库 int 值而不是单元格文本。

0 和 .

1 回复 | 直到 6 年前

Rich 6 年前

下面的工作似乎很好。结果,键入“Inactive”只显示Sara。你在做什么不同的事?

编辑:我已经更新了代码片段以匹配您的最新代码。似乎您正在为您的数据传递一个数组,所以我很惊讶您的表甚至正在初始化,因为 data 数据 "name" 属性是否存在于结果集中?它应该是数组索引)。将数据选项更新为数组索引后,表将正确搜索呈现的表。搜索“Incomplete”返回Jim/Sara,搜索“Inactive”返回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>