2014-01-14 3 views
1

Сначала у меня есть 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 
      ] 
     }); 
    }); 
} 
.... 
+0

Side-note: ваш метод GridNew имеет в нем готовый обработчик DOM. Это не нужно, поскольку код вызова уже находится в готовом обработчике DOM. –

ответ

0

, так как вы решили использовать машинопись в вашем проекте, вы можете обнаружить, что некоторые функции не будут иметь Intellisense поддержки или подчеркнуты в визуальной студии в красной волнистой линии, потому что вы пытаетесь использовать библиотеку без типизированных определений. вы можете получить эти here или найти соответствующий пакет nuget для него.

также, поскольку typeScript - это просто супер набор javascript, вы можете просто вызвать обычные функции javascript.

Смежные вопросы