From 3c607871a1574488cea86511061084bec46682ae Mon Sep 17 00:00:00 2001 From: Alexandre Verdon Date: Wed, 26 Apr 2023 09:56:00 +0200 Subject: [PATCH] adding dom option as per https://datatables.net/reference/option/dom and allow separated rendering of html & script --- DatatableJS.Net/Builders/GridBuilder.cs | 1 + DatatableJS.Net/JSHelper.cs | 82 +++++++++++++++++-------- DatatableJS/Builders/GridBuilder.cs | 24 +++++++- DatatableJS/Helpers/GridHelper.cs | 10 ++- DatatableJS/JSHelper.cs | 79 +++++++++++++++--------- DatatableJS/Models/GridModel.cs | 2 + 6 files changed, 143 insertions(+), 55 deletions(-) diff --git a/DatatableJS.Net/Builders/GridBuilder.cs b/DatatableJS.Net/Builders/GridBuilder.cs index f6795f6..87e3105 100644 --- a/DatatableJS.Net/Builders/GridBuilder.cs +++ b/DatatableJS.Net/Builders/GridBuilder.cs @@ -32,6 +32,7 @@ public class GridBuilder internal bool _processing { get; private set; } = true; internal bool _scrollX { get; private set; } internal bool _stateSave { get; set; } + internal string _dom { get; set; } internal bool _selectEnable { get; private set; } internal SelectStyle _selectStyle { get; private set; } diff --git a/DatatableJS.Net/JSHelper.cs b/DatatableJS.Net/JSHelper.cs index b91cce2..cfa8e9c 100644 --- a/DatatableJS.Net/JSHelper.cs +++ b/DatatableJS.Net/JSHelper.cs @@ -70,6 +70,25 @@ private static string GetEnumDescription(this Enum enumValue) /// /// public static MvcHtmlString Render(this GridBuilder grid) + { + var html = RenderHtmlString(grid); + var script = RenderScriptString(grid); + return new MvcHtmlString(html+script); + } + + + public static MvcHtmlString RenderHtml(this GridBuilder grid) + { + + return new MvcHtmlString(RenderHtmlString(grid)); + } + public static MvcHtmlString RenderScript(this GridBuilder grid) + { + + return new MvcHtmlString(RenderScriptString(grid)); + } + + private static string RenderHtmlString(this GridBuilder grid) { var tfoot = grid._columnSearching ? $@" @@ -81,6 +100,27 @@ public static MvcHtmlString Render(this GridBuilder grid) var tfootInit = string.Empty; + + + var html = $@" + + + + {string.Join(Environment.NewLine, grid._columns.Select(a => string.Format("", a.Title)))} + + + {tfoot} +
{0}
+ "; + + return html; + } + + + private static string RenderScriptString(this GridBuilder grid) + { + var tfootInit = string.Empty; + var initFootSearch = grid._stateSave ? $@"var dtable = $('#{grid._name}').DataTable(); var dState = dtable.state.loaded(); @@ -170,15 +210,7 @@ public static MvcHtmlString Render(this GridBuilder grid) $"lengthMenu: {string.Format("[[{0}], [{1}]]", string.Join(", ", grid._lengthMenuValues), string.Join(", ", grid._lengthMenuDisplayedTexts.Select(a => string.Concat(@"""", a, @""""))))}," ; - var html = $@" - - - - {string.Join(Environment.NewLine, grid._columns.Select(a => string.Format("", a.Title)))} - - - {tfoot} -
{0}
+ var script = $@" "; - return new MvcHtmlString(html); + return script; } private static string GetDataStr(this GridBuilder grid) @@ -273,3 +306,4 @@ private static string GetDataStr(this GridBuilder grid) } } } + diff --git a/DatatableJS/Builders/GridBuilder.cs b/DatatableJS/Builders/GridBuilder.cs index 1be73cf..5aaa2f1 100644 --- a/DatatableJS/Builders/GridBuilder.cs +++ b/DatatableJS/Builders/GridBuilder.cs @@ -1,6 +1,8 @@ -using System; +using Microsoft.AspNetCore.Mvc.Rendering; +using System; using System.Collections.Generic; using System.Linq; +using static System.Net.WebRequestMethods; namespace DatatableJS { @@ -32,12 +34,14 @@ public class GridBuilder internal bool _processing { get; private set; } = true; internal bool _scrollX { get; private set; } internal bool _stateSave { get; set; } + internal string _dom { get; private set; } internal bool _selectEnable { get; private set; } internal SelectStyle _selectStyle { get; private set; } internal SelectItems _selectItems { get; private set; } internal bool _selectInfo { get; private set; } internal bool _selectToggleable { get; private set; } + public IHtmlHelper HtmlHelper { get; } internal List _columns = new List(); internal List _filters = new List(); @@ -47,6 +51,11 @@ public class GridBuilder internal LanguageModel _language = new LanguageModel(); internal ColReorderModel _colReorder = new ColReorderModel(); + public GridBuilder(IHtmlHelper htmlHelper) + { + HtmlHelper = htmlHelper; + } + /// /// Default name is "DataGrid". /// @@ -233,6 +242,19 @@ public GridBuilder Data(string data) return this; } + + /// + /// Dom allow to control position of datatable elements + /// + /// + /// + /// + public GridBuilder Dom(string dom) + { + _dom = dom; + return this; + } + /// /// Set css class of table. /// diff --git a/DatatableJS/Helpers/GridHelper.cs b/DatatableJS/Helpers/GridHelper.cs index 8d2b5a2..7d4c71b 100644 --- a/DatatableJS/Helpers/GridHelper.cs +++ b/DatatableJS/Helpers/GridHelper.cs @@ -1,4 +1,5 @@ using Microsoft.AspNetCore.Razor.TagHelpers; +using static System.Net.WebRequestMethods; namespace DatatableJS { @@ -38,6 +39,12 @@ public class GridHelper : TagHelper /// public bool StateSave { get; set; } + /// + /// Enable control over displayed elements + /// + /// + public string Dom { get; set; } + /// /// Process /// @@ -58,7 +65,8 @@ public override void Process(TagHelperContext context, TagHelperOutput output) Searching = Searching, Processing = Processing, ScrollX = ScrollX, - StateSave = StateSave + StateSave = StateSave, + Dom = Dom }; context.Items.Add("DataGrid", grid); diff --git a/DatatableJS/JSHelper.cs b/DatatableJS/JSHelper.cs index 08502f7..aed4367 100644 --- a/DatatableJS/JSHelper.cs +++ b/DatatableJS/JSHelper.cs @@ -1,8 +1,11 @@ using Microsoft.AspNetCore.Html; using Microsoft.AspNetCore.Mvc.Rendering; +using Microsoft.AspNetCore.Mvc.ViewFeatures; using Newtonsoft.Json; using System; +using System.Collections.Generic; using System.Linq; +using System.Runtime.CompilerServices; namespace DatatableJS { @@ -29,7 +32,7 @@ public JSHelper(IHtmlHelper helper) /// public GridBuilder Datatable() where T : class { - return new GridBuilder(); + return new GridBuilder(_htmlHelper); } } @@ -55,15 +58,39 @@ public static JSHelper JS(this IHtmlHelper helper) /// /// public static IHtmlContent Render(this GridBuilder grid) + { + return new HtmlString(RenderHtml(grid).ToString() + RenderScript(grid).ToString()); + } + + public static IHtmlContent RenderHtml(this GridBuilder grid) { var tfoot = grid._columnSearching ? - $@" + $@" {string.Join(Environment.NewLine, grid._columns.Select(a => string.Format("{0}", a.Searchable ? $"" : "")))} " - : string.Empty; + : string.Empty; + + + var html = $@" + + + + {string.Join(Environment.NewLine, grid._columns.Select(a => string.Format("", a.Title)))} + + + {tfoot} +
{0}
"; + + + return new HtmlString(html); + } + + + public static IHtmlContent RenderScript(this GridBuilder grid) + { var tfootInit = string.Empty; var initFootSearch = grid._stateSave ? @@ -146,7 +173,7 @@ public static IHtmlContent Render(this GridBuilder grid) fixedColumnsRight: {grid._colReorder.FixedColumnsRight}, order: {grid._colReorder.Order}, realtime: {grid._colReorder.RealTime.ToLowString()} - }}," + }}," : $"colReorder: {grid._colReorder.ColReorder.ToLowString()},"; var lengthMenu = ( @@ -155,16 +182,8 @@ public static IHtmlContent Render(this GridBuilder grid) $"lengthMenu: {string.Format("[[{0}], [{1}]]", string.Join(", ", grid._lengthMenuValues), string.Join(", ", grid._lengthMenuDisplayedTexts.Select(a => string.Concat(@"""", a, @""""))))}," ; - var html = $@" - - - - {string.Join(Environment.NewLine, grid._columns.Select(a => string.Format("", a.Title)))} - - - {tfoot} -
{0}
- "; - return new HtmlString(html); + return new HtmlString(script); } + private static string GetDataStr(this GridBuilder grid) { var filters = string.Format("d.filters = {0}{1}", JsonConvert.SerializeObject(grid._filters), string.IsNullOrEmpty(grid._data) ? string.Empty : ","); diff --git a/DatatableJS/Models/GridModel.cs b/DatatableJS/Models/GridModel.cs index 59670e0..9815692 100644 --- a/DatatableJS/Models/GridModel.cs +++ b/DatatableJS/Models/GridModel.cs @@ -14,6 +14,8 @@ public class GridModel internal bool ScrollX { get; set; } internal bool StateSave { get; set; } + internal string Dom { get; set; } + internal List Columns { get; set; } internal List Filters { get; set; } internal List Orders { get; set; }