Python-Django-Ajax分页功能实现

Django-Ajax分页功能实现

前言

Django框架，ajax分页功能实现，包含MVT三大板块的代码及注释。

---

前端(T: 模板)

注意: 整个样式用的是Bootstrap，所以使用的时候要引入bootstrap的层叠样式表和JS脚本。

<!--					表格-->
<table  class="table table-striped">
	<!--					表头-->
	<thead>
		<tr>
			<td style="font-weight: bolder">
				<input type="checkbox" class="box-title">
			</td>
			<td style="font-weight: bolder">
				姓名
			</td>
			<td style="font-weight: bolder">
				年龄
			</td>
			<td style="font-weight">
				性别
			</td>
		</tr>
	</thead>
	<!--					表体 由ajax填充内容-->
	<tbody id="generatedTable"></tbody>
</table>

<!--					页码-->
<div>
	<ul class="pagination pagination-lg" style="font-weight: bold">
		<li><a href="#">&laquo;</a></li>
		<li><a onclick="dividePage(this)">1</a></li>
		<li><a onclick="dividePage(this)">2</a></li>
		<li><a onclick="dividePage(this)">3</a></li>
		<li><a onclick="dividePage(this)">4</a></li>
		<li><a onclick="dividePage(this)">5</a></li>
		<li><a onclick="dividePage(this)">6</a></li>
		<li><a onclick="dividePage(this)">7</a></li>
		<li><a onclick="dividePage(this)">8</a></li>
		<li><a href="#">&raquo;</a></li>
	</ul>
</div>

---

JS:

function dividePage(t) {
	// 获取页码
	const page_num = t.innerText;

	// post请求从后台取数据
	$.ajax({
		url: '/excel_generate/divide_page',
		type: 'post',
		async: true, // 开启同步
		data: {
			'page_num': page_num,
		},
		success: function (result) {
			// 成功回传数据
			if (result.res === 1) {
				var str_content = "";
				// 从后台传回的数据不为空
				if (result.data.length > 0) {
					$.each(result.data, function (index, item) {
						str_content += "<tr><td><input type='checkbox'></td><td>" + item['name'] + "</td><td>" + item['age'] + "</td><td>" + item['sex'] + "</td></tr>"
						})
				} 
				// 从后台传回的数据为空 显示此页面没有要显示的数据
				else {
					str_content += "<tr><td colSpan='4'>" + "此页面没有要显示的数据" + "</td></tr>";
				}
				
				// 覆盖表体内容
				$('#generatedTable').html(str_content);
				}
					
			// 数据返回失败
			else {
				alert('数据返回失败');
			}
		}
	})
}

---

后端(V: 视图函数)

from .model import DataModel  # 导入模型类

def extractDividePageData(database, page_num):
    """从数据库中抽取分页数据"""
    data = []
    # 先从数据库中读数据
    msg_list = list(database.objects.filter(is_display=True))

    # 将数据变成JSON能解析的格式
    for msg in msg_list:
        # 添加到data中
        data.append({
            'name': msg.name,
            'age': msg.age,
            'sex': msg.sex
        })
    
    # 如果数据库中没有数据
    if len(msg_list) == 0:
        return {}

    # 数据库中有数据
    else:
        # 计算总页数(18是每一页数据量)
        total_page = (len(data) // 18) + 1
        
        # 总页数比要请求的页数小
        if total_page < page_num:
            return {}
        
        # 总页数刚好等于请求的页数
        elif total_page == page_num:
            start = 18 + (page_num - 2) * 18
            return data[start:]
        # 总页数大于请求的页数
        else:
            start = 18 + (page_num - 2) * 18
            stop = 18 + 18 * (page_num - 1)
            return data[start:stop]

@csrf_exempt
def divide_page(request):
    """分页"""
    page_num = int(request.POST.get('page_num'))
    
    # 获取数据, 第一个参数是保存数据的数据库对应的模型类，第二个参数是前端获取到的页码
    try:
    	page_data = extractDividePageData(DataModel, page_num)
    except Exception as e:
    	return JsonResponse({'res': 0, 'data': {})
    else:
    	return JsonResponse({'res': 1, 'data': page_data})

---

模型类(M)

class DataModel(models.Model):
	"""模型类"""
	name = models.CharField(max_length=16)
	age = models.IntegerField()
	sex = models.CharField(max_length=4)
	is_display = models.BooleanField(default=True)

以上。