Skip to content

Commit d5296b3

Browse files
VladimirDimovVladimirDimov
committed
readme updated
1 parent 50b5378 commit d5296b3

File tree

2 files changed

+212
-54
lines changed

2 files changed

+212
-54
lines changed

‎README.Mvc.md

Lines changed: 72 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,96 @@
11
## Install
2-
Install appropriate nuget package:
3-
- for MVC: link
2+
[Install nuget package](http://link)
43

4+
`Install-Package JQDTServerSide.Mvc`
55
## How to use
66
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.
77

88
### Example
99

1010
#### Server
1111
```cs
12-
private ApplicationDbContext context;
13-
12+
public class CustomersController : Controller
13+
{
14+
private AdventureWorks context;
15+
16+
public CustomersController()
17+
{
18+
this.context = new Data.AdventureWorks();
19+
}
20+
21+
// GET: Customer
22+
public ActionResult Index()
23+
{
24+
return View();
25+
}
26+
1427
[JQDataTable]
15-
public ActionResult GetVendorsData()
28+
public ActionResult GetCustomersData()
1629
{
17-
var data = this.context.Employees.Select(x => new
30+
var data = this.context.Customers.Select(x => new CustomerViewModel
1831
{
19-
FirstName = x.FirstName,
20-
LastName = x.LastName,
21-
Address = new AddressViewModel
32+
CustomerID = x.CustomerID,
33+
AccountNumber = x.AccountNumber,
34+
Person = new PersonViewModel
35+
{
36+
FirstName = x.Person.FirstName,
37+
LastName = x.Person.LastName,
38+
},
39+
Store = new StoreViewModel
2240
{
23-
Country = x.Address.Country,
24-
City = x.Address.City
41+
Name = x.Store.Name,
2542
}
2643
});
2744

2845
return this.View(data);
2946
}
47+
}
3048
```
3149

3250
#### Client
3351
```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>
52+
<table class="display" cellspacing="0" width="100%">
53+
<thead>
54+
<tr>
55+
<th>Id</th>
56+
<th>First Name</th>
57+
<th>Last Name</th>
58+
<th>Store Name</th>
59+
</tr>
60+
</thead>
5461

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-
}
62+
<tfoot>
63+
<tr>
64+
<th>Id</th>
65+
<th>First Name</th>
66+
<th>Last Name</th>
67+
<th>Store Name</th>
68+
</tr>
69+
</tfoot>
70+
</table>
71+
72+
@section Scripts {
73+
<script>
74+
75+
var table = $('table').DataTable({
76+
"proccessing": true,
77+
"serverSide": true,
78+
"ajax": {
79+
url: "@Url.Action("GetCustomersData", "Customers")",
80+
type: 'POST'
81+
},
82+
"language": {
83+
"search": "",
84+
"searchPlaceholder": "Search..."
85+
},
86+
"columns": [
87+
{ "data": "CustomerID", "searchable": false },
88+
{ "data": "Person.FirstName", "searchable": true },
89+
{ "data": "Person.LastName", "searchable": true },
90+
{ "data": "Store.Name", "searchable": true },
91+
]
92+
});
93+
94+
</script>
95+
}
7896
```

‎README.md

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,143 @@ Supports:
1111
Currently tested with Entity Framework versions 6.0.0 and 6.2.0 and Datatables version 1.10.16.
1212

1313
[How to use with MVC 5](https://github.com/VladimirDimov/jQuery-Datatables-Server-Side-Processing/blob/master/README.Mvc.md)
14+
15+
## How to use on the client side
16+
To use it on the client side the jquery datatables library must be loaded on the browser. Follow the official jQuery Datatables guide for serverside processing [here](https://datatables.net/examples/data_sources/server_side.html).
17+
18+
In order to map the ajax response to the correct columns the columns property must be configure in the configuration object.
19+
### Example:
20+
```js
21+
var table = $('table').DataTable({
22+
"proccessing": true,
23+
"serverSide": true,
24+
"ajax": {
25+
url: "path to the data source",
26+
type: 'POST'
27+
},
28+
"language": {
29+
"search": "",
30+
"searchPlaceholder": "Search..."
31+
},
32+
"columns": [
33+
{ "data": "CustomerID", "searchable": false },
34+
{ "data": "Person.FirstName", "searchable": true },
35+
{ "data": "Person.LastName", "searchable": true },
36+
{ "data": "Store.Name", "searchable": true },
37+
]
38+
});
39+
```
40+
41+
#### Searching
42+
Read how to use on the client side from [here](https://datatables.net/reference/option/searching)
43+
44+
The searching is performed only on string columns. Therefore the searchable parameter inside the columns property must be set to false. Only the string columns with the searchable parameter set to true will be included in the search.
45+
46+
#### Individual column filtering
47+
Read how to use on the client side from [here](https://datatables.net/examples/api/multi_filter.html).
48+
49+
For all string columns the individual column filter will work as case insensitive search. For other types it will match the exact value. For DateTime types it will match the value with precision to the seconds.
50+
51+
#### Nested objects
52+
Read how to use on the client side from [here](https://datatables.net/examples/ajax/deep.html).
53+
54+
#### Custom filters
55+
To use the predefined custom filters the data property of the configuration object must be configured properly [link](https://datatables.net/reference/option/ajax.data).
56+
57+
The following custom filters are supported on the server side:
58+
- `gt` : greater than;
59+
- `gte` : greater than or equal;
60+
- `lt` : less than;
61+
- `lte` : less than or equal;
62+
- `eq` : eqaul;
63+
##### Example:
64+
```html
65+
<div>
66+
CreditRating: from <input type="number" id="minCreditRating" value="1" class="reload-table" />
67+
to <input type="number" id="maxCreditRating" value="3" class="reload-table" />
68+
</div>
69+
70+
<div>
71+
Business Entity ID = <input type="number" id="businessEntityId" value="" class="reload-table" />
72+
</div>
73+
74+
<div>
75+
Modified Date = <input type="date" id="modifiedDate" value="" class="reload-table" />
76+
</div>
77+
78+
<div>
79+
Account Number = <input type="text" id="accountNumber" value="" class="reload-table" />
80+
</div>
81+
82+
<table id="SearchResultTable" class="display" cellspacing="0" width="100">
83+
<thead>
84+
<tr>
85+
<th>BusinessEntityID</th>
86+
<th>CreditRating</th>
87+
<th>ActiveFlag</th>
88+
<th>AccountNumber</th>
89+
<th>ModifiedDate</th>
90+
</tr>
91+
</thead>
92+
<tfoot>
93+
<tr>
94+
<th>BusinessEntityID</th>
95+
<th>CreditRating</th>
96+
<th>ActiveFlag</th>
97+
<th>AccountNumber</th>
98+
<th>ModifiedDate</th>
99+
</tr>
100+
</tfoot>
101+
</table>
102+
103+
@section Scripts {
104+
<script>
105+
106+
107+
var table = $('#SearchResultTable').DataTable({
108+
"proccessing": true,
109+
"serverSide": true,
110+
"ajax": {
111+
url: "@Url.Action("GetVendorsData", "Vendors")",
112+
type: 'POST',
113+
"data": function (d) {
114+
d.custom = {
115+
"filters": {
116+
"CreditRating": { "gte": $('#minCreditRating').val(), "lte": $('#maxCreditRating').val() },
117+
"BusinessEntityID": { "eq": $('#businessEntityId').val() },
118+
"ModifiedDate": { "eq": $('#modifiedDate').val() },
119+
"AccountNumber": { "eq": $('#accountNumber').val() },
120+
}
121+
}
122+
}
123+
},
124+
"language": {
125+
"search": "",
126+
"searchPlaceholder": "Search..."
127+
},
128+
"columns": [
129+
{ "data": "BusinessEntityID", searchable: false },
130+
{ "data": "CreditRating", searchable: false },
131+
{ "data": "ActiveFlag", "searchable": false },
132+
{ "data": "AccountNumber", searchable: true },
133+
{ "data": "ModifiedDate", "searchable": false},
134+
],
135+
"columnDefs": [
136+
{
137+
"render": function (data, type, row) {
138+
date = new Date(parseInt(row.ModifiedDate.replace("/Date(", "").replace(")/", ""), 10));
139+
140+
return date.toLocaleDateString();
141+
},
142+
"targets": 4
143+
}
144+
]
145+
146+
});
147+
148+
$('.reload-table').on('change', function () {
149+
table.ajax.reload();
150+
});
151+
</script>
152+
}
153+
```

0 commit comments

Comments
 (0)