|
1 | 1 | ## How to use |
2 | | -Add the `[JQDataTable]` attribute to the controller action which provides the data. Return from the action View containing IQueryable collection of a strongly typed view model. On the client side configure the table for server side processing according to the jQuery Datatables documentation https://datatables.net/examples/data_sources/server_side.html. |
| 2 | +Add the `[JQDataTable]` attribute to the controller action which provides the data. Return from the action `OkNegotiatedContentResult` containing IQueryable collection of a strongly typed view model. On the client side configure the table for server side processing according to the jQuery Datatables documentation https://datatables.net/examples/data_sources/server_side.html. |
3 | 3 |
|
4 | 4 | ### Example |
5 | 5 |
|
6 | 6 | #### Server |
7 | 7 | ```cs |
8 | | - public class CustomersController : Controller |
| 8 | + public class CustomersController : ApiController |
9 | 9 | { |
10 | | - private AdventureWorks context; |
11 | | - |
12 | | - public CustomersController() |
| 10 | + [JQDataTable] |
| 11 | + public Post GetCustomersData() |
13 | 12 | { |
14 | | - this.context = new Data.AdventureWorks(); |
15 | | - } |
| 13 | + var context = new Data.AdventureWorks(); |
| 14 | + var data = context.Customers; |
16 | 15 |
|
17 | | - // GET: Customer |
18 | | - public ActionResult Index() |
19 | | - { |
20 | | - return View(); |
| 16 | + return this.Ok(data); |
21 | 17 | } |
| 18 | + } |
22 | 19 |
|
23 | | - [JQDataTable] |
24 | | - public ActionResult GetCustomersData() |
25 | | - { |
26 | | - var data = this.context.Customers.Select(x => new CustomerViewModel |
27 | | - { |
28 | | - CustomerID = x.CustomerID, |
29 | | - AccountNumber = x.AccountNumber, |
30 | | - Person = new PersonViewModel |
31 | | - { |
32 | | - FirstName = x.Person.FirstName, |
33 | | - LastName = x.Person.LastName, |
34 | | - }, |
35 | | - Store = new StoreViewModel |
36 | | - { |
37 | | - Name = x.Store.Name, |
38 | | - } |
39 | | - }); |
| 20 | + public class Customer |
| 21 | + { |
| 22 | + public int CustomerId { get; set; } |
| 23 | + public Person Person { get; set; } |
| 24 | + public Store Store { get; set; } |
| 25 | + ... |
| 26 | + ... |
| 27 | + } |
40 | 28 |
|
41 | | - return this.View(data); |
42 | | - } |
| 29 | + public class Person |
| 30 | + { |
| 31 | + ... |
| 32 | + public string FirstName { get; set; } |
| 33 | + public string LastName { get; set; } |
| 34 | + ... |
| 35 | + ... |
| 36 | + } |
| 37 | + |
| 38 | + public class Store |
| 39 | + { |
| 40 | + ... |
| 41 | + public string Name { get; set; } |
| 42 | + ... |
43 | 43 | } |
44 | 44 | ``` |
45 | 45 |
|
@@ -72,18 +72,17 @@ Add the `[JQDataTable]` attribute to the controller action which provides the da |
72 | 72 | "proccessing": true, |
73 | 73 | "serverSide": true, |
74 | 74 | "ajax": { |
75 | | - url: "@Url.Action("GetCustomersData", "Customers")", |
| 75 | + url: "api/customers", |
76 | 76 | type: 'POST' |
77 | 77 | }, |
78 | 78 | "language": { |
79 | 79 | "search": "", |
80 | | - "searchPlaceholder": "Search..." |
81 | 80 | }, |
82 | 81 | "columns": [ |
83 | | - { "data": "CustomerID", "searchable": false }, |
84 | | - { "data": "Person.FirstName", "searchable": true }, |
85 | | - { "data": "Person.LastName", "searchable": true }, |
86 | | - { "data": "Store.Name", "searchable": true }, |
| 82 | + { "data": "CustomerID" }, |
| 83 | + { "data": "Person.FirstName" }, |
| 84 | + { "data": "Person.LastName" }, |
| 85 | + { "data": "Store.Name" }, |
87 | 86 | ] |
88 | 87 | }); |
89 | 88 |
|
|
0 commit comments