Skip to content

Commit b95c1ba

Browse files
VladimirDimovVladimirDimov
committed
documentation modified
1 parent 04cf749 commit b95c1ba

File tree

2 files changed

+98
-99
lines changed

2 files changed

+98
-99
lines changed

‎README.md‎

Lines changed: 8 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ Currently tested with Entity Framework versions 6.0.0 and 6.2.0 and Datatables v
2121

2222
[How to use with MVC 5](/resources/documentation/README.Mvc.md)
2323

24+
[How to use with Web Api 2](/resources/documentation/README.WebAPI2.md)
25+
2426
## How to use on the client side
2527
For how to install the jQuery Datatables plugin refer to the official documentation [here](https://datatables.net/manual/installation)
2628

@@ -36,15 +38,11 @@ In order to map the ajax response to the correct columns the columns property mu
3638
url: "path to the data source",
3739
type: 'POST'
3840
},
39-
"language": {
40-
"search": "",
41-
"searchPlaceholder": "Search..."
42-
},
4341
"columns": [
44-
{ "data": "CustomerID", "searchable": false },
45-
{ "data": "Person.FirstName", "searchable": true },
46-
{ "data": "Person.LastName", "searchable": true },
47-
{ "data": "Store.Name", "searchable": true },
42+
{ "data": "CustomerID" },
43+
{ "data": "Person.FirstName" },
44+
{ "data": "Person.LastName" },
45+
{ "data": "Store.Name" },
4846
]
4947
});
5048
```
@@ -71,97 +69,8 @@ The following custom filters are supported on the server side:
7169
- `lt` : less than;
7270
- `lte` : less than or equal;
7371
- `eq` : eqaul;
74-
##### Example:
75-
```html
76-
<div>
77-
CreditRating: from <input type="number" id="minCreditRating" value="1" class="reload-table" />
78-
to <input type="number" id="maxCreditRating" value="3" class="reload-table" />
79-
</div>
80-
81-
<div>
82-
Business Entity ID = <input type="number" id="businessEntityId" value="" class="reload-table" />
83-
</div>
84-
85-
<div>
86-
Modified Date = <input type="date" id="modifiedDate" value="" class="reload-table" />
87-
</div>
88-
89-
<div>
90-
Account Number = <input type="text" id="accountNumber" value="" class="reload-table" />
91-
</div>
92-
93-
<table id="SearchResultTable" class="display" cellspacing="0" width="100">
94-
<thead>
95-
<tr>
96-
<th>BusinessEntityID</th>
97-
<th>CreditRating</th>
98-
<th>ActiveFlag</th>
99-
<th>AccountNumber</th>
100-
<th>ModifiedDate</th>
101-
</tr>
102-
</thead>
103-
<tfoot>
104-
<tr>
105-
<th>BusinessEntityID</th>
106-
<th>CreditRating</th>
107-
<th>ActiveFlag</th>
108-
<th>AccountNumber</th>
109-
<th>ModifiedDate</th>
110-
</tr>
111-
</tfoot>
112-
</table>
113-
114-
@section Scripts {
115-
<script>
116-
117-
118-
var table = $('#SearchResultTable').DataTable({
119-
"proccessing": true,
120-
"serverSide": true,
121-
"ajax": {
122-
url: "@Url.Action("GetVendorsData", "Vendors")",
123-
type: 'POST',
124-
"data": function (d) {
125-
d.custom = {
126-
"filters": {
127-
"CreditRating": { "gte": $('#minCreditRating').val(), "lte": $('#maxCreditRating').val() },
128-
"BusinessEntityID": { "eq": $('#businessEntityId').val() },
129-
"ModifiedDate": { "eq": $('#modifiedDate').val() },
130-
"AccountNumber": { "eq": $('#accountNumber').val() },
131-
}
132-
}
133-
}
134-
},
135-
"language": {
136-
"search": "",
137-
"searchPlaceholder": "Search..."
138-
},
139-
"columns": [
140-
{ "data": "BusinessEntityID", searchable: false },
141-
{ "data": "CreditRating", searchable: false },
142-
{ "data": "ActiveFlag", "searchable": false },
143-
{ "data": "AccountNumber", searchable: true },
144-
{ "data": "ModifiedDate", "searchable": false},
145-
],
146-
"columnDefs": [
147-
{
148-
"render": function (data, type, row) {
149-
date = new Date(parseInt(row.ModifiedDate.replace("/Date(", "").replace(")/", ""), 10));
150-
151-
return date.toLocaleDateString();
152-
},
153-
"targets": 4
154-
}
155-
]
156-
157-
});
158-
159-
$('.reload-table').on('change', function () {
160-
table.ajax.reload();
161-
});
162-
</script>
163-
}
164-
```
72+
73+
[Custom filters example](/resources/documentation/example-custom-filters.md)
16574

16675
#### Extensibility Points
16776
You can insert custom logic at any point of the data processing pipe line. The following extensibility points are provided (in order of execution):

‎resources/documentation/example-custom-filters.md‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
```html
2+
<div>
3+
CreditRating: from <input type="number" id="minCreditRating" value="1" class="reload-table" />
4+
to <input type="number" id="maxCreditRating" value="3" class="reload-table" />
5+
</div>
6+
7+
<div>
8+
Business Entity ID = <input type="number" id="businessEntityId" value="" class="reload-table" />
9+
</div>
10+
11+
<div>
12+
Modified Date = <input type="date" id="modifiedDate" value="" class="reload-table" />
13+
</div>
14+
15+
<div>
16+
Account Number = <input type="text" id="accountNumber" value="" class="reload-table" />
17+
</div>
18+
19+
<table id="SearchResultTable" class="display" cellspacing="0" width="100">
20+
<thead>
21+
<tr>
22+
<th>BusinessEntityID</th>
23+
<th>CreditRating</th>
24+
<th>ActiveFlag</th>
25+
<th>AccountNumber</th>
26+
<th>ModifiedDate</th>
27+
</tr>
28+
</thead>
29+
<tfoot>
30+
<tr>
31+
<th>BusinessEntityID</th>
32+
<th>CreditRating</th>
33+
<th>ActiveFlag</th>
34+
<th>AccountNumber</th>
35+
<th>ModifiedDate</th>
36+
</tr>
37+
</tfoot>
38+
</table>
39+
40+
@section Scripts {
41+
<script>
42+
43+
44+
var table = $('#SearchResultTable').DataTable({
45+
"proccessing": true,
46+
"serverSide": true,
47+
"ajax": {
48+
url: "@Url.Action("GetVendorsData", "Vendors")",
49+
type: 'POST',
50+
"data": function (d) {
51+
d.custom = {
52+
"filters": {
53+
"CreditRating": { "gte": $('#minCreditRating').val(), "lte": $('#maxCreditRating').val() },
54+
"BusinessEntityID": { "eq": $('#businessEntityId').val() },
55+
"ModifiedDate": { "eq": $('#modifiedDate').val() },
56+
"AccountNumber": { "eq": $('#accountNumber').val() },
57+
}
58+
}
59+
}
60+
},
61+
"language": {
62+
"search": "",
63+
"searchPlaceholder": "Search..."
64+
},
65+
"columns": [
66+
{ "data": "BusinessEntityID", searchable: false },
67+
{ "data": "CreditRating", searchable: false },
68+
{ "data": "ActiveFlag", "searchable": false },
69+
{ "data": "AccountNumber", searchable: true },
70+
{ "data": "ModifiedDate", "searchable": false},
71+
],
72+
"columnDefs": [
73+
{
74+
"render": function (data, type, row) {
75+
date = new Date(parseInt(row.ModifiedDate.replace("/Date(", "").replace(")/", ""), 10));
76+
77+
return date.toLocaleDateString();
78+
},
79+
"targets": 4
80+
}
81+
]
82+
83+
});
84+
85+
$('.reload-table').on('change', function () {
86+
table.ajax.reload();
87+
});
88+
</script>
89+
}
90+
```

0 commit comments

Comments
 (0)