Question

我尝试使用List.js

按单选按钮进行过滤

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

这是小提琴： Jfiddle

这是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;
        }
      });

    });

Answer 1

你的小提琴犯了三个小错误。

你忘了包含jQuery本身（点击“Javascript”按钮上面带有小齿轮）
您的单选按钮具有相同的ID。这在HTML中是非法的。删除ID，您不需要它们。
您希望在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;。

Answer 2

您必须更改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;
        });
    });

List.js按单选按钮过滤

2 个答案: