Question

我有一个视图，它会向页面加载大量事件。然后将其分页为每页6个事件。我还有一个允许您输入的输入字段，它应该将事件列表过滤到匹配条件。我有代码工作分页事件，我也有过滤功能，虽然目前没有用jquery编写。

我面临的问题是，当一个人在输入框中搜索时，它会正确地过滤事件，但不会刷新分页，即将所有找到的结果带到第1页。

我需要做的是基本上更新找到的事件的类分配（通过添加活动和删除活动），但我不知道如何正确地写这个。任何帮助都会很有意义。

以下是分页的当前javascript：

_init() {
var a = 0;
while (a < this._apiPageSize) {
  $('#event-' + a).addClass("active");
  a++;
}

this._pagination = new Pagination($('[data-calendar-listing-pagination]', this._$element));

this._pagination.on('change', ::this._onPaginationChange);
this._pagination.pages = this._pageCount;

const courseId = this._$element.data('calendar-ocasion-id');

// handle the selection of add to basket
$('[data-add-to-basket]', this._$element).click(function () {
  //alert($(this).data("event-id"));
  var eventId = $(this).data("event-id");
  var attendeeSelectQuantity = $('select[data-event-id="' + eventId + '"]').val();

  var value = { courseId: courseId, eventId: eventId, quantity: attendeeSelectQuantity };

  $.post('/Umbraco/Api/BasketWebApi/AddToBasket', value, function (data, textStatus, jqXHR) {
    //location.href = jqXHR.getResponseHeader("Location");
    location.href = "/basket"
  });
});
  }

  _onPaginationChange(pageIndex) {
var r = this._apiPageSize * this._apiPageNumber;
var z = r - this._apiPageSize;
while (z < r) {
  $('#event-' + z).removeClass("active");
  z++;
}
this._apiPageNumber = pageIndex + 1; // page 1 based index

this._request();
  }

  _request() {
var x = this._apiPageSize * this._apiPageNumber;
var y = x - this._apiPageSize;
while (y < x) {
  $('#event-' + y).addClass("active");
  y++;
}
  }

这是我在过滤中使用的当前脚本：

function searchCourse() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("courseFilter");
    filter = input.value.toUpperCase();
    ul = document.getElementById("gallery");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("h3")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";

        }
    }
}

我将避免将完整视图包含在内，因为它并非全部适用，但该类所适用的对象是：

 <li class="calendar-occasions__occasion" id="event-@b" data-id="@b">

最后，css只是一个简单的显示：none与display：inline-block。

使用Jquery进行实时过滤

0 个答案: