|
1 | 1 | @{ |
2 | 2 | ViewBag.Title = "title"; |
3 | 3 | } |
4 | | -@Html.DataTableIncludes(jqueryUi:true) |
| 4 | +@Html.DataTableIncludes(jqueryUi: true) |
| 5 | + |
5 | 6 | <script type="text/javascript" src="http://balupton.github.com/jquery-syntaxhighlighter/scripts/jquery.syntaxhighlighter.min.js"></script> |
6 | 7 | <script type="text/javascript"> $.SyntaxHighlighter.init();</script> |
7 | 8 |
|
|
10 | 11 | Nuget install-package Mvc.JQuery.Datatables |
11 | 12 | </pre> |
12 | 13 | <p> |
13 | | - In the controller: |
| 14 | + Create a controller (see <a style="color: dodgerblue;" href="https://github.com/mcintyre321/mvc.jquery.datatables/blob/master/Mvc.JQuery.Datatables.Example/Controllers/HomeController.cs">example</a>) |
14 | 15 | </p> |
15 | 16 | <pre class="highlight"> |
16 | | -public DataTablesResult<UserView> GetUsers(DataTablesParam dataTableParam) |
| 17 | +public class SomeController : Controller |
17 | 18 | { |
18 | | - var users = new List<User> |
19 | | - ( |
20 | | - Enumerable.Range(1, 100).Select(i => new User(){Id = i, Email = "user" + i + "@@gmail.com", Name = "User" + i}) |
21 | | - ).AsQueryable(); |
22 | | - |
23 | | - return DataTablesResult.Create(users, dataTableParam, user => new UserView() |
| 19 | + ... |
| 20 | + public DataTablesResult<UserView> GetUsers(DataTablesParam dataTableParam) |
24 | 21 | { |
25 | | - Id = user.Id, |
26 | | - Name = user.Name |
27 | | - }); |
| 22 | + IQueryable<User> users = ... //take a queryable from your database... |
| 23 | + var userViews = users.Select(u => new UserView(u)); //...transform it into a view object ... |
| 24 | + return DataTablesResult.Create(userViews, dataTableParam) //...and return a DataTablesResult |
| 25 | + } |
28 | 26 | } |
29 | 27 | </pre> |
30 | 28 |
|
31 | 29 | <p> |
32 | | -and in the view... |
33 | | - |
34 | | -<pre class="highlight"> |
35 | | -@@using Mvc.JQuery.Datatables |
36 | | -@@using Mvc.JQuery.Datatables.Example.Controllers |
| 30 | + and render the partial (see <a href="https://github.com/mcintyre321/mvc.jquery.datatables/blob/master/Mvc.JQuery.Datatables.Example/Views/Home/Index.cshtml">example</a>) |
37 | 31 |
|
38 | | -<link type="text/css" href="@@Url.Content("~/Content/DataTables-1.8.2/media/css/demo_table.css")" rel="stylesheet"/> |
39 | | -<script src="@@Url.Content("~/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js")" type="text/javascript"></script> |
| 32 | + <pre class="highlight"> |
| 33 | + //include these scripts |
| 34 | + <link type="text/css" href="@@Url.Content("~/Content/DataTables-1.8.2/media/css/demo_table.css")" rel="stylesheet"/> |
| 35 | + <script src="@@Url.Content("~/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js")" type="text/javascript"></script> |
40 | 36 |
|
41 | | -@@Html.Partial("DataTable", Html.DataTableVm("table-id", (HomeController h) => h.GetUsers(null))) |
| 37 | + @@Html.Partial("DataTable", Html.DataTableVm("table-id", (HomeController h) => h.GetUsers(null))) |
42 | 38 |
|
43 | | -can also use |
44 | | - |
45 | | -@@Html.Partial("DataTable", Html.DataTableVm("table-id", "/home/getusers", "Id", "Name", "Email")) |
46 | | -</pre> |
| 39 | + </pre> |
47 | 40 | </p> |
48 | 41 |
|
49 | | -<h1>Voila</h1> |
50 | | - |
| 42 | +<h1>Voila!</h1> |
51 | 43 | <div style="padding: 5px; border: 1px solid grey"> |
52 | 44 | Custom placement for Position filter: |
53 | 45 | <div id="custom-filter-placeholder-position"></div> |
54 | 46 | </div> |
55 | 47 |
|
56 | 48 | @using Mvc.JQuery.Datatables |
57 | 49 | @using Mvc.JQuery.Datatables.Example.Controllers |
| 50 | +@using Mvc.JQuery.Datatables.Models |
58 | 51 | @{ |
59 | 52 | var vm = Html.DataTableVm("table-id", (HomeController h) => h.GetUsers(null)); |
60 | 53 | //vm.JsOptions.Add("iDisplayLength", 25); |
61 | 54 | //vm.JsOptions.Add("aLengthMenu", new object[] { new[] {5, 10, 25, 250, -1} , new object[] { 5, 10, 25, 250, "All"} }); |
62 | 55 | vm.ColumnFilter = true; |
63 | 56 | vm.FilterOn("Position", new { sSelector = "#custom-filter-placeholder-position" }).Select("Engineer", "Tester", "Manager") |
64 | 57 | .FilterOn("Id").NumberRange(); |
65 | | - //.FilterOn("Number").CheckBoxes(Enum.GetNames(typeof(Numbers))); |
| 58 | + //.FilterOn("Number").CheckBoxes(Enum.GetNames(typeof(Numbers))); |
66 | 59 | vm.StateSave = true; |
67 | 60 |
|
68 | | - //vm.Language = "{ 'sUrl': '" + Url.Content("~/Content/jquery.dataTables.lang.de-DE.txt") + "' }"; |
69 | | -
|
70 | | - vm.Language = "{" + |
71 | | - " 'sProcessing': 'Bitte warten...'," + |
72 | | - " 'sLengthMenu': '_MENU_ Einträge anzeigen'," + |
73 | | - " 'sZeroRecords': 'Keine Einträge vorhanden.'," + |
74 | | - " 'sInfo': '_START_ bis _END_ von _TOTAL_ Einträgen'," + |
75 | | - " 'sInfoEmpty': '0 bis 0 von 0 Einträgen'," + |
76 | | - " 'sInfoFiltered': '(gefiltert von _MAX_ Einträgen)'," + |
77 | | - " 'sInfoPostFix': ''," + |
78 | | - " 'sSearch': 'Suchen'," + |
79 | | - " 'sUrl': ''," + |
80 | | - " 'oPaginate': {" + |
81 | | - " 'sFirst': 'Erster'," + |
82 | | - " 'sPrevious': 'Zurück'," + |
83 | | - " 'sNext': 'Weiter'," + |
84 | | - " 'sLast': 'Letzter'" + |
85 | | - " }" + |
86 | | - "}"; |
| 61 | + |
| 62 | + if (Request.QueryString["lang"] == "de") |
| 63 | + { |
| 64 | + //vm.Language = "{ 'sUrl': '" + Url.Content("~/Content/jquery.dataTables.lang.de-DE.txt") + "' }"; |
| 65 | + vm.Language = new Language |
| 66 | + { |
| 67 | + sProcessing = "Bitte warten...", |
| 68 | + sLengthMenu = "_MENU_ Einträge anzeigen", |
| 69 | + sZeroRecords = "Keine Einträge vorhanden.", |
| 70 | + sInfo = "_START_ bis _END_ von _TOTAL_ Einträgen", |
| 71 | + sInfoEmpty = "0 bis 0 von 0 Einträgen", |
| 72 | + sInfoFiltered = "(gefiltert von _MAX_ Einträgen)", |
| 73 | + sInfoPostFix = "", |
| 74 | + sSearch = "Suchen", |
| 75 | + sUrl = "", |
| 76 | + oPaginate = new Paginate() |
| 77 | + { |
| 78 | + sFirst = "Erster", |
| 79 | + sPrevious = "Zurück", |
| 80 | + sNext = "Weiter", |
| 81 | + sLast = "Letzter" |
| 82 | + } |
| 83 | + }.ToJsonString(); |
| 84 | + } |
87 | 85 | } |
88 | 86 | @Html.Partial("DataTable", vm) |
89 | 87 |
|
| 88 | +<br /> |
90 | 89 |
|
91 | 90 |
|
92 | 91 |
|
93 | 92 |
|
94 | 93 |
|
95 | | - |
96 | | - |
| 94 | +<div> |
| 95 | + @if (Request.QueryString["lang"] != "de") |
| 96 | + { |
| 97 | + <a href="?lang=de#language-switch" id="language-switch">See table with Language settings applied</a> |
| 98 | + } |
| 99 | + else |
| 100 | + { |
| 101 | + <a href="/#language-switch" id="language-switch">Turn off language settings</a> |
| 102 | + } |
| 103 | +</div> |
97 | 104 |
|
98 | 105 |
|
0 commit comments