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

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

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

1.效果图

2.前端部分

2.1 html 部分的代码

<div class="table-responsive">
            <!--固定高度的容器-->
            <div id="table-container">
                <!--table-->
                <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">&laquo;</span>
                      </span>
                    </li>
                 `
                 var Next = `
                    <li id="page-next" data-page="next">
                      <span  aria-label="Next">
                        <span aria-hidden="true">&raquo;</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 表格部分内容

4.总结：

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