时间戳

首页 > 解决方案 > Paginationjs 的 Ajax 调用忽略文本字段值以进行过滤

javascript - Paginationjs 的 Ajax 调用忽略文本字段值以进行过滤

问题描述

我正在运行一个名为 Paginationjs 的 jQuery 插件。也涉及下划线，但实际上这不是这篇文章的内容。

我想添加一个文本过滤器，以便服务器可以在发送响应之前进行过滤。这是代码：

$(function() {
    $('#pagination-container').pagination({
        dataSource: 'pagination/api',
        locator: 'data',
        totalNumberLocator: function(response) {
            // you can return totalNumber by analyzing response content
            return response.totalAmount;
        },
        alias: {
            pageNumber: 'pageNum',
            pageSize: 'limit'
        },
        pageSize: 5,
        ajax: {
            url : 'pagination/api',
            data: {
                filter : $('#filter').val()
            }
        },
        callback: function(data, pagination) {              
            var template = _.template($('#template-demo').html());
            var html = template({data: data});

            $('#data-container').html(html);
        }
    });
});

每当我更改页面时，都会触发 ajax 调用，并将参数 filter、pageNum 和 limit 附加到 url。

该 url 中的过滤器值在页面更改期间保持不变：空。即使我在带有 ID“过滤器”的文本字段中输入内容，它仍然是空的。

这个插件需要名为 dataSource 的设置，所以我不得不在那里使用 url 以及名为 url 的 ajax 设置内部。

有趣的事实：当我在该文本字段中输入内容并在 Firefox 上按 F5 时，浏览器会在刷新后将该内容保留在该字段中，并将输入的值发送到服务器。然后设置 url 参数“filter”的值。但是，当我更改值并更改页面时，它仍然是自网站刷新以来的相同值。

是否有任何解决方法来实现这一目标？

PS：我无法使用标签 paginationjs，因为我的声誉低于 1500。

标签： javascriptjqueryajaxpagination

解决方案

因此，由于 Paginationjs 正在后台初始化所有 url，而无法按照我上面的代码中看到的方式更改它，所以这里有一个解决方案。

我添加了一个按钮以在单击后重新初始化 Paginationjs。这样，我就不需要使用任何 Keypress-Event 向服务器发送无数的 ajax 请求。我还更改了文本字段的 ID。

通过重新初始化它，过滤器值将与它的值一起附加到 dataSource 参数。不再需要 Ajax 设置。

$(function() {
    var paginationSettings = {
        dataSource: 'pagination/api',
        locator: 'data',
        pageSize: 5,
        totalNumberLocator: function(response) {
            return response.totalAmount;
        },
        alias: {
            pageNumber: 'pageNum',
            pageSize: 'limit'
        },
        callback: function(data, pagination) {              
            var template = _.template($('#template-demo').html());
            var html = template({data: data});

            $('#data-container').html(html);
        }
    }

    $('#pagination-container').pagination(paginationSettings);

    $('#filter-button').click(function() {
        paginationSettings.dataSource = 'pagination/api?filter=' + $('#filter-text').val();
        $('#pagination-container').pagination(paginationSettings);
    });
});

推荐阅读