Question

网站通常允许用户指定分页表中每页显示的项目数。我想用django-tables2做这个。

我可以添加“每页显示[5 | 10 | 50]”选择框以从用户收集per_page参数。

但是，表格模板中的“上一页”和“下一页”按钮是超链接，带有per_page的硬编码值，例如：

<a href="?per_page=5&page=5">Next</a>

我认为实现这种动态的唯一方法是使用javascript，例如：

<span onclick="get_table_page(5)">Next</span>

函数get_table_page（）可以从选择框中检索per_page参数。

这是最好的方法吗？或者有没有javascript的方式？

更新：没有回答问题（如何更改上一页/下一页的per_page），但是，如接受的答案所示，用户可以使用更改的per_page参数重新加载当前页面，例如：

<p>Show [ <a href="{% querystring "per_page"=5  %}">5</a>
        | <a href="{% querystring "per_page"=20 %}">20</a>
        | <a href="{% querystring "per_page"=50 %}">50</a>
        ] Items</p>

感谢和祝福

伊万

Answer 1

django-tables2支持$ ('img').click(function(){ if($ (this).attr('src') === '/survey/selfserve/53e/170605/MaleNew_w800.png'){ $ (this).attr('src','/survey/selfserve/53e/170605/MaleSelectedNew_w800.png'); $ (this).attr('data-src','/survey/selfserve/53e/170605/MaleSelectedNew_w800.png'); if($ (this).next().find('img').attr("src") === '/survey/selfserve/53e/170605/FemaleSelectedNew_w800.png') { $ ($ (this).next().find('img').attr("src")).attr('src','/survey/selfserve/53e/170605/FemaleNew_w800.png'); } return; } if($ (this).attr('src') === '/survey/selfserve/53e/170605/MaleSelectedNew_w800.png'){ $ (this).attr('src','/survey/selfserve/53e/170605/MaleNew_w800.png'); $ (this).attr('data-src','/survey/selfserve/53e/170605/MaleNew_w800.png'); return; } if($ (this).attr('src') === '/survey/selfserve/53e/170605/FemaleNew_w800.png'){ $ (this).attr('src','/survey/selfserve/53e/170605/FemaleSelectedNew_w800.png'); $ (this).attr('data-src','/survey/selfserve/53e/170605/FemaleSelectedNew_w800.png'); if($ (this).next().find('img').attr("src") === '/survey/selfserve/53e/170605/MaleSelectedNew_w800.png') { $ ($ (this).next().find('img').attr("src")).attr('src','/survey/selfserve/53e/170605/MaleNew_w800.png'); } return; } if($ (this).attr('src') === '/survey/selfserve/53e/170605/FemaleSelectedNew_w800.png'){ $ (this).attr('src','/survey/selfserve/53e/170605/FemaleNew_w800.png'); $ (this).attr('data-src','/survey/selfserve/53e/170605/FemaleNew_w800.png'); return; } });的{{1}}关键字参数。如果使用per_page或其中一个基于类的视图，只需将table.paginate()添加到网址即可使django-tables2重新渲染，每页20行。

您可以使用RequestConfig标记在自定义模板中创建网址，这样可以保持排序/过滤完整。

Answer 2

我不知道如何找到当前的查询字符串（带有不同的参数），所以我在我的模板中写道：

Show <select id="select_per_page" onchange="perPageChange($(this).val())">
    <option value="10">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select> items

并使用一些javascript：

<script>
    function perPageChange(per_page)
    {
        /* per_page in querystring : replace the value in the current url */
        if (location.href.indexOf('per_page=') > 0)
            url = location.href.replace(/(per_page=)[^\&]+/, '$1' + per_page)
        else
        {
        /* per_page not in querystring */
            /* is there a parameter in querystring */
            if (location.href.indexOf('?') > 0)
                addStr = '&'
            else
                addStr = '?'
            addStr += 'per_page=' + per_page
            url = location.href + addStr
        }
        /* reload the page */
        location.href = url;
    }

    /* to select the correct option in the select */
    $('#select_per_page').val({{ table.page.object_list|length }});
</script>

在django-tables2中动态设置per_page

2 个答案: