diango 分页

分页

最近花了很长时间在分页需求上，先是用django的分页插件，随后又用jquery来处理分页。
需求：在一个index界面中，有两个table,分别用两个按钮来控制，我们要对着两个table来进行分页处理。
开始的做法：
后台：设置limit分页参数——>获取数据——>根据分页参数拆分数据——>数据传至前台
# 分页，每页显示5个 limit = 5 paginator = Paginator(bugs_message, limit) page_b = request.GET.get('page') try: bugs_message = paginator.page(page_b) except PageNotAnInteger: # 如果页码不是整数，则显示第一页 bugs_message = paginator.page(1) except EmptyPage: # 页码超出范围，则显示最后一页 bugs_message = paginator.page(paginator.num_pages)
前台：django自带的分页插件，获取上下页，并发送链接，**注：**链接中的page参数（是返回后台那个page）

<tr>
<td colspan="6">
                            <span class="step-links">
                            {% if bugs_message.has_previous %}<!--判断是否还有上一页-->
                                <a href="?b-page=1">&laquo首页</a>
                                <a href="?b-page={{ bugs_message.previous_page_number }}"
                                >上一页</a>
                            {% endif %}
                            </span>
                            <span class="current">
                                第 {{ bugs_message.number }} 页
                            </span>
                            {% if bugs_message.has_next %}
                                <span><a href="?b-page={{ bugs_message.next_page_number }}">下一页</a>
                                <a href="?b-page={{ bugs_message.paginator.num_pages }}">尾页</a>
                            {% endif %}</span></td></tr>

**详细说明：**此分页是用django中Paginatormo模块来做，走的流程：
前台点击分页按钮——>发送href链接——>后台获取page参数——>调取数据——>返回前台。
**此处遇到的问题：**因为是双table,所以在分页会有两个问题：
一：不管你点击的是哪个table的上下页，两个table同时会进行页面变化。
二：上下页变换后都会首先跳到第一个table界面去，而不是在当前table界面进行页面变化。
解决:
问题一：前台：
1、将分页分为两份，分别放入两个table中（原先做法：直接放在两个table外面）
2、在href链接上增加参数，href="?*b-*page=1,根据不同的分页请求设置不同的href参数，那传到后台参数不同，就可以别进行处理。
后台:
获取到前台传的分页参数，进行不同的处理：

paginator = Paginator(bugs_message, limit)
        page_b = request.GET.get('b-page')
        try:
            bugs_message = paginator.page(page_b)
        except PageNotAnInteger:  # 如果页码不是整数，则显示第一页
            bugs_message = paginator.page(1)
        except EmptyPage:  # 页码超出范围，则显示最后一页
            bugs_message = paginator.page(paginator.num_pages)
        # demand分页
        paginator_d = Paginator(demand_message, limit)
        page_d = request.GET.get('d-page')
        try:
            demand_message = paginator_d.page(page_d)
        except PageNotAnInteger:  # 如果页码不是整数，则显示第一页
            demand_message = paginator_d.page(1)
        except EmptyPage:  # 页码超出范围，则显示最后一页
            demand_message = paginator_d.page(paginator_d.num_pages)

问题二：只在前台进行了处理，思路：获取发送的url——>对url中的参数进行判定——>将对应的table隐身。

var params = window.location.href;
        // alert('params:',r);
        console.log('url:', params);
        if (params.includes('b-')) {
            console.log('b-');
            document.getElementById('t2').style.display='none';
        }
        else if (params.includes('d-')) {
            console.log('d-');
            document.getElementById('t1').style.display='none';
            document.getElementById('t2').style.display='block';
        }

这样就解决了自己所有的问题。
**总结：**在做此分页是，自己对于django中分页的插件,流程等没有了解清楚，导致一度想要放弃使用这个方法而直接使用jquery的分页去处理。以后再使用一个新东西时，要先了解下这个方法。
这里还想记录下自己使用jquery,做的分页的代码：

			<tr><td colspan="6">
               <a><span id="spanFirst">首页</span></a>
                <a><span id="spanPre">上一页</span></a>
                第<span id="spanPageNum"></span>页
                <a><span id="spanNext">下一页</span> </a>
                <a><span id="spanLast">尾页</span></a>
            </td></tr>
<script>
var trs = $("#t1 tr");
        var pagesize = 5;
        var curr = 1;
        var currRow = pagesize * curr;
        var allPage = Math.ceil(trs.length / pagesize);
        //页面初始状态
        $(document).ready(function () {
            hideTab();
            curr = 1;
            $("#table1 tr:lt(3)").css("display", "block");
            $("#spanTotalPage").text(allpage);
            $("#spanPageNum").text(curr);
            $("#count").css({"width": "20px", "border-radius": "5px"});
        });
       
        // 绑定下一页点击事件
        function spanNext() {
            alert("下一页");
            {#hideTab();#}
            if (curr > allPage - 1) {
                curr = allPage;
            } else {
                curr++;
            }
            alert(curr);
            var currRow = pagesize * curr;
            $.each(trs, function (index) {
                if (index < currRow && index >= currRow - pagesize) {
                    var that = this;
                    that.style.display = "block";
                }
            });
            $("#spanPageNum").text(curr);
        }
        $("#spanNext").bind("click", spanNext);
        //为上一页 绑定点击事件
        function spanPre() {
            alert("上一页");
            {#hideTab();#}
            if (curr < 2) {
                curr = 1;
            } else {
                curr--;
            }
            var currRow = pagesize * curr;
            $.each(trs, function (index) {
                if (index < currRow && index >= currRow - pagesize) {
                    var that = this;
                    that.style.display = "block";
                }
            });
            $("#spanPageNum").text(curr);
        }
        $("#spanPre").bind("click", spanPre);
        //为第一页绑定点击事件
        function spanFirst() {
            {#hideTab();#}
            console.log("第一页");
            curr = 1;
            {#var currRow = pagesize * curr;#}
            $.each(trs, function (index) {
                if (index < currRow && index >= currRow - pagesize) {
                    this.style.display = "block";
                }
            });
            $("#spanPageNum").text(curr);
        }
        $("#spanFirst").bind("click", spanFirst);
        //为最后一页绑定点击事件
        function spanLast() {
            {#hideTab();#}
            {#curr = allpage;#}
            {#var currRow = pagesize * curr;#}
            console.log("最后一页");
            alert("最后一页");
            $.each(trs, function (index) {
                if (index < currRow && index >= currRow - pagesize) {
                    this.style.display = "block";
                }
            });
            $("#spanPageNum").text(curr);
        }
        $("#spanLast").bind("click", spanLast);

</script>      

*思路：*获取table下的tr——>进行分页——>绑定上下页等。