基于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)
                    }
            })
        }
});

 

效果：