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