基於bootstrap的分頁插件

  之前做的分頁，是自己后端寫一堆代碼，返回給前端頁面顯示，感覺比較繁重、不靈活。今天研究下基於bootstrap的做的插件，整理如下：

 在使用bootstrap的插件的時候，需要導入一些css、js。

    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="/static/js/jquery-2.1.1.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/bootstrap-paginator.js"></script>

 注意：js的導入順序，jquery優先導入並且版本要2.x。中文亂碼：<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

其中：bootstrap-paginator.js下載的地址：https://github.com/lyonlai/bootstrap-paginator  在GitHub上進行下載。

html代碼：

<div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>

 

js代碼：

<script>
    $('#pageLimit').bootstrapPaginator({
    currentPage: 1,//當前的請求頁面。
    totalPages: 20,//一共多少頁。
    size:"normal",//應該是頁眉的大小。
    bootstrapMajorVersion: 3,//bootstrap的版本要求。
    alignment:"right",
    numberOfPages:5,//一頁列出多少數據。
    itemTexts: function (type, page, current) {//如下的代碼是將頁眉顯示的中文顯示我們自定義的中文。
        switch (type) {
        case "first": return "首頁";
        case "prev": return "上一頁";
        case "next": return "下一頁";
        case "last": return "末頁";
        case "page": return page;
        }
    }
});
</script>

 

效果：

點擊不同的頁顯示高亮藍。

 讓我們一起看下bootstrap的文檔介紹：

咱們在引用這個插件的時候需要做以下操作：

后端需要傳來數據的可以進行分割多少個頁：

def task_list_page(request):
    '''
    功能：該函數主要是起到分頁的作用。
    :param request: 用戶請求的對象，
    :return: 返回前端數據或者頁數。
    '''
    page_dic={'page_content':None,'page_count':None}
    if request.method=='POST':
        page_num=request.POST.get('page',None)
        data_count=request.POST.get('count',None)
        print(page_num,data_count)
        # pagesplit_obj=pagesplit.Pager(page_num)
        page_end=int(page_num)*int(data_count)
        page_start=page_end -int(data_count)
        query_obj=models.Task_info.objects.all()[page_start:page_end]
        page_count=models.Task_info.objects.count()
        page_cont_str=''
        for i in query_obj:
            page_cont_str+='''
            <tr>
            <td>%s</td>
            <td>%s</td>
            <td>%s</td>
            <td><a href="/res_query_check/%s">點擊查看任務結果</a></td> </tr>
            '''%(i.id,i.task_name,i.task_user,i.id)
        page_dic['page_content']=page_cont_str
        page_dic['page_count']=page_count
        return  HttpResponse(json.dumps(page_dic))
    elif request.method=='GET':
        page_count = models.Task_info.objects.count()
        x,y=divmod(page_count,12)
        if y:
            page_num=x+1
        else:
            page_num=x
        return render(request,'task/task_list.html',{'pagecount':page_num})#傳遞數據一共分多少頁。

 

前端js顯示頁數：

自執行，請求默認第一頁數據：

    $(function () {
        $.ajax(
                {
                    url:'/task_list_page/',
                    type:'POST',
                    data:{'page':1,'count':12},
                    dataType:'JSON',
                    success:function (callback) {
                        var page_count=callback.page_count;
                        var page_cont=callback.page_content;
                        $('tbody').append(page_cont);
                        $('#last_page').text(page_count)
                    }
                }
        )
    });

 注意：$('#last_page').text(page_count)使用的是：id為：last_page

前端代碼：

數據：

                                <table class="table">
                                    <thead>
                                        <tr>
{#                                            <th class="text-center">#</th>#}
                                            <th>任務ID</th>
                                            <th>任務名稱</th>
                                            <th>執行用戶</th>
                                            <th>執行結果</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                    </tbody>
                                </table>

 

 分頁：

 <div id="example" style="text-align: center"> <ul id="pageLimit"></ul> </div>

 

 js代碼：

    $('#pageLimit').bootstrapPaginator({
    currentPage: 1,
    totalPages: {{ pagecount }},
    size:"normal",
    bootstrapMajorVersion: 3,
    alignment:"right",
    numberOfPages:8,
    itemTexts: function (type, page, current) {
        switch (type) {
        case "first": return "首頁";
        case "prev": return "上一頁";
        case "next": return "下一頁";
        case "last": return "末頁";
        case "page": return page;
        }//默認顯示的是第一頁。
    },
        onPageClicked: function (event, originalEvent, type, page){//給每個頁眉綁定一個事件，其實就是ajax請求，其中page變量為當前點擊的頁上的數字。
            $.ajax({
                url:'/task_list_page/',
                type:'POST',
                data:{'page':page,'count':12},
                dataType:'JSON',
                success:function (callback) {
                        $('tbody').empty();
                        var page_count=callback.page_count;
                        var page_cont=callback.page_content;
                        $('tbody').append(page_cont);
                        $('#last_page').text(page_count)
                    }
            })
        }
});

 

效果：