列表.js按单选按钮过滤

List.js filter by radio button

本文关键字：过滤 单选按钮 js 列表      更新时间：2023-09-26

>我正在尝试使用列表按单选按钮过滤.js

列表.js工作正常，但我无法弄清楚如何使用单选按钮使其工作。请协助。

这是小提琴：杰菲德尔

这是javascript部分：

        var dap_list = new List('dap_list', {
      valueNames: ['waste_name', 'client_name', 'created_by', 'timestamp', 'dap_status'],
      page: 8,
      plugins: [
        ListPagination({})
      ]
    });
    $('#search_radio').change(function() {
      var selection = this.value;
      // filter items in the list
      dap_list.filter(function(item) {
        if (item.values().search_radio == selection) {
          return true;
        } else {
          return false;
        }
      });
    });

你在小提琴上犯了三个小错误。

  1. 你忘了包含jQuery本身（点击"Javascript"按钮，上面有小齿轮）
  2. 您的单选按钮具有相同的 ID。这在HTML中是非法的。删除 ID，您不需要它们。
  3. 您希望在dap_status上过滤项目，而不是在search_radio上。

因此，有了这些知识，我们得到了：

$(':radio[name=search_radio]').change(function () {
    var selection = this.value;
    dap_list.filter(function (item) {
        return item.values().dap_status == selection;
    });
});

请注意， 

if (booleanCondition) {
    return true;
} else {
    return false;
}

是一种反模式。不要那样做，就像我上面所做的那样return booleanCondition;。

您必须更改 HTML 中的重复 ID。

<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio1" value="Awaiting Approval">Awaiting Approval
</label>
<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio2" value="Needs Further Review">Needs Further Review
</label>
<label class="radio-inline">
    <input type="radio" class="search" name="search_radio" id="search_radio3" value="Approved">Approved
</label>

对于 JS，您可以使用：

    var dap_list = new List('dap_list', {
        valueNames: ['waste_name', 'client_name', 'created_by', 'timestamp', 'dap_status'],
        page: 8,
        plugins: [
            ListPagination({})
        ]
    });
    $('.search').change(function() {
        var selection = this.value;
        dap_list.filter(function(item) {
            var status = item.values().dap_status;
            return status == selection;
        });
    });
相关文章：