Как использовать localstorage в datatable, чтобы сохранить раскрывающееся значение «показать записи» в. net основном приложении - PullRequest
Новая
       4

Как использовать localstorage в datatable, чтобы сохранить раскрывающееся значение «показать записи» в. net основном приложении

0 голосов
/ 27 мая 2020

У меня есть приложение, в котором я реализовал datatable. У меня есть несколько вкладок, как вы можете видеть в представлении. В раскрывающемся списке из отображаемых записей, если я выберу 10 на вкладке «Все», а затем перейду на другую вкладку, ip wait и изменю значение раскрывающегося списка на 20. Теперь, если я go вернусь к «Все», значение раскрывающегося списка не сохраняет значение 10. Оно изменено на значение по умолчанию 5. Кажется, что if($.fn.DataTable.isDataTable('#ip')) { $('#ip').DataTable().destroy(true); var table = $('<table class="table" id="ip"></table>');$('.divContainerIp').append(table);} восстанавливает таблицу в исходное состояние в DOM, удаляя все улучшения DataTables, изменения в структуре DOM таблицы и прослушиватели событий.

Есть ли другие способ, где я могу сохранить значение?

Просмотр 

<div class="divContainerIp">        
                <ul class="separated">
                    <li>
                        <a class="wMenu" asp-controller="waitlist" data-controller="waitlist">All</a>
                    </li>
                    <li>
                        <a class="wMenu" asp-controller="ipwait" data-controller="ipwait">IP Wait</a>
                    </li>
                </ul>         
            <br />
            <table class="table" id="ip"></table>      
        </div>

JQuery

$(".wMenu").on('click', function (e) {
            e.preventDefault();
            var controllerName = e.currentTarget.dataset["controller"];
            loadMergedUiDataTable(controllerName);
        });


        function loadMergedUiDataTable(controllerName) {
            var entityName = controllerName.toLowerCase();
            var entityOption = getRequiredEntityOption(entityName);
            var entityCols = getSummaryColumns(entityOption);
            var entityColDefs = getColumnDefs(entityOption);

            var isAsc = isAscendingOrder(entityOption);

            var entityDtSettings = getDataTableSettings(entityCols, entityColDefs, controllerName + '/GetDataAsync', isAsc, false, entityName);

            if ($.fn.DataTable.isDataTable('#ip')) {
               $('#ip').DataTable().destroy(true);
                var table = $('<table class="table" id="ip"></table>');
                $('.divContainerIp').append(table);
            }
            $mergedEntityDataTable = $("#ip").DataTable(entityDtSettings);

        });

        function getDataTableSettings(columns, columnDefs, relativeUrl, isAsc, rowHighlight, ctrlTitle) { 
            return {
                "processing": true,
                "serverSide": true,
                paging: true,
                searching: false,
                pageLength: 5,
                stateSave: true,
                order: [[0, isAsc ? "asc" : "desc"]],
                lengthMenu: [5, 10, 15, 20, 25, 50, 100],
                language: {
                    emptyTable: "No results found"
                },
         ajax: {
                 url: relativeUrl,
                data: function (data) {
                    // manipulate data used in ajax request prior to server call
                    var sortColName = data.columns[data.order[0]["column"]].data;
                    delete data.columns;
                    sortColName = sortColName == "serviceTypeMapped" ? "specialty" : sortColName;
                    data.sortColName = sortColName;
                    data.user = getQueryStringByName('user');
                    data.nhis = getNhiNumbersString();
                }
            },
            columns: columns,
            columnDefs: columnDefs,
            "rowCallback": function (row, data) {
                if (rowHighlight) {
                    if (data["status"] == "Current") {
                        row.className = row.className +  " rowHighlight";
                    }
                }
            }
            };
        }
...