javascript - 如何使用 knockout 同时应用过滤和分页？

Question

我一直在尝试使用 knockoutjs 尝试创建可以过滤和分页的 html 表，到目前为止我已经能够单独创建过滤和分页，但似乎我找不到结合的方法两个放在一起，我举了两个例子来说明我所取得的任何帮助，在此先感谢您:)

Knockout 过滤示例:

Filtering Example

HTML:

<table id="tview" class="table table-bordered table-striped table-hover">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
        </tr>
        <tr>
            <td>
                <input type="number" data-bind="event: { keyup: FilterItems }" id="ID" class="form-control filter" placeholder="Filter By ID" />
            </td>
            <td>
                <input type="text" data-bind="event: { keyup: FilterItems }" id="Name" class="form-control filter" placeholder="Filter By Name" />
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: $root.FilteredItem">
        <td data-bind="text: ID"></td>
        <td data-bind="text: Name"></td>
    </tbody>
</table>

Javascript:

var model = function () {
    var self = this;
    self.Item = ko.observableArray([]);
    self.FilteredItem = ko.observableArray([]);
    self.Filter = new Filter();
    self.FilterItems = function (object, event) {
        var currentFilter = event.currentTarget.id;
        var currentValue = $("#" + currentFilter).val();
        if (currentValue != "") {
            if (self.Filter.ActiveList().indexOf(currentFilter) < 0) {
                self.Filter[currentFilter](true);
                self.Filter.ActiveList.push(currentFilter);
            }
            self.ApplyFilters();
        } else {
            self.Filter[currentFilter](false);
            self.Filter.ActiveList.remove(currentFilter);
            if (self.Filter.ActiveList().length == 0) {
                self.FilteredItem(self.Item());
            } else {
                self.ApplyFilters();
            }
        }
    };

    self.ApplyFilters = function () {
        var tempArray = self.Item();
        self.Filter.ActiveList().forEach(function (item) {
            var value = $("#" + item).val();
            var FilterResult = [];
            if (isNaN(value)) {
                value = value.toLowerCase();
                FilterResult = ko.utils.arrayFilter(tempArray, function (obj) {
                    return obj[item]().toLowerCase().indexOf(value) > -1;
                });
            } else {
                FilterResult = ko.utils.arrayFilter(tempArray, function (obj) {
                    if (isNaN(obj[item]())) {
                        return obj[item]().toLowerCase().indexOf(value) > -1;
                    } else {
                        return obj[item]() == value;
                    }
                });
            }
            tempArray = FilterResult;
            self.FilteredItem(FilterResult);
        });
    };
};

var Item = function () {
    var self = this;
    self.ID = ko.observable();
    self.Name = ko.observable();
};

var Filter = function () {
    var self = this;
    self.ActiveList = ko.observableArray([]);
    self.ID = ko.observable(false);
    self.Name = ko.observable(false);
};

var modelInstance = new model();

for (i = 0; i < 10; i++) {
    var MyItem = new Item();
    MyItem.ID(i);
    MyItem.Name("Name" + i);
    modelInstance.Item.push(MyItem);
    MyItem = new Item();
    MyItem.ID(i);
    MyItem.Name("Name" + i+1);
    modelInstance.Item.push(MyItem);
}

modelInstance.FilteredItem(modelInstance.Item());

ko.applyBindings(modelInstance);

---

---

Knockout 分页示例:

Paging Example

HTML:

<section data-bind="foreach: Pages">
    <article  data-bind="visible: $root.CurrentPage() == $data">
        <table id="tview" class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Name</td>
                </tr>
            </thead>
            <tbody data-bind="foreach: $root.Item()[$data]">
                <tr>
                    <td data-bind="text: ID"></td>
                    <td data-bind="text: Name"></td>
                </tr>
            </tbody>
        </table>
    </article>
</section>
<ul class="pagination" data-bind="foreach: Pages">
    <li data-bind="attr: { id: 'Page' + $index(), 'class': $root.checkCurrentPage($data) }, click: $root.ChangePage"><a href="#" data-bind="text: $data"></a>
    </li>
</ul>

Javascript:

var Model = function () {
    var self = this;

    self.Item = ko.observableArray([]);

    self.CurrentPage = ko.observable(0);

    self.Pages = ko.observableArray([]);

    self.ChangePage = function (data, event) {
        if (!$(event.currentTarget).hasClass("active")) {
            $(".pagination li").removeClass("active");
            self.CurrentPage(data);
        }
    };

    self.checkCurrentPage = function (data) {
        if (self.CurrentPage() == data) {
            return "active";
        }
    };
};

var Item = function () {
    var self = this;
    self.ID = ko.observable();
    self.Name = ko.observable();
};

var modelInstance = new Model();

function Chunk(Arr, ChunkSize) {
    var Set = [];

    var PageCount = 0;

    for (var Page = 0; Page < Arr.length; Page += ChunkSize) {
        var TempArr = Arr.slice(Page, Page + ChunkSize);

        var ObservableItemArr = [];

        TempArr.forEach(function (obj) {
            ObservableItemArr.push(obj);
        });

        Set.push(ko.observableArray(ObservableItemArr));

        modelInstance.Pages.push(PageCount);

        PageCount++;
    }

    return Set;
}

var arr = [];

for (i = 0; i < 20; i++) {
    var MyItem = new Item();
    MyItem.ID(i);
    MyItem.Name("Name" + i);
    arr.push(MyItem);
    MyItem = new Item();
    MyItem.ID(i);
    MyItem.Name("Name" + i+1);
    arr.push(MyItem);
}

modelInstance.Item(Chunk(arr, 10));

ko.applyBindings(modelInstance);

Answer 1

这是我用 LinqJS 做的一个 Quick fiddle

http://jsfiddle.net/rL6p4onw/2

结构是这样的

ViewModel = function() {
    var items = [];
    for(var i = 0; i < 500; i++) {
        items.push({ name: "Foo " + i });
    }

    this.items = Enumerable.From(items);   

    this.page = ko.observable(0);
    this.pageSize = ko.observable(10);
    this.filter = ko.observable();
    this.filteredCount = ko.observable();

    this.currentPage = ko.computed(this.getCurrentPage, this);
    this.pages = ko.computed(this.getPages, this);
}

分页/过滤的相关代码

getCurrentPage: function() {   
    var filter = this.filter();

    var filtered = this.items
        .Where(function(i) { 
            return filter == null || i.name.indexOf(filter) != -1; 
        });

    this.filteredCount(filtered.Count());
    return filtered
        .Skip(this.page() * this.pageSize())
        .Take(this.pageSize())
    .ToArray();
}

由于 javascript 是动态的，因此过滤器函数可以很容易地修改为动态的