_DataTableScript.cshtml

@using Elect.Web.DataTable.Models.Constants
@using Elect.Web.DataTable.Utils.DataTableModelUtils
@using Elect.Web.IUrlHelperUtils
@using Newtonsoft.Json.Linq
@model Elect.Web.DataTable.Models.DataTableModel

<script type="text/javascript">
    $(function() {
        var $table = $('#@Model.Id');

        var $dataTable = null;

        @{
            // Handle Default Values for Options
            Model.IsDevelopMode = Model.IsDevelopMode ?? false;
            Model.IsAutoWidthColumn = Model.IsAutoWidthColumn ?? true;
            Model.IsResponsive = Model.IsResponsive ?? false;
            Model.IsEnableColVis = Model.IsEnableColVis ?? true;
            Model.IsSaveState = Model.IsSaveState ?? true;
            Model.IsScrollX = Model.IsScrollX ?? true;
            Model.IsEnableColReorder = Model.IsEnableColReorder ?? true;
            Model.IsShowFooter = Model.IsShowFooter ?? false;
            Model.IsShowPageSize = Model.IsShowPageSize ?? true;
            Model.IsShowGlobalSearchInput = Model.IsShowGlobalSearchInput ?? true;
            Model.IsUseTableTools = Model.IsUseTableTools ?? true;
            Model.IsHideHeader = Model.IsHideHeader ?? false;
            Model.IsUseColumnFilter = Model.IsUseColumnFilter ?? true;
            Model.IsDeferRender = Model.IsDeferRender ?? true;

            var options = new JObject
            {
                [PropertyConstants.Sorting] = new JRaw(Model.GetColumnSortDefine()),
                [PropertyConstants.IsProcessing] = false,
                [PropertyConstants.IsServerSide] = true,
                [PropertyConstants.IsFilter] = Model.IsShowGlobalSearchInput,
                [PropertyConstants.Dom] = Model.Dom,
                [PropertyConstants.IsResponsive] = Model.IsResponsive,
                [PropertyConstants.IsAutoWidth] = Model.IsAutoWidthColumn,
                [PropertyConstants.AjaxSource] = Model.AjaxUrl,
                [PropertyConstants.ColumnDefine] = new JRaw(Model.GetColumnDefine()),
                [PropertyConstants.SearchCols] = Model.GetColumnSearchableDefine(),
                [PropertyConstants.DeferRender] = Model.IsDeferRender,
                [PropertyConstants.LengthMenuDefine] = Model.LengthMenu != null ? new JRaw(Model.LengthMenu) : new JRaw(string.Empty),
                [PropertyConstants.Language] = new JObject
                {
                    [PropertyConstants.SearchSelector] = "_INPUT_",
                    [PropertyConstants.LengthMenuSelector] = "_MENU_",
                    [PropertyConstants.SearchPlaceholder] = "Search...",
                    [PropertyConstants.LengthMenu] = "Display _MENU_ records",
                    [PropertyConstants.Info] = "Displaying _START_ - _END_ of _TOTAL_ records",
                    [PropertyConstants.InfoEmpty] = "Empty",
                    [PropertyConstants.InfoFiltered] = "(filtered from _MAX_ records)",
                    [PropertyConstants.Paginate] = new JObject
                    {
                        [PropertyConstants.First] = "<<",
                        [PropertyConstants.Previous] = "<",
                        [PropertyConstants.Next] = ">",
                        [PropertyConstants.Last] = ">>",
                    },
                },
                [PropertyConstants.ScrollX] = Model.IsScrollX == true, // Scroll X when witdh not enough
                [PropertyConstants.StateSave] = Model.IsSaveState == true, // Save last state
                [PropertyConstants.ColReorder] = Model.IsEnableColReorder == true, // Enable re-order col
            };

            // Default Size
            if (Model.PageSize.HasValue)
            {
                options[PropertyConstants.DisplayLength] = Model.PageSize;
            }

            // Language Code
            if (!string.IsNullOrWhiteSpace(Model.LanguageCode))
            {
                options[PropertyConstants.LanguageCode] = new JRaw(Model.LanguageCode);
            }

            // Draw Call back function
            if (!string.IsNullOrWhiteSpace(Model.DrawCallbackFunctionName))
            {
                options[PropertyConstants.FnDrawCallback] = new JRaw(Model.DrawCallbackFunctionName);
            }

            // Footer Call back function
            if (!string.IsNullOrWhiteSpace(Model.FooterCallbackFunctionName))
            {
                options[PropertyConstants.FnFooterCallback] = new JRaw(Model.FooterCallbackFunctionName);
            }

            // Server Request
            options[PropertyConstants.FnServerData] = new JRaw(
                "function(sSource, aoData, fnCallback) { "
                + (Model.IsDevelopMode == true ? $"    console.log('[DataTable {Model.Id}] URL: ', sSource);" : string.Empty)
                + (Model.IsDevelopMode == true ? $"    console.log('[DataTable {Model.Id}] Request: ', aoData);" : string.Empty)
                + "    var ajaxOptions = { 'dataType': 'json', 'type': 'POST', 'url': sSource, 'data': aoData, 'success': fnCallback};"
                + (Model.IsDevelopMode == true ? "ajaxOptions['success'] = function(data){"
                                                 + $"    console.log('[DataTable {Model.Id}] Response', data);"
                                                 + "    if(fnCallback && typeof fnCallback === 'function'){"
                                                 + "        fnCallback(data)"
                                                 + "    }"
                                                 + "};"
                    : string.Empty)
                + ((Model.IsEnableColReorder != true)
                    ? string.Empty
                    : "var currDt = $dataTable || this;"
                      + "aoData.push({name: '" + PropertyConstants.ColReorderIndexs + "',value: currDt.api().colReorder.order()});")
                + (string.IsNullOrWhiteSpace(Model.BeforeSendFunctionName) ? string.Empty : $"{Model.BeforeSendFunctionName}(aoData);")
                + (string.IsNullOrWhiteSpace(Model.AjaxErrorHandler) ? string.Empty : "ajaxOptions['error'] = " + Model.AjaxErrorHandler + "; ")
                + "    $.ajax(ajaxOptions);" +
                "}");

            // Tools
            if (Model.IsUseTableTools == true)
            {
                options[PropertyConstants.TableTools] = new JRaw("{ 'sSwfPath': '" + Url.AbsoluteContent("https://cdnjs.cloudflare.com/ajax/libs/datatables-tabletools/2.1.5/swf/copy_csv_xls_pdf.swf") + "' }");

                var tools = Model.IsEnableColVis == true ? "{extend: 'colvis', text: 'Columns', clasName: ''}," : string.Empty;

                //tools += "'copy', 'excel', 'csv', 'pdf', 'print'";

                options[PropertyConstants.Buttons] = new JRaw($"[{tools}]");
            }

            // Additional Option
            if (Model.AdditionalOptions.Any())
            {
                foreach (var jsOption in Model.AdditionalOptions)
                {
                    options[jsOption.Key] = new JRaw(jsOption.Value);
                }
            }
        }

        var dataTableOptions = @Html.Raw(options.ToString(Newtonsoft.Json.Formatting.Indented));

        // Save State Handle
        @if (Model.IsSaveState == true)
        {
            <text>
                dataTableOptions.stateSaveParams = function(settings, data) {

                    data.search.search = "";

                    for (var i = 0; i < data.columns.length; i++) {
                        data.columns[i].search.search = "";
                    }
                    return true;
                }
                dataTableOptions.stateSaveCallback = function(settings, data) {
                    var key = 'Elect.Web.DataTable_' + settings.sInstance;
                    var sData = JSON.stringify(data);
                    localStorage.setItem(key, sData);
                }

                dataTableOptions.stateLoadCallback = function(settings) {
                    var key = 'Elect.Web.DataTable_' + settings.sInstance;
                    var sData = localStorage.getItem(key);
                    var data = JSON.parse(sData);
                    return data;
                }
            </text>
        }

        // Draw Call back function
        dataTableOptions.fnDrawCallback = function(oSettings) {
            // Logic before run custom method

            @if (!string.IsNullOrWhiteSpace(Model.DrawCallbackFunctionName))
            {
                <text>
                    var fn = window['@Model.DrawCallbackFunctionName'];
                    if (typeof fn === 'function') {
                        fn(oSettings);
                    }
                </text>
            }
        }
        
        // Re-order
        @if (Model.IsEnableColReorder == true)
        {
            <text>
                dataTableOptions.colReorder =
                {
                    fnReorderCallback: function() {
                        var currDt = $dataTable || this;
                        currDt.api().draw();
                    }
                };
            </text>
        }

        // Init Complete
        dataTableOptions.initComplete = function(settings, json) {
            // Logic before run custom method

            @if (!string.IsNullOrWhiteSpace(Model.InitCompleteFunctionName))
            {
                <text>
                    var fn = window['@Model.InitCompleteFunctionName'];
                    if (typeof fn === 'function') {
                        fn(settings, json);
                    }
                </text>
            }
        };

        // Init DataTable
        $dataTable = $table.dataTable(dataTableOptions);

        // Col filters
        @if (Model.IsUseColumnFilter == true)
        {
            <text>
                $dataTable.columnFilter(@Html.Raw(Model.ColumnFilterGlobalConfig));
            </text>
        }

        // Responsive Resize Callback
        @if (Model.IsResponsive == true && !string.IsNullOrWhiteSpace(Model.ResponsiveResizeCallbackFunctionName))
        {
            <text>
                $dataTable.api().on('responsive-resize',
                    function(e, datatable, columns) {
                        var fn = window['@Model.ResponsiveResizeCallbackFunctionName'];
                        if (typeof fn === 'function') {
                            fn(e, datatable, columns);
                        }
                    });
            </text>
        }

        // Clear State Button Support
        @if (Model.IsSaveState == true)
        {
            <text>
                $dataTable.api().button().add(0,
                    {
                        action: function(e, dt, button, config) {
                            dt.state.clear();
                            window.location.reload();
                        },
                        text: 'Reset Setting',
                        className: 'btn'
                    });
            </text>
        }

        // Window Resize Callback
        window.addEventListener('resize',
            function(event) {
                $.fn.dataTable.tables({ visible: true, api: true }).columns.adjust();
            });

        // Get Data
        $dataTable.getDataAt = function(row, index) {
            @if (Model.IsEnableColReorder == true)
            {
                <text>
                    var colIndexs = $dataTable.api().colReorder.order();
                    index = colIndexs.indexOf(index);
                </text>
            }
            return row[index];
        }

        // Global Variable
        @if (!string.IsNullOrWhiteSpace(Model.GlobalJsVariableName))
        {
            <text>
                window['@Model.GlobalJsVariableName'] = $dataTable;
            </text>
        }

        @if (Model.IsDevelopMode == true)
        {
            <text>
                console.log('[DataTable @Model.Id] Configuration', dataTableOptions);
            </text>
        }

    });
</script>