Сначала у меня есть html-страница без столбцов подкачки и сортировки. После того, как я сменил страницу и контроллер для сортировки и подкачки, используйте http://datatables.net/.ASP.MVC TypeScript с таблицей DataTables
Моего PrototypeViewModel.ts:
class PrototypeViewModel {
prototypes: KnockoutObservable<any>;
selectPrototype: KnockoutObservable<any>;
editPrototype: KnockoutObservable<any>;
succeeded: KnockoutObservable<any>;
constructor() {
this.prototypes = ko.observable();
this.selectPrototype = ko.observable();
this.editPrototype = ko.observable(new Prototype());
this.succeeded = ko.observable(false);
}
getFiles(url: string, onError: (message: string) => {}) {
(<any>this).invokeAjax(url, null, (data) =>
{
if (!data.succeeded) {
onError(data.message);
} else {
this.prototypes(data.prototypes);
}
});
}
invokeAjax(url: string, params, callback: (result: any) => {}) {
$.ajax({
url: url,
type: 'GET',
data: params,
dataType: 'json',
cache: false,
success: (data) => {
callback(data);
},
error: (data) => {
this.succeeded(false);
}
});
}
Javascript Файл:
<script src="@Url.Content(@"~/js/jquery.form.js")"></script>
<script src="@Url.Content(@"~/js/knockout.mapping-latest.js")"></script>
<script src="@Url.Content(@"~/ts/PortotypeViewModel.js")"></script>
<script src="~/js/jquery.dataTables.min.js"></script>
<link href="~/Content/dataTables/demo_page.css" rel="stylesheet" />
<link href="~/Content/dataTables/demo_table.css" rel="stylesheet" />
<link href="~/Content/dataTables/demo_table_jui.css" rel="stylesheet" />
<link href="~/css/theme.bootstrap.css" rel="stylesheet" />
<script type="text/javascript">
var vm = null;
$(function() {
vm = new PrototypeViewModel();
GridNew();
//GridOld();
ko.applyBindings(vm);
});
function GridOld() {
vm.getFiles('@Url.Action("GetFiles", "Prototype")', function (errMessage) {
showWrating(errMessage);
});
}
Я изменение GridOld() для GridNew() с DataTable сценария, но я не знаю, как подержанный Tipe скрипт с функцией GridNew(). Пожалуйста помоги.
function GridNew() {
$(function() {
$('#myTable').dataTable({
"bServerSide": true,
"sAjaxSource": "@Url.Action("AjaxHandler", "Prototype")",
"bProcessing": true,
"aoColumns": [
null,
null,
null,
null,
null,
null,
null,
null
]
});
});
}
....
Side-note: ваш метод GridNew имеет в нем готовый обработчик DOM. Это не нужно, поскольку код вызова уже находится в готовом обработчике DOM. –