From fffac9164d20fe10db70057854d0dfa43ac84851 Mon Sep 17 00:00:00 2001 From: Paul van Eyk Date: Fri, 18 Jul 2014 10:53:33 +1200 Subject: [PATCH] Provide example of using initial search values --- .../Controllers/HomeController.cs | 5 ++ .../Mvc.JQuery.Datatables.Example.csproj | 8 ++- .../Views/Home/InitialSearch.cshtml | 66 +++++++++++++++++++ .../Home/_ExampleTableInitialSearch.cshtml | 65 ++++++++++++++++++ 4 files changed, 141 insertions(+), 3 deletions(-) create mode 100644 Mvc.JQuery.Datatables.Example/Views/Home/InitialSearch.cshtml create mode 100644 Mvc.JQuery.Datatables.Example/Views/Home/_ExampleTableInitialSearch.cshtml diff --git a/Mvc.JQuery.Datatables.Example/Controllers/HomeController.cs b/Mvc.JQuery.Datatables.Example/Controllers/HomeController.cs index 8ebbc91..35e65a6 100644 --- a/Mvc.JQuery.Datatables.Example/Controllers/HomeController.cs +++ b/Mvc.JQuery.Datatables.Example/Controllers/HomeController.cs @@ -16,6 +16,11 @@ public ActionResult Index() return View(); } + public ActionResult InitialSearch() + { + return View(); + } + public ActionResult JSUnitTests() { return View(); diff --git a/Mvc.JQuery.Datatables.Example/Mvc.JQuery.Datatables.Example.csproj b/Mvc.JQuery.Datatables.Example/Mvc.JQuery.Datatables.Example.csproj index 8dde857..f6e23c7 100644 --- a/Mvc.JQuery.Datatables.Example/Mvc.JQuery.Datatables.Example.csproj +++ b/Mvc.JQuery.Datatables.Example/Mvc.JQuery.Datatables.Example.csproj @@ -22,9 +22,9 @@ 4.0 - - - + enabled + enabled + false ..\ true true @@ -581,6 +581,8 @@ + + diff --git a/Mvc.JQuery.Datatables.Example/Views/Home/InitialSearch.cshtml b/Mvc.JQuery.Datatables.Example/Views/Home/InitialSearch.cshtml new file mode 100644 index 0000000..fa4b933 --- /dev/null +++ b/Mvc.JQuery.Datatables.Example/Views/Home/InitialSearch.cshtml @@ -0,0 +1,66 @@ +@{ + ViewBag.Title = "Mvc.Jquery.Datatables"; +} + + + + +

Strongly typed datatable example

+
+Nuget install-package Mvc.JQuery.Datatables
+    
+Nuget install-package EmbeddedResourceVirtualPathProvider or Nuget install-package Mvc.JQuery.Datatables.Templates
+
+
+

+ Create a controller (see example) +

+
+public class SomeController : Controller 
+{
+    ...
+    public DataTablesResult<UserView> GetUsers(DataTablesParam dataTableParam)
+    {
+        IQueryable<User> users = ... //take a queryable from your database...
+        var userViews = users.Select(u => new UserView(u)); //...transform it into a view object ...
+        return DataTablesResult.Create(userViews, dataTableParam)  //...and return a DataTablesResult
+    }
+}
+
+ +

+ and render the partial (see example) + + 

+        //include these scripts
+        <link type="text/css" href="@@Url.Content("~/Content/DataTables-1.8.2/media/css/demo_table.css")" rel="stylesheet"/>
+        <script src="@@Url.Content("~/Scripts/DataTables-1.8.2/media/js/jquery.dataTables.js")" type="text/javascript"></script>
+
+        @@Html.Partial("DataTable", Html.DataTableVm("table-id", (HomeController h) => h.GetUsers(null)))
+
+
+

+ +

Voila!

+
+ Custom placement for Position filter: +
+ Custom placement for hidden Salary filter: +
+
+ +@Html.Partial("_ExampleTableInitialSearch") +
+ +
+ @if (Request.QueryString["lang"] != "de") + { + See table with Language settings applied + } + else + { + Turn off language settings + } +
+ + diff --git a/Mvc.JQuery.Datatables.Example/Views/Home/_ExampleTableInitialSearch.cshtml b/Mvc.JQuery.Datatables.Example/Views/Home/_ExampleTableInitialSearch.cshtml new file mode 100644 index 0000000..4b9b41e --- /dev/null +++ b/Mvc.JQuery.Datatables.Example/Views/Home/_ExampleTableInitialSearch.cshtml @@ -0,0 +1,65 @@ +@using Mvc.JQuery.Datatables +@using Mvc.JQuery.Datatables.Example.Controllers +@using Mvc.JQuery.Datatables.Models +@using Mvc.JQuery.Datatables.Serialization + + + + + + + + + + + + +@{ + var vm = Html.DataTableVm("table-id", (HomeController h) => h.GetUsers(null)); + //vm.JsOptions.Add("iDisplayLength", 25); + //vm.JsOptions.Add("aLengthMenu", new object[] { new[] {5, 10, 25, 250, -1} , new object[] { 5, 10, 25, 250, "All"} }); + + vm.JsOptions.Add("fnCreatedRow", new Raw(@"function( nRow, aData, iDataIndex ) { + $(nRow).attr('data-id', aData[0]); + }")); + vm.ColumnFilter = true; + vm + .FilterOn("Position", new { sSelector = "#custom-filter-placeholder-position" }, new { sSearch = "Tester" }).Select("Engineer", "Tester", "Manager") + .FilterOn("Id", null, new { sSearch = "2~4", bEscapeRegex = false }).NumberRange() + .FilterOn("IsAdmin", null, new { sSearch = "False" }).Select("True","False") + .FilterOn("Salary", new { sSelector = "#custom-filter-placeholder-salary" }, new { sSearch = "1000~100000" }).NumberRange(); + //.FilterOn("Number").CheckBoxes(Enum.GetNames(typeof(Numbers))); + vm.StateSave = false; + //vm.DrawCallback = "drawCallback"; + + if (Request.QueryString["lang"] == "de") + { + //vm.Language = "{ 'sUrl': '" + Url.Content("~/Content/jquery.dataTables.lang.de-DE.txt") + "' }"; + vm.Language = new Language + { + sProcessing = "Bitte warten...", + sLengthMenu = "_MENU_ Einträge anzeigen", + sZeroRecords = "Keine Einträge vorhanden.", + sInfo = "_START_ bis _END_ von _TOTAL_ Einträgen", + sInfoEmpty = "0 bis 0 von 0 Einträgen", + sInfoFiltered = "(gefiltert von _MAX_ Einträgen)", + sInfoPostFix = "", + sSearch = "Suchen", + sUrl = "", + oPaginate = new Paginate() + { + sFirst = "Erster", + sPrevious = "Zurück", + sNext = "Weiter", + sLast = "Letzter" + } + }.ToJsonString(); + } +} + + +@Html.Partial("DataTable", vm)