Knockout.js } var pageSize=self.currentPageSize（）； var startIndex=页面索引*页面大小； var endIndex=startIndex+pageSize； 返回self.records（）.slice（startIndex，endIndex）； }).extend（{throttle:5}）； self.moveFirst=函数（）{ self.changePageIndex（0）； }; self.movePrevious=函数（）{ self.changePageIndex（self.currentPageIndex（）-1）； }; self.moveNext=函数（）{ self.changePageIndex（self.currentPageIndex（）+1）； }; self.moveLast=函数（）{ self.changePageIndex（self.maxPageIndex（））； }; self.changePageIndex=函数（newIndex）{ 如果（newIndexself.maxPageIndex（））{ 回来 } self.currentPageIndex（newIndex）； }; self.onPageSizeChange=函数（）{ self.currentPageIndex（0）； }; self.renderPagers=函数（）{ var pager=“第页，共[记录]”； $（“div.Pager”）.html（寻呼机）； }; self.renderNoRecords=函数（）{ var message=“未找到任何记录。”； $（“div.NoRecords”）.html（信息）； }; self.renderPagers（）； self.renderNoRecords（）； } 功能分类模型（分类、记录）{ var self=这个； self.records=getobservearray（记录）； self.sortOptions=ko.observearray（sortOptions）； self.sortDirections=ko.ocbservablearray([ { 名称：“Asc”， 值：“Asc”， 排序：false }, { 名称：“描述”， 值：“Desc”， 排序：正确 }]); self.currentSortOption=ko.observable（self.sortOptions（）[0]）； self.currentSortDirection=ko.observable（self.sortdirection（）[0]）； self.orderedRecords=ko.computed（函数（）{ var records=self.records（）； var sortOption=self.currentSortOption（）； var sortDirection=self.currentSortDirection（）； if（排序选项==null | |排序方向==null）{ 退货记录； } var sortedRecords=records.slice（0，records.length）； SortArray（sortedRecords，sortDirection.Sort，sortOption.Sort）； 返回分拣记录； }).extend（{throttle:5}）； } 函数过滤器模型（过滤器、记录）{ var self=这个； self.records=getobservearray（记录）； self.filters=ko.observearray（过滤器）； self.activeFilters=ko.computed（函数（）{ var filters=self.filters（）； var-activeFilters=[]； 对于（变量索引=0；索引

所有

window.makeApp.makeViewModel = (function (ko, datacontext) {

   MakePageModel = function (datacontext) {
            if (!datacontext) {
                datacontext = {};
        }

        **//Load data to filter, sort and page on**
        var self = this;
        self.makes = ExtractModels(self, makeLists.getMakeLists, makeList);

        var filters = [
            {
                Type: "text",
                Name: "Name",
                Value: ko.observable(""),
                RecordValue: function (record) { return record.name; }
            },
            {
                Type: "select",
                Name: "Status",
                Options: [
                    GetOption("All", "All", null),
                    GetOption("None", "None", "None"),
                    GetOption("New", "New", "New"),
                    GetOption("Recently Modified", "Recently Modified", "Recently Modified")
                ],
                CurrentOption: ko.observable(),
                RecordValue: function (record) { return record.status; }
            }
        ];
        var sortOptions = [
            {
                Name: "ID",
                Value: "ID",
                Sort: function (left, right) { return left.id < right.id; }
            },
            {
                Name: "Name",
                Value: "Name",
                Sort: function (left, right) { return CompareCaseInsensitive(left.name, right.name); }
            },
            {
                Name: "Status",
                Value: "Status",
                Sort: function (left, right) { return CompareCaseInsensitive(left.status, right.status); }
            }
        ];
        self.filter = new FilterModel(filters, self.makes);
        self.sorter = new SorterModel(sortOptions, self.filter.filteredRecords);
        self.pager = new PagerModel(self.sorter.orderedRecords);
    },

    more code..............

})(ko, makeApp.datacontext);

 // Initiate the Knockout bindings
ko.applyBindings(window.makeApp.makeViewModel);

<div data-bind="foreach: filter.filters">
    <div>
      <span data-bind="text: Name"></span>:<br />
    </div>
    <div data-bind="if: Type == 'select'">
    <select data-bind="options: Options, optionsText: 'Name', value: CurrentOption">       </select>
</div>
                <div data-bind="if: Type == 'text'">
                    <input type="text" data-bind="value: Value, valueUpdate: 'afterkeydown'" />
                </div>
            </div>

window.makeApp.makeViewModel = (function (ko, datacontext) {

//Data
var self = this;
self.makeLists = ko.observableArray();
self.error = ko.observable();

//Operations
//Load initial state from the server, convert it to make instances, then populate self

function MakePageModel(datacontext) {
        if (!datacontext) {
            datacontext = {};
    }

    //var self = this;
    //self.makes = ExtractModels(self, makeLists, makeList);

    var filters = [
        {
            Type: "text",
            Name: "Name",
            Value: ko.observable(""),
            RecordValue: function (record) { return record.name; }
        },
        {
            Type: "select",
            Name: "Status",
            Options: [
                GetOption("All", "All", null),
                GetOption("None", "None", "None"),
                GetOption("New", "New", "New"),
                GetOption("Recently Modified", "Recently Modified", "Recently Modified")
            ],
            CurrentOption: ko.observable(),
            RecordValue: function (record) { return record.status; }
        }
    ];
    var sortOptions = [
        {
            Name: "ID",
            Value: "ID",
            Sort: function (left, right) { return left.id < right.id; }
        },
        {
            Name: "Name",
            Value: "Name",
            Sort: function (left, right) { return CompareCaseInsensitive(left.name, right.name); }
        },
        {
            Name: "Status",
            Value: "Status",
            Sort: function (left, right) { return CompareCaseInsensitive(left.status, right.status); }
        }
    ];
    self.filter = new FilterModel(filters, self.makeLists);
    self.sorter = new SorterModel(sortOptions, self.filter.filteredRecords);
    self.pager = new PagerModel(self.sorter.orderedRecords);
}

function PagerModel(records) {
     var self = this;
     self.pageSizeOptions = ko.observableArray([1, 5, 25, 50, 100, 250, 500]);

     self.records = GetObservableArray(records);
     self.currentPageIndex = ko.observable(self.records().length > 0 ? 0 : -1);
     self.currentPageSize = ko.observable(25);
     self.recordCount = ko.computed(function () {
         return self.records().length;
     });
     self.maxPageIndex = ko.computed(function () {
         return Math.ceil(self.records().length / self.currentPageSize()) - 1;
     });
     self.currentPageRecords = ko.computed(function () {
         var newPageIndex = -1;
         var pageIndex = self.currentPageIndex();
         var maxPageIndex = self.maxPageIndex();
         if (pageIndex > maxPageIndex) {
             newPageIndex = maxPageIndex;
         }
         else if (pageIndex == -1) {
             if (maxPageIndex > -1) {
                 newPageIndex = 0;
             }
             else {
                 newPageIndex = -2;
             }
         }
         else {
             newPageIndex = pageIndex;
         }

         if (newPageIndex != pageIndex) {
             if (newPageIndex >= -1) {
                 self.currentPageIndex(newPageIndex);
             }

             return [];
         }

         var pageSize = self.currentPageSize();
         var startIndex = pageIndex * pageSize;
         var endIndex = startIndex + pageSize;
         return self.records().slice(startIndex, endIndex);
     }).extend({ throttle: 5 });
     self.moveFirst = function () {
         self.changePageIndex(0);
     };
     self.movePrevious = function () {
         self.changePageIndex(self.currentPageIndex() - 1);
     };
     self.moveNext = function () {
         self.changePageIndex(self.currentPageIndex() + 1);
     };
     self.moveLast = function () {
         self.changePageIndex(self.maxPageIndex());
     };
     self.changePageIndex = function (newIndex) {
         if (newIndex < 0
             || newIndex == self.currentPageIndex()
             || newIndex > self.maxPageIndex()) {
             return;
         }

         self.currentPageIndex(newIndex);
     };
     self.onPageSizeChange = function () {
         self.currentPageIndex(0);
     };
     self.renderPagers = function () {
         var pager = "<div><a href=\"#\" data-bind=\"click: pager.moveFirst, enable: pager.currentPageIndex() > 0\">&lt;&lt;</a><a href=\"#\" data-bind=\"click: pager.movePrevious, enable: pager.currentPageIndex() > 0\">&lt;</a>Page <span data-bind=\"text: pager.currentPageIndex() + 1\"></span> of <span data-bind=\"text: pager.maxPageIndex() + 1\"></span> [<span data-bind=\"text: pager.recordCount\"></span> Record(s)]<select data-bind=\"options: pager.pageSizeOptions, value: pager.currentPageSize, event: { change: pager.onPageSizeChange }\"></select><a href=\"#\" data-bind=\"click: pager.moveNext, enable: pager.currentPageIndex() < pager.maxPageIndex()\">&gt;</a><a href=\"#\" data-bind=\"click: pager.moveLast, enable: pager.currentPageIndex() < pager.maxPageIndex()\">&gt;&gt;</a></div>";
         $("div.Pager").html(pager);
     };
     self.renderNoRecords = function () {
         var message = "<span data-bind=\"visible: pager.recordCount() == 0\">No records found.</span>";
         $("div.NoRecords").html(message);
     };

     self.renderPagers();
     self.renderNoRecords();
 }

function SorterModel(sortOptions, records) {
     var self = this;
     self.records = GetObservableArray(records);
     self.sortOptions = ko.observableArray(sortOptions);
     self.sortDirections = ko.observableArray([
         {
             Name: "Asc",
             Value: "Asc",
             Sort: false
         },
         {
             Name: "Desc",
             Value: "Desc",
             Sort: true
         }]);
     self.currentSortOption = ko.observable(self.sortOptions()[0]);
     self.currentSortDirection = ko.observable(self.sortDirections()[0]);
     self.orderedRecords = ko.computed(function () {
         var records = self.records();
         var sortOption = self.currentSortOption();
         var sortDirection = self.currentSortDirection();
         if (sortOption == null || sortDirection == null) {
             return records;
         }

         var sortedRecords = records.slice(0, records.length);
         SortArray(sortedRecords, sortDirection.Sort, sortOption.Sort);
         return sortedRecords;
     }).extend({ throttle: 5 });
 }

function FilterModel(filters, records) {
     var self = this;
     self.records = GetObservableArray(records);
     self.filters = ko.observableArray(filters);
     self.activeFilters = ko.computed(function () {
         var filters = self.filters();
         var activeFilters = [];
         for (var index = 0; index < filters.length; index++) {
             var filter = filters[index];
             if (filter.CurrentOption) {
                 var filterOption = filter.CurrentOption();
                 if (filterOption && filterOption.FilterValue != null) {
                     var activeFilter = {
                         Filter: filter,
                         IsFiltered: function (filter, record) {
                             var filterOption = filter.CurrentOption();
                             if (!filterOption) {
                                 return;
                             }

                             var recordValue = filter.RecordValue(record);
                             return recordValue != filterOption.FilterValue; NoMat
                         }
                     };
                     activeFilters.push(activeFilter);
                 }
             }
             else if (filter.Value) {
                 var filterValue = filter.Value();
                 if (filterValue && filterValue != "") {
                     var activeFilter = {
                         Filter: filter,
                         IsFiltered: function (filter, record) {
                             var filterValue = filter.Value();
                             filterValue = filterValue.toUpperCase();

                             var recordValue = filter.RecordValue(record);
                             recordValue = recordValue.toUpperCase();
                             return recordValue.indexOf(filterValue) == -1;
                         }
                     };
                     activeFilters.push(activeFilter);
                 }
             }
         }

         return activeFilters;
     });
     self.filteredRecords = ko.computed(function () {
         var records = self.records();
         var filters = self.activeFilters();
         if (filters.length == 0) {
             return records;
         }

         var filteredRecords = [];
         for (var rIndex = 0; rIndex < records.length; rIndex++) {
             var isIncluded = true;
             var record = records[rIndex];
             for (var fIndex = 0; fIndex < filters.length; fIndex++) {
                 var filter = filters[fIndex];
                 var isFiltered = filter.IsFiltered(filter.Filter, record);
                 if (isFiltered) {
                     isIncluded = false;
                     break;
                 }
             }

             if (isIncluded) {
                 filteredRecords.push(record);
             }
         }

         return filteredRecords;
     }).extend({ throttle: 200 });
 }

function ExtractModels(parent, data, constructor) {
     var models = [];
     if (data == null) {
         return models;
     }

     for (var index = 0; index < data.length; index++) {
         var row = data[index];
         var model = new constructor(row, parent);
         models.push(model);
     }

     return models;
 }

function GetObservableArray(array) {
    if (typeof (array) == 'function') {
        return array;
    }

    return ko.observableArray(array);
}

function CompareCaseInsensitive(left, right) {
    if (left == null) {
        return right == null;
    }
    else if (right == null) {
        return false;
    }

    return left.toUpperCase() <= right.toUpperCase();
}

function GetOption(name, value, filterValue) {
    var option = {
        Name: name,
        Value: value,
        FilterValue: filterValue
    };
    return option;
}

function SortArray(array, direction, comparison) {
    if (array == null) {
        return [];
    }

    for (var oIndex = 0; oIndex < array.length; oIndex++) {
        var oItem = array[oIndex];
        for (var iIndex = oIndex + 1; iIndex < array.length; iIndex++) {
            var iItem = array[iIndex];
            var isOrdered = comparison(oItem, iItem);
            if (isOrdered == direction) {
                array[iIndex] = oItem;
                array[oIndex] = iItem;
                oItem = iItem;
            }
        }
    }

    return array;
}

datacontext.getMakeLists(makeLists, error); // load update makes 

return {
    makeLists: self.makeLists,
    error: self.error
};
})(ko, makeApp.datacontext);

 // Initiate the Knockout bindings
ko.applyBindings(makeApp.makeViewModel);

<tr>
    <td class="LsSearch">

        <b>Filters:</b><br />

        <div class="" data-bind="foreach: filter.filters">
            <div>
                <span data-bind="text: Name"></span>:<br />
            </div>
            <div data-bind="if: Type == 'select'">
                <select data-bind="options: Options, optionsText: 'Name', value: CurrentOption"></select>
            </div>
            <div data-bind="if: Type == 'text'">
                <input type="text" data-bind="value: Value, valueUpdate: 'afterkeydown'" />
            </div>
        </div>
        <br />
        <b>Sorts:</b>
        Field:
        <br />
        <select data-bind="options: sorter.sortOptions, optionsText: 'Name', value: sorter.currentSortOption"></select>
        Direction:
        <select data-bind="options: sorter.sortDirections, optionsText: 'Name', value: sorter.currentSortDirection"></select>
        <br />
        <br />

         <table>
            <thead>
                <tr>
                    <th>
                        ID
                    </th>
                    <th>
                        Account ID
                    </th>
                    <th>
                        Name
                    </th>
                    <th>
                        Description
                    </th>

                </tr>
            </thead>
             <tbody data-bind="foreach: pager.currentPageRecords">
                 <tr>
                     <td>
                         <span data-bind="text: id"></span>
                     </td>
                     <td>
                         <span data-bind="text: accountId"></span>
                     </td>

                     <td>
                         <span data-bind="text: name"></span>
                     </td>
                     <td>
                         <span data-bind="text: description"></span>
                     </td>

                 </tr>
             </tbody>
        </table>


    </td>