时间戳

首页 > 解决方案 > 在分页和每页显示结果中选择全部，同时使用 JQuery 禁用和启用按钮

javascript - 在分页和每页显示结果中选择全部，同时使用 JQuery 禁用和启用按钮

问题描述

我有一个全选选项，带有一个按钮。加载时按钮被禁用。如果您选择在列表中选择全部或两个或更多选择项，则该按钮将被禁用。但是，我有分页和显示表中要显示的许多项目。有没有办法可以持久保存它，以便它在分页以及显示编号更改时工作？

这是我的代码：

//Disable Top Verify Button if two or more checkboxes are selected.
    $(document)('.verifyshipment-btn').prop('disabled', true);
    $(document).on(".individual").on("click", function () {
        if ($(".individual:checked").length > 1) {
            $('.verifyshipment-btn').prop('disabled', false);
        }
        else {
            $('.verifyshipment-btn').prop('disabled', true);
        }
    });

    //Select All
    $('.verifyshipment-btn').prop('disabled', true);
    $(document).on(".selectall").click(function () {
        if ($(".individual:checked").length > 1) {
            $('.verifyshipment-btn').prop('disabled', false);
        }
        else {
            $('.verifyshipment-btn').prop('disabled', true);
        }
    });

分页和显示选项

$(document).on("click",
        "#indexPager a",
        function() {
            if ($(this).parent().hasClass('disabled') || $(this).parent().hasClass('active'))
                return false;
            $.ajax({
                url: $(this).attr("href"),
                type: 'GET',
                cache: false,
                success: function(result) {
                    $('#tableContainer').html(result);
                    addBootstrapTooltips("#tableContainer");
                }
            });
            return false;
        });
    $(document).on("change",
        "#pageSizeSelector",
        function() {
            var selectedValue = $(this).val();
            $.ajax({
                url: selectedValue,
                type: 'GET',
                cache: false,
                success: function(result) {
                    $('#tableContainer').html(result);
                    addBootstrapTooltips("#tableContainer");
                }
            });
        });

标签： javascriptc#jqueryasp.net-mvc

解决方案

正如之前的评论者所指出的，你真的有两个选择：

(1) 将数据保存在您的应用程序服务器上（通过类似会话 cookie 的方式），然后让您的客户端在需要时向服务器查询该信息。

(2) 将数据保存在浏览器的会话/本地存储中，并在需要时从那里检索。

如果您需要此选项跨设备持续存在（即，用户在您提供的交互流程的中间切换计算机），那么最好的方法是（1）。但是，如果您不是后端开发人员（例如，您是否知道/有权创建/操作数据库和创建新的 api 端点？），向后端添加额外的数据可能会很痛苦。

对于其他一切，我建议使用（2），特别是会话存储，它会在用户会话结束时自动垃圾收集数据（在重新加载后幸存下来，但在浏览器关闭时被删除）。如果您需要更多手动数据管理，您可以使用浏览器的本地存储。

推荐阅读