Skip to content

Commit 7996227

Browse files
committed
readme for MVC file added
1 parent 1be1d1e commit 7996227

File tree

2 files changed

+78
-76
lines changed

2 files changed

+78
-76
lines changed

README.Mvc.md

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
## Install
2+
Install appropriate nuget package:
3+
- for MVC: link
4+
5+
## How to use
6+
Add the `[JQDataTable]` attribute to the ajax controller action. Return 'View(data)' where 'data' is of type IQueryable<>. 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.
7+
8+
### Example
9+
10+
#### Server
11+
```cs
12+
private ApplicationDbContext context;
13+
14+
[JQDataTable]
15+
public ActionResult GetVendorsData()
16+
{
17+
var data = this.context.Employees.Select(x => new
18+
{
19+
FirstName = x.FirstName,
20+
LastName = x.LastName,
21+
Address = new AddressViewModel
22+
{
23+
Country = x.Address.Country,
24+
City = x.Address.City
25+
}
26+
});
27+
28+
return this.View(data);
29+
}
30+
```
31+
32+
#### Client
33+
```html
34+
<table id="myTable" class="display" cellspacing="0" width="100">
35+
<thead>
36+
<tr>
37+
<th>Title</th>
38+
<th>FirstName</th>
39+
<th>MiddleName</th>
40+
<th>LastName</th>
41+
<th>BusinessEntityID</th>
42+
</tr>
43+
</thead>
44+
<tfoot>
45+
<tr>
46+
<th>Title</th>
47+
<th>FirstName</th>
48+
<th>MiddleName</th>
49+
<th>LastName</th>
50+
<th>BusinessEntityID</th>
51+
</tr>
52+
</tfoot>
53+
</table>
54+
55+
@section Scripts {
56+
<script>
57+
var table = $('#myTable').DataTable({
58+
"proccessing": true,
59+
"serverSide": true,
60+
"ajax": {
61+
url: "@Url.Action("GetPeopleData", "AdventureWorks")",
62+
type: 'POST'
63+
},
64+
"language": {
65+
"search": "",
66+
"searchPlaceholder": "Search..."
67+
},
68+
"columns": [
69+
{ "data": "Title" },
70+
{ "data": "FirstName" },
71+
{ "data": "MiddleName" },
72+
{ "data": "LastName"},
73+
{ "data": "Employee.BusinessEntityID"},
74+
]
75+
});
76+
</script>
77+
}
78+
```

README.md

Lines changed: 0 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,80 +10,4 @@ Supports:
1010

1111
Currently tested with Entity Framework 6.0.0 and 6.2.0
1212

13-
## Install
14-
// TODO:
1513

16-
## How to use
17-
Add the `[JQDataTable]` attribute to the ajax controller action. Return 'View(data)' where 'data' is of type IQueryable<>. 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.
18-
19-
### Example
20-
21-
#### Server
22-
```cs
23-
private ApplicationDbContext context;
24-
25-
[JQDataTable]
26-
public ActionResult GetVendorsData()
27-
{
28-
var data = this.context.Employees.Select(x => new
29-
{
30-
FirstName = x.FirstName,
31-
LastName = x.LastName,
32-
Address = new AddressViewModel
33-
{
34-
Country = x.Address.Country,
35-
City = x.Address.City
36-
}
37-
});
38-
39-
return this.View(data);
40-
}
41-
```
42-
43-
#### Client
44-
```html
45-
<table id="myTable" class="display" cellspacing="0" width="100">
46-
<thead>
47-
<tr>
48-
<th>Title</th>
49-
<th>FirstName</th>
50-
<th>MiddleName</th>
51-
<th>LastName</th>
52-
<th>BusinessEntityID</th>
53-
</tr>
54-
</thead>
55-
<tfoot>
56-
<tr>
57-
<th>Title</th>
58-
<th>FirstName</th>
59-
<th>MiddleName</th>
60-
<th>LastName</th>
61-
<th>BusinessEntityID</th>
62-
</tr>
63-
</tfoot>
64-
</table>
65-
66-
@section Scripts {
67-
<script>
68-
var table = $('#myTable').DataTable({
69-
"proccessing": true,
70-
"serverSide": true,
71-
"ajax": {
72-
url: "@Url.Action("GetPeopleData", "AdventureWorks")",
73-
type: 'POST'
74-
},
75-
"language": {
76-
"search": "",
77-
"searchPlaceholder": "Search..."
78-
},
79-
"columns": [
80-
{ "data": "Title" },
81-
{ "data": "FirstName" },
82-
{ "data": "MiddleName" },
83-
{ "data": "LastName"},
84-
{ "data": "Employee.BusinessEntityID"},
85-
]
86-
});
87-
</script>
88-
}
89-
```

0 commit comments

Comments
 (0)