在django, xlrd 基础下使用jq实现简单的ajax分页效果

喜欢ヅ旅行 2022-02-05 08:19 101阅读 0赞

## 使用jq 实现简单的ajax 分页效果 ##

**本demo 是基于python 3.7 下 django 2.1 和bootstrap 3 实现简单的ajax 分页效果  
后台使用的是python，并没有使用数据库，只是简单的使用xlrd 读取Excel 表格数据向前端返回数据的简单功能**

## 1.效果图 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]

## 2.前端部分 ##

**2.1** html 部分的代码

<div class="table-responsive">
                
                <div id="table-container">
                    
                    <table class="table table-striped" >
                        <thead>
                          <tr>
                            <th>ip</th>
                            <th>machine</th>
                            <th>mac</th>
                            <th>version</th>
                            <th>station</th>
                            <th>update</th>
                            <th>edit</th>
                          </tr>
                        </thead>
                        <tbody id="tbody"></tbody>
                  </table>
                </div>
                
              <nav aria-label="Page navigation">
                  
                  <ul class="pagination" id="page-list"></ul>
              </nav>
           </div>

**2.2** css 部分的代码

*{ 
                margin: 0;
                padding: 0;
            }
            #table-container{ 
                height: 450px;
            }
            #page-list .my-hidden{ 
                display: none;
            }
            #page-list #page-pre, #page-list #page-next{ 
                display: inline;
            }

**2.2** js 部分的代码

//获取表格数据的ajax
         //n为传过来的页码
        function getTableData(n) { 
            var page=n?n:1 //不传页码的话默认为1
            $.ajax({ 
                type:'get',
                url:'getTable/?page='+page,
                dataType:'json',
                success:function (data) { 
                    { #console.log(data);#}
                    var title = data.title;
                    var html='';
                    var content=data.content;
                    for(var i=0;i<content.length;i++){ 
                        html+=` <tr> <td>${ content[i].ip}</td> <td>${ content[i].machine}</td> <td>${ content[i].mac}</td> <td>${ content[i].version}</td> <td>${ content[i].station}</td> <td>${ content[i].update}</td> </tr> `
                    }
                    $("#tbody").html(html)
                },
                error:function (xhr) { 
                    console.log(xhr)
                }
            })
        }
    
        //渲染分页导航列表的,默认只显示1-5页和上一页/下一页的按钮
        function getTablePage(){ 
             $.ajax({ 
                 type:'get',
                 url:'getTable/',
                 dataType:'json',
                 success:function (data) { 
                     console.log(data.sheet_rows)
                     page_number = Math.floor(data.sheet_rows/10)+1
                     list = ''
                     for(var i=0;i<page_number;i++){ 
                         list+=` <li data-page=${ i+1} class="${ i+1==1?'active':''} ${ i+1>5?'my-hidden':''} " ><span >${ i+1}</span></li> `
                     }
                     var Previous = ` <li id="page-pre" data-page="pre"> <span aria-label="Previous"> <span aria-hidden="true">«</span> </span> </li> `
                     var Next = ` <li id="page-next" data-page="next"> <span aria-label="Next"> <span aria-hidden="true">»</span> </span> </li> `
    
                     var html=Previous+list+Next
                     $('#page-list').html(html)
    
                 }
             })
        }
        //为每个spen (包括上一页和下一页)绑定点击事件
         $("#page-list").on("click","li>span",function(){ 
             //获取当前点击的li 页码
             var page_number = $(this).parent().attr("data-page") //这里不能用parseInt() 不然下面判断上一页和下一页的会失效
             // 获取当前所有的li -2 得到最大页码
             var max_page_number = parseInt($(this).parent().parent().children().length - 2)
             //
             if (page_number == "pre" || page_number == "next"){  //如果页码值为上一页，下一页
                 getPre_Next(page_number,max_page_number)
             }else {  //如果页码值数字按钮
                 page_number = parseInt(page_number)
                 //获取ajax 内容
                 getTableData(page_number,max_page_number)
                 //切换样式
                 $(this).parent().addClass('active').siblings().removeClass('active')
                 //将当前活动的li 对象和最大页码传给处理页码显示的函数
                 handle_li($(this).parent(),max_page_number)
    
             }
         })
         // 为上一页和下一页按钮绑定点击事件
        function getPre_Next(page_number,max_page_number){ 
             if(page_number == "pre"){  //如果点击的是上一页
                 //找到 class 为active的li 然后获取它的 data-page(页码) 在-1 传给获取表格数据的ajax函数
                 var old_page_number = parseInt($("#page-list>li.active").attr("data-page"))
                 var pre_page_number = parseInt(old_page_number -1)
                 if(pre_page_number < 1){  //如果页码小于1
                     alert("Min page is 1")
                 }else { 
                     getTableData(pre_page_number)
                     $("#page-list>li.active").removeClass("active").prev().addClass("active")
                     //将当前活动的li 对象和最大页码传给处理页码显示的函数
                     var active_li = $("#page-list>li.active")
                     handle_li(active_li,max_page_number)
                 }
    
             }else { //如果点击的是下一页
                //找到 class 为active的li 然后获取它的 data-page(页码) 在+1 传给获取表格数据的ajax函数
                 var old_page_number = $("#page-list>li.active").attr("data-page")
                 var next_page_number = parseInt(old_page_number) +1
    
                 if(next_page_number > max_page_number){  //如果页码大于最大页码
                     alert("Max page is"+ max_page_number)
                 }else { 
                     getTableData(next_page_number)
                     $("#page-list>li.active").removeClass("active").next().addClass("active")
                     //将当前活动的li 对象和最大页码传给处理页码显示的函数
                     var active_li = $("#page-list>li.active")
                     handle_li(active_li,max_page_number)
                 }
    
             }
        }
        // 处理页码列表显示的函数
        function handle_li(active_li,max_page_number) { 
             /** * active_li :当前活动的li(jq对象) * max_page_number : 页码的最大值 * **/
             var page_number = parseInt(active_li.attr('data-page')) //获取当前li的页码
             var _siblings = active_li.siblings()  //取出当前li的所有兄弟li
    
             for (var i = 0;i<_siblings.length;i++){ 
             var _siblings_page_number=parseInt($(_siblings[i]).attr('data-page')) //获取当前li 所有兄弟元素的页码
             console.log(_siblings_page_number)
             if(page_number < 3 ){  //当前活动的页码小于3 时候显示1-5
                 if(_siblings_page_number <=5){ 
                     $(_siblings[i]).removeClass('my-hidden')
                 }else { 
                     $(_siblings[i]).addClass('my-hidden')
                 }
             }else if(page_number > parseInt(max_page_number - 2)){  //当前活动的页码大于最大页码-2 时候显示最后5页
                 if(_siblings_page_number > parseInt(max_page_number - 5)){ 
                     $(_siblings[i]).removeClass('my-hidden')
                 }else { 
                     $(_siblings[i]).addClass('my-hidden')
                 }
             }else {  //当li 的页码比当前活动li的页码 大于2或者小于2时候隐藏
                 if(_siblings_page_number > parseInt(page_number +2) || _siblings_page_number < parseInt(page_number -2)){ 
                     $(_siblings[i]).addClass('my-hidden')
                 }else { 
                     $(_siblings[i]).removeClass('my-hidden')
                 }
    
             }
             }
         }
    
        $(function () { 
            getTablePage() // 获取分页列表
            getTableData(1) //获取ajax 数据 默认显示第一页
        })

## 3.后台部分 ##

**3.1 django 的主 url 部分**

from mydemo2 import urls as mydemo_url2
    urlpatterns = [
    	re_path(r'^mydemo2/',include(mydemo_url2))
    ]

**3.2 django 的demo2的 url 部分**

from mydemo2 import views as mydemo2
    
    urlpatterns=[
        re_path(r'^$',mydemo2.My_handle.as_view(),name="index"),
        re_path(r'^getTable/$',mydemo2.MyTableData.as_view(),name='getTable')
    ]

**3.3 django 的demo2的 view 部分**

from django.shortcuts import render
    from django.shortcuts import HttpResponse
    from django.views.generic import View
    import os,datetime,json
    ###
    from mydemo2.handle_excel.handle_excel import HandleExcel
    
    class My_handle(View):
    
        def get(self,request):
            return render(request,'mydemo2/index.html',{ })
    
    class MyTableData(View):
        def __init__(self):
            self.default_row = 10  # 默认显示的行数
            self.default_page = 1  # 默显示第一页
    
        def get(self,request):
            page_namber = request.GET.get('page')  # 获取前端传过来的page
            if page_namber:
                self.default_page = page_namber
    
            han = HandleExcel()  # 实例化处理Excel的类
            excel_data = han.get_excel_data(self.default_row,self.default_page)
            # print(excel_data)
            return HttpResponse(json.dumps(excel_data))

**3.3 django 的demo2的handle\_excel.py 部分**

import os,datetime,json
    import xdrlib,xlrd,xlwt,xlutils
    
    class HandleExcel(object):
        def __init__(self):
            self.base_path =os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    
        def get_excel_data(self ,row_number ,page_number ,excel_name='test.xlsx'):
            ''' :param row_number: 每页显示的行数 :param page_number: 页码 :param excel_name: 读取的Excel 表格 :return: {"title":[],"content":[{},{}]} '''
            excel_path = os.path.join(self.base_path, 'db/{}'.format(excel_name))
            excel_path = excel_path.replace('\\', '/')
            # print(self.base_path)
            # print(excel_path)
            excel_data = { }  # 获取所有内容的字典
            try:
                # 将路径, 显示行数, 页码传过去
                sheet_rows,title,content = self.handle_page(excel_path,row_number,page_number)
    
                excel_data['sheet_rows'] = sheet_rows  # 总行数 放到字典中 {n,[],[{},{}]}
                excel_data['title'] = title  # title 放到字典中 {n,[],[{},{}]}
                excel_data['content'] = content  # 内容 放到字典中 {n,[],[{},{}]}
            except Exception as ex:
                print("ex [{}]".format(ex))
            return excel_data  # {n,[],[{},{}]} 返回一个字典
    
        def  handle_page(self,excel_path,row_number,page_number):
            ''' :param excel_path: Excel的路径 :param row_number: 显示的行数 :param page_number: 当前显示的页码 :return: title,content '''
            r_book = xlrd.open_workbook(excel_path)  # 打开excel 文件对象
            # r_sheet=r_book.sheet_by_name('Sheet1') # 通过表格名字获取
            r_sheet = r_book.sheet_by_index(0)  # 通过索引获取 表格
            sheet_rows = r_sheet.nrows  # 总行数
            sheet_cols = r_sheet.ncols  # 总列数
            sheet_row_title = r_sheet.row_values(0)  # 第一行数据 title
            sheet_col_id = r_sheet.col_values(0)  # 第一列数据
    
            row_number = int(row_number)
            page_number = int(page_number)
            if row_number < sheet_rows and page_number * row_number < sheet_rows:  # 显示行数和Excel 中的总行数比较
                start_row = (page_number-1) * row_number  # 根据页码和显示行数得到该页的起始行
                end_row = start_row+row_number+1  # 根据页码和显示行数得到该页的结束行 # 取出起始行到结束行(因为第一行是title所以+1)
            elif sheet_rows < page_number * row_number:  # 最后几行的情况
                start_row = (page_number - 1) * row_number  # 根据页码和显示行数得到该页的起始行
                end_row = sheet_rows
            elif sheet_rows < row_number:  # 总行数小于显示行数的情况
                start_row = 1  # 根据页码和显示行数得到该页的起始行
                end_row = sheet_rows  # 根据页码和显示行数得到该页的结束行
    
            print(end_row)
            content = []  # 存放内容的列表
            for row in range(start_row,end_row):  # 取出起始行到结束行(因为第一行是title所以+1)
                if row == 0:  # 第一行是标题，不要
                    continue
                else:
                    apps = { }
                    for col in range(sheet_cols):  # 每列
                        if r_sheet.cell(row, col).ctype == 3:  # 处理日期格式的值
                            date_value = xlrd.xldate_as_tuple(r_sheet.cell(row, col).value, datemode=0)
                            date_value = datetime.date(*date_value[:3]).strftime('%Y/%m/%d')
                            apps[sheet_row_title[col]] = date_value
                        else:
                            # 以标题为key 组成字典
                            apps[sheet_row_title[col]] = r_sheet.cell(row, col).value
                content.append(apps)
    
            return sheet_rows, sheet_row_title, content

**3.4 handle\_excel.py 读取的excel 表格部分内容**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]

## 4.总结： ##

1.练习使用了python的xrld 读取表格的包，下次再写xlwt,xlutils这两个包  
2.使用的都是bootstrap3 的样式，自己基本没有写样式。  
3.js 的分页按钮只能固定显示5个，没有改动显示个数的功能，跳转页面的功能下次再加。  
仓库链接： [https://gitee.com/htg\_nice/my\_django\_demo19-4-3.git][https_gitee.com_htg_nice_my_django_demo19-4-3.git]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70]: /images/20220205/b8e4388bd8a9451680c4bd9d0bf20038.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3NTYxODMz_size_16_color_FFFFFF_t_70 1]: /images/20220205/aedf407a1d7b43058bc1a824d1d2c4ed.png
[https_gitee.com_htg_nice_my_django_demo19-4-3.git]: https://gitee.com/htg_nice/my_django_demo19-4-3.git