Я создаю таблицу с нумерацией страниц и поисковым фильтром. Мы связываем данные таблицы с поисковым фильтром. Можно ли создать поисковый фильтр в таблице с разбиением на страницы. Как создать нумерацию страниц в таблице, а также выполнить фильтр поиска и сортировку.
function PlayersViewModel() {
var self = this,x, i, suits;
/* text field should be empty */
self.filterText = ko.observable(""); // Text from search field
//#region Constant Properties
self.descending = "fa fa-arrow-down";
self.ascending = "fa fa-arrow-up";
//#endregion
self.CurrentPage = ko.observable(1); // Store the current page of the user
self.DataPerPage = ko.observable(5); // To identify how many data we want to see per page
//#region Knockout Observables
// Observable array that represents each column in the table
self.columns = ko.observableArray([
{ property: "id", header: "ID", type: "number", state: ko.observable("") },
{ property: "name", header: "Name", type: "string", state: ko.observable("") },
{ property: "time", header: "Time", type: "date", state: ko.observable("") },
{ property: "dob", header: "Date of Birth", type: "date", state: ko.observable("") },
{ property: "address", header: "Address", type: "string", state: ko.observable("") },
{ property: "msg", header: "Body", type: "string", state: ko.observable("") }
]);
// Observable array that will be our data
self.players = ko.observableArray([
{ id: "01", name: "Micky", time: "2015-02-09 4:46:56.678", dob: "10/20/1974", address: "London", msg: "Received Message" },
{ id: "02", name: "Griffey", time: "2015-03-09 4:46:54.678", dob: "11/21/1969", address: "Russia", msg: "Received Message" },
{ id: "03", name: "Derek", time: "2015-01-07 4:46:55.678", dob: "6/26/1931", address: "London", msg: "Send Message" },
{ id: "04", name: "Steven", time: "2015-03-09 4:46:56.678", dob: "2/10/1963", address: "Russia", msg: "Send Message" },
{ id: "05", name: "Jafer", time: "2015-02-09 5:46:56.540", dob: "12/18/1886", address: "London", msg: "Received Message" },
{ id: "06", name: "Jenifer", time: "2015-01-14 4:52:16.379", dob: "11/29/1970", address: "China", msg: "Send Message" },
{ id: "07", name: "Jones", time: "2015-03-08 5:26:33.600", dob: "8/24/1895", address: "London", msg: "Received Message" },
{ id: "08", name: "Micky", time: "2015-02-09 4:46:56.678", dob: "10/20/1974", address: "London", msg: "Received Message" },
{ id: "09", name: "Bruce", time: "2015-03-09 4:46:54.678", dob: "11/21/1969", address: "Russia", msg: "Received Message" },
{ id: "10", name: "Peter", time: "2015-01-07 4:46:55.678", dob: "6/26/1931", address: "London", msg: "Send Message" },
{ id: "11", name: "Wayne", time: "2015-03-09 4:46:56.678", dob: "2/10/1963", address: "Russia", msg: "Send Message" },
{ id: "12", name: "Sam", time: "2015-02-09 5:46:56.540", dob: "12/18/1886", address: "London", msg: "Received Message" },
{ id: "13", name: "Jenifer", time: "2015-01-14 4:52:16.379", dob: "11/29/1970", address: "China", msg: "Send Message" },
{ id: "14", name: "Smith", time: "2015-03-08 5:26:33.600", dob: "8/24/1895", address: "London", msg: "Received Message" }
]);
//#endregion
/* script for search filter */
suits = self.players();
for ( i = 0; i < suits.length; i++) {
suits[i]["search_content"] = ">";
for ( x in suits[i] ) {
if ( !suits[i].hasOwnProperty(x) || x == "search_content" || typeof suits[i][x] !== "string") {continue;}
suits[i]["search_content"] += suits[i][x].toUpperCase();
}
}
// Collection of players after going through search filter
self.filteredTestsuites = ko.computed(function () {
var reg;
// If many white spaces in a row, replace with only one white space
fText = self.filterText().replace(/\s+/gi, '|');
fText = fText.replace(/\|\s*$/gi, '');
console.log("regex:", fText);
reg = new RegExp(fText, "gi");
// If there is anything in the search box, filter for this
// As of now this does not divide the filterText and only searches the Name field
var filteredCollection = ko.utils.arrayFilter(self.players(), function(test) {
if(fText.length)
return test.search_content.match(reg);
else
return 1;
});
return filteredCollection;
}, self);
/* script Ends with text search */
/* script for sorting */
//#region Sorting methods
self.sortClick = function (column) {
try {
// Call this method to clear the state of any columns OTHER than the target
// so we can keep track of the ascending/descending
self.clearColumnStates(column);
// Get the state of the sort type
if (column.state() === "" || column.state() === self.descending) {
column.state(self.ascending);
}
else {
column.state(self.descending);
}
console.log(column.state());
console.log(column.type);
switch (column.type) {
case "number":
self.numberSort(column);
break;
case "date":
self.dateSort(column);
break;
case "string":
default:
self.stringSort(column);
break;
}
}
catch (err) {
// Always remember to handle those errors that could occur during a user interaction
alert(err);
}
};
// Generic sort method for numbers and strings
self.stringSort = function (column) { // Pass in the column object
self.players(self.players().sort(function (a, b) {
// Set strings to lowercase to sort properly
var playerA = a[column.property].toLowerCase(), playerB = b[column.property].toLowerCase();
if (playerA < playerB) {
return (column.state() === self.ascending) ? -1 : 1;
}
else if (playerA > playerB) {
return (column.state() === self.ascending) ? 1 : -1;
}
else {
return 0
}
}));
};
self.numberSort = function (column) {
self.players(self.players().sort(function (a, b) {
var playerA = a[column.property], playerB = b[column.property];
if (column.state() === self.ascending) {
return playerA - playerB;
}
else {
return playerB - playerA;
}
}));
};
// Sort by date
self.dateSort = function (column) {
self.players(self.players().sort(function (a, b) {
if (column.state() === self.ascending) {
return new Date(a[column.property]) - new Date(b[column.property]);
}
else {
return new Date(b[column.property]) - new Date(a[column.property]);
}
}));
};
//#region Utility Methods
self.clearColumnStates = function (selectedColumn) {
var otherColumns = self.columns().filter(function (col) {
return col != selectedColumn;
});
for (var i = 0; i < otherColumns.length; i++) {
otherColumns[i].state("");
}
};
/* script Ends for sorting */
};
ko.applyBindings(new PlayersViewModel());
Они должны правильно выполнять поиск и сортировку в таблице, как создавать нумерацию страниц для образца, они не влияют на фильтр поиска и сортировку в таблице.