Skip to content

Commit 6fa70a6

Browse files
committed
documentation modified
1 parent 3a83a16 commit 6fa70a6

File tree

2 files changed

+123
-19
lines changed

2 files changed

+123
-19
lines changed

README.Mvc.md

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
## How to use
2-
Add the `[JQDataTable]` attribute to the ajax controller action. Return from the controller View with IQueryable collection of a strongly typed view model. This component uses IQueryable<T> interface to construct query expressions to your data collection which can be processed by an ORM like Entity Framework. On the client side configure the table for server side processing acccording to the jQuery Data Tables 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 `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.
33

44
### Example
55

@@ -23,24 +23,36 @@ Add the `[JQDataTable]` attribute to the ajax controller action. Return from the
2323
[JQDataTable]
2424
public ActionResult GetCustomersData()
2525
{
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-
});
26+
IQueryable<Customer> data = this.context.Customers;
4027

4128
return this.View(data);
4229
}
4330
}
31+
32+
public class Customer
33+
{
34+
public int CustomerId { get; set; }
35+
public Person Person { get; set; }
36+
public Store Store { get; set; }
37+
...
38+
...
39+
}
40+
41+
public class Person
42+
{
43+
...
44+
public string FirstName { get; set; }
45+
public string LastName { get; set; }
46+
...
47+
...
48+
}
49+
50+
public class Store
51+
{
52+
...
53+
public string Name { get; set; }
54+
...
55+
}
4456
```
4557

4658
#### Client
@@ -80,10 +92,10 @@ Add the `[JQDataTable]` attribute to the ajax controller action. Return from the
8092
"searchPlaceholder": "Search..."
8193
},
8294
"columns": [
83-
{ "data": "CustomerID", "searchable": false },
84-
{ "data": "Person.FirstName", "searchable": true },
85-
{ "data": "Person.LastName", "searchable": true },
86-
{ "data": "Store.Name", "searchable": true },
95+
{ "data": "CustomerID" },
96+
{ "data": "Person.FirstName" },
97+
{ "data": "Person.LastName" },
98+
{ "data": "Store.Name" },
8799
]
88100
});
89101

README.WebAPI2.md

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
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.
3+
4+
### Example
5+
6+
#### Server
7+
```cs
8+
public class CustomersController : Controller
9+
{
10+
private AdventureWorks context;
11+
12+
public CustomersController()
13+
{
14+
this.context = new Data.AdventureWorks();
15+
}
16+
17+
// GET: Customer
18+
public ActionResult Index()
19+
{
20+
return View();
21+
}
22+
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+
});
40+
41+
return this.View(data);
42+
}
43+
}
44+
```
45+
46+
#### Client
47+
```html
48+
<table class="display" cellspacing="0" width="100%">
49+
<thead>
50+
<tr>
51+
<th>Id</th>
52+
<th>First Name</th>
53+
<th>Last Name</th>
54+
<th>Store Name</th>
55+
</tr>
56+
</thead>
57+
58+
<tfoot>
59+
<tr>
60+
<th>Id</th>
61+
<th>First Name</th>
62+
<th>Last Name</th>
63+
<th>Store Name</th>
64+
</tr>
65+
</tfoot>
66+
</table>
67+
68+
@section Scripts {
69+
<script>
70+
71+
var table = $('table').DataTable({
72+
"proccessing": true,
73+
"serverSide": true,
74+
"ajax": {
75+
url: "@Url.Action("GetCustomersData", "Customers")",
76+
type: 'POST'
77+
},
78+
"language": {
79+
"search": "",
80+
"searchPlaceholder": "Search..."
81+
},
82+
"columns": [
83+
{ "data": "CustomerID", "searchable": false },
84+
{ "data": "Person.FirstName", "searchable": true },
85+
{ "data": "Person.LastName", "searchable": true },
86+
{ "data": "Store.Name", "searchable": true },
87+
]
88+
});
89+
90+
</script>
91+
}
92+
```

0 commit comments

Comments
 (0)