Skip to content

Commit 98862b8

Browse files
ekondurekondur
authored
Update README.md
1 parent 8359326 commit 98862b8

File tree

1 file changed

+233
-10
lines changed

1 file changed

+233
-10
lines changed

‎README.md‎

Lines changed: 233 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -61,24 +61,247 @@ To use on .Net Frameworks (4.5 ... 4.8) Install [DatatableJS.Net](https://www.nu
6161
PM> Install-Package DatatableJS.Net
6262
```
6363

64-
Using `.ToDataResult(request)` extension function with IQueryable collection, provides data can get with server side pagination very simply. To use this feature
65-
install [DatatableJS.Data](https://www.nuget.org/packages/DatatableJS.Data/) from the package manager console:
64+
Then add [datatables.net](https://datatables.net/) Javascript and CSS files or links to your project.
65+
66+
```html
67+
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
68+
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
69+
```
70+
## URL
71+
Set the URL to retrieve data from any action with GET or POST method:
72+
73+
```csharp
74+
.URL(Url.Action("GetAll", "Person"), "POST")
75+
```
76+
Use `DataRequest` object to bind parameters of request. With `.ToDataResult(request);` extension method, if there is entity framework, execute IQueryable list server side from context. Otherwise manipulate data manually and return `DataResult<T>` object including data.
77+
78+
Install [DatatableJS.Data](https://www.nuget.org/packages/DatatableJS.Data/) from the package manager console:
6679
```
6780
PM> Install-Package DatatableJS.Data
6881
```
6982
```csharp
70-
using DatatableJS.Data
83+
using DatatableJS.Data;
7184

72-
public JsonResult GetDataResult(DataRequest request)
85+
public JsonResult GetAll(DataRequest request)
86+
{
87+
DataResult<Person> result = ctx.People.ToDataResult(request);
88+
return Json(result);
89+
}
90+
```
91+
## ServerSide
92+
Enable server-side processing mode. By default DataTables operates in client-side processing mode. [Reference:](https://datatables.net/reference/option/serverSide)
93+
```csharp
94+
.ServerSide(true)
95+
```
96+
## Data
97+
Pass additional parameters with `.Data("addParam")` method and add script function to view.
98+
```javascript
99+
function addParam() {
100+
return { Param1: "test1", Param2: true, Param3: 5 };
101+
}
102+
```
103+
Get additional parameters with names.
104+
```csharp
105+
public JsonResult GetAll(DataRequest request, string Param1, bool Param2, int Param3)
73106
{
74-
DataResult result = context.People.ToDataResult(request);
75-
return Json(result);
107+
//
108+
}
109+
```
110+
Or get parameters with object reference named **"data"**.
111+
```csharp
112+
public JsonResult GetAll(DataRequest request, AddData data)
113+
{
114+
//
115+
}
116+
```
117+
## Filters
118+
Add additional filters before render datatable object. These filters are included in `.ToDataResult(request)` method with request while server side executing.
119+
```csharp
120+
.Filters(filter =>
121+
{
122+
filter.Add(a => a.BirthDate).LessThanOrEqual(DateTime.Now);
123+
filter.Add(a => a.Age).NotEqual(25);
124+
})
125+
```
126+
## Orders
127+
Using this method you can define which column(s) the order is performed upon, and the ordering direction. [Reference](https://datatables.net/reference/option/order)
128+
```csharp
129+
.Orders(order => {
130+
order.Add(p => p.Name, OrderBy.Descending);
131+
order.Add(p => p.Age, OrderBy.Ascending);
132+
})
133+
```
134+
## Length Menu
135+
This method allows you to readily specify the entries in the length drop down _select_ list that DataTables shows . [Reference](https://datatables.net/reference/option/lengthMenu)
136+
```csharp
137+
.LengthMenu(new int[] {5,10,15})
138+
```
139+
Set _hasAll_ paramter true to show All option in select.
140+
```csharp
141+
.LengthMenu(new int[] {5,10,15}, true)
142+
```
143+
Set _allText_ paramter to change name of option All.
144+
```csharp
145+
.LengthMenu(new int[] {5,10,15}, true, "All Pages")
146+
```
147+
## Page Length
148+
Number of rows to display on a single page when using pagination. [Reference](https://datatables.net/reference/option/pageLength)
149+
```csharp
150+
.PageLength(15)
151+
```
152+
## Name
153+
Calling datatable on client-side is possible with name:
154+
```csharp
155+
.Name("GridName")
156+
```
157+
Default name is "DataGrid". If there are multiple grid in single page, different names should be given. Call grid if you need like this:
158+
```javascript
159+
$(document).ready(function() {
160+
var table = $('#DataGrid').DataTable();
161+
} );
162+
```
163+
## Searching
164+
This option allows the search abilities of DataTables to be enabled or disabled. Default is "true". [Reference:](https://datatables.net/reference/option/searching)
165+
```csharp
166+
.Searching(false)
167+
```
168+
## Ordering
169+
Enable or disable ordering of columns - it is as simple as that! DataTables, by default, allows end users to click on the header cell for each column, ordering the table by the data in that column. Default is "true". [Reference:](https://datatables.net/reference/option/ordering)
170+
```csharp
171+
.Ordering(false)
172+
```
173+
## Paging
174+
DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data. Default is "true". [Reference:](https://datatables.net/reference/option/paging)
175+
```csharp
176+
.Paging(false)
177+
```
178+
## Processing
179+
Enable or disable the display of a 'processing' indicator when the table is being processed. Default is true. [Reference:](https://datatables.net/reference/option/processing)
180+
```csharp
181+
.Processing(false)
182+
```
183+
## ScrollX
184+
Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. [Reference:](https://datatables.net/reference/option/scrollX)
185+
```csharp
186+
.ScrollX(true)
187+
```
188+
## Class
189+
Default table css class is `"display nowrap dataTable dtr-inline collapsed"`. It can be replaced with other table class like bootstrap "table table-striped".
190+
```csharp
191+
.Class("table table-striped")
192+
```
193+
## Captions
194+
Adding some text on table header or footer with Captions method that:
195+
196+
```csharp
197+
.Captions("Top caption text...", "Bottom caption text...")
198+
```
199+
## Fixed Columns
200+
FixedColumns provides the option to freeze one or more columns to the left or right of a horizontally scrolling DataTable. [Reference:](https://datatables.net/reference/option/fixedColumns)
201+
```csharp
202+
.FixedColumns(leftColumns: 1, rightColumns: 3)
203+
```
204+
## Individual Column Searching
205+
With this feature, data is be searchable column by column if column searchable is not false.
206+
207+
```csharp
208+
.ColumnSearching(true)
209+
```
210+
To give class for these inputs:
211+
212+
```csharp
213+
.ColumnSearching(true, "form-control")
214+
```
215+
## Title
216+
Set column header. Default is property name.
217+
```
218+
.Title("Person Name");
219+
```
220+
Or use `DisplayAttribute` for properties.
221+
```csharp
222+
[Display(Name = "Person Name")]
223+
public string Name { get; set; }
224+
```
225+
## Format
226+
Customize datetime format with [Moment.js](https://momentjs.com/) expression.
227+
```csharp
228+
.Format("DD-MMM-Y");
229+
```
230+
Or use `DisplayFormatAttribute` for properties.
231+
```csharp
232+
[DisplayFormat(DataFormatString = "DD-MMM-Y")]
233+
public DateTime? BirthDate { get; set; }
234+
```
235+
## Template
236+
Manipulate and change display of column according to data.
237+
```csharp
238+
.Template("(data === true) ? '<span class=\"glyphicon glyphicon-ok\"></span>' : '<span class=\"glyphicon glyphicon-remove\"></span>'");
239+
```
240+
## Visible
241+
Set column visible or hidden, default is `true`.
242+
## Searchable
243+
Set column searchable or not, default is `true`.
244+
## Orderable
245+
Set column orderable or not, default is `true`.
246+
## Width
247+
Set column width percentage.
248+
## Class
249+
Set css class of column.
250+
## DefaultContent
251+
Set default value for null data.
252+
## Command
253+
Add column commands to table in a variety of ways.
254+
```csharp
255+
cols.Command(a => a.Name, "onClick").Title("Link");
256+
cols.Command(a => a.Name, "onClick", "Click").Title("Link");
257+
cols.Command(a => a.Id, "onClick", "Click", "glyphicon glyphicon-edit").Title("Edit");
258+
cols.Command(a => a.Id, "onClick", "Click", "glyphicon glyphicon-edit", "btn btn-danger btn-xs").Title("Edit");
259+
```
260+
```javascript
261+
function onClick(e) {
262+
alert(e);
76263
}
77264
```
265+
## Commands
266+
Add button groups as a commands.
267+
```csharp
268+
cols.Commands(a => a.Id, new[] { new Command("Update", "onUpdate"), new Command("Delete", "onDelete") }, "Reports").Title("Actions");
269+
cols.Commands(a => a.Id, new[] { new Command("Excel", "onDelete"), new Command("Pdf", "onUpdate") }, "Reports", "", "", "glyphicon glyphicon-export").Title("Export");
270+
```
271+
Default language is English. You can change with other languages or custumize it. Set json url parameter to Language method for other languages from [CDN](https://datatables.net/plug-ins/i18n/).
78272

79-
Then add [datatables.net](https://datatables.net/) Javascript and CSS files or links to your project.
273+
```csharp
274+
.Language("https://cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json")
275+
```
276+
Or add json file local and customize it.
80277

81-
```html
82-
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
83-
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
278+
```csharp
279+
.Language(Url.Content("/Scripts/Turkish.json"))
280+
```
281+
Json example is below:
282+
283+
```json
284+
{
285+
"sEmptyTable": "No data available in table",
286+
"sInfo": "Showing _START_ to _END_ of _TOTAL_ entries",
287+
"sInfoEmpty": "Showing 0 to 0 of 0 entries",
288+
"sInfoFiltered": "(filtered from _MAX_ total entries)",
289+
"sInfoPostFix": "",
290+
"sInfoThousands": ",",
291+
"sLengthMenu": "Show _MENU_ entries",
292+
"sLoadingRecords": "Loading...",
293+
"sProcessing": "Processing...",
294+
"sSearch": "Search:",
295+
"sZeroRecords": "No matching records found",
296+
"oPaginate": {
297+
"sFirst": "First",
298+
"sLast": "Last",
299+
"sNext": "Next",
300+
"sPrevious": "Previous"
301+
},
302+
"oAria": {
303+
"sSortAscending": ": activate to sort column ascending",
304+
"sSortDescending": ": activate to sort column descending"
305+
}
306+
}
84307
```

0 commit comments

Comments
 (0)