Question

我正在运行一个名为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调用，并在URL上附加参数filter，pageNum和limit。

在页面更改期间，该URL中的过滤器值保持不变：空。即使我在ID为“ filter”的文本框中输入内容，它仍然保持空白。

此插件需要一个名为dataSource set的设置，因此我被迫在那里使用url，并在ajax设置内部使用url。

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

是否有解决方法？

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

Answer 1

因此，由于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);
    });
});

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

1 个答案: