Django+BootstrapTable实现表格分页
models.py：
from django.db import models
# Create your models here.
class Article(models.Model):
title = models.CharField('标题', max_length=64)
content = models.TextField('内容', null=True)
create_time = models.DateTimeField('发布时间')
class Meta:
verbose_name = '文章'
verbose_name_plural = '文章'
def __str__(self):
return self.title
admin.py：
from django.contrib import admin
from .models import Article
class ArticleAdmin(admin.ModelAdmin):
list_display = ('id', 'title', 'create_time', )
list_display_link = ('title',)
# Register your models here.
admin.site.register(Article, ArticleAdmin)
views.py：
#--*--encoding='utf8'--*--
from django.shortcuts import render
from django.http import HttpResponse
from .models import Article
import json
from django.views.decorators.csrf import csrf_exempt
# Create your views here.
def index(request):
return render(request, 'index.html')
@csrf_exempt
def all(request):
if request.method == 'GET':
pageSize = int(request.GET.get('pageSize'))
pageNumber = int(request.GET.get('pageNumber'))
searchText = request.GET.get('searchText')
sortName = request.GET.get('sortName')
sortOrder = request.GET.get('sortOrder')
total = Article.objects.all().count()
articles = Article.objects.order_by('-id')[(pageNumber-1)*pageSize:(pageNumber)*pageSize]
rows = []
data = {"total": total, "rows": rows}
for article in articles:
rows.append({'id': article.id, 'title': article.title, 'content': article.content})
return HttpResponse(json.dumps(data), content_type="application/json")
def add(request):
return render(request, 'add.html')
@csrf_exempt
def deal(request):
if request.method == "POST":
title = request.POST.get('title')
content = request.POST.get('content')
article = Article(title = title, content = content)
article.save()
ret = {"ret": 0, 'title': title, 'content': content}
return HttpResponse(json.dumps(ret))
def article(request, article_id):
article = Article.objects.get(pk = article_id)
return render(request, 'article.html', {'article': article})
def get_an_apple(request):
resp = {'errorcode': 100, 'detail': 'Get success'}
return HttpResponse(json.dumps(resp), content_type="application/json")
@csrf_exempt
def delete(request):
return_dict = {"ret": True, "errMsg": "", "rows": [], "total": 0}
article_id = request.POST.get('id')
article = Article.objects.get(id = article_id)
article.delete()
return HttpResponse(json.dumps(return_dict))
其中all函数是关键。
index.html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="{% static 'libs/bootstrap/css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'libs/toastr/css/toastr.css' %}">
<link rel="stylesheet" href="{% static 'libs/bootstrap-table-master/bootstrap-table.css' %}">
<script src="{% static 'libs/jquery/jquery-1.11.2.min.js' %}"></script>
<script src="{% static 'libs/bootstrap/js/bootstrap.min.js' %}"></script>
<script src="{% static 'libs/toastr/js/toastr.min.js' %}"></script>
<script src="{% static 'libs/bootstrap-table-master/bootstrap-table.js' %}"></script>
<script src="{% static 'libs/bootstrap-table-master/locale/bootstrap-table-zh-CN.js' %}"></script>
<title>Django后台管理系统</title>
</head>
<body>
<div style="padding: 20px;">
<table id="articles-table" data-toggle="table" class="table table-bordered table-striped"></table>
</div>
<script>
var $articlesTable = $('#articles-table').bootstrapTable('destroy').bootstrapTable({
url: '/article/all/',
method: 'GET',
dataType: "json",
uniqueId: 'id',
striped: false,
cache: false,
sortName: 'id',
sortable: false,
sortOrder: 'desc',
sidePagination: "server",
undefinedText: '--',
singleSelect: false,
toolbar: '#soft-toolbar',
search: false,
strictSearch: true,
clickToSelect: true,
pagination: true,
pageNumber: 1,
pageSize: 5,
pageList: [5, 10, 20, 50, 100],
paginationPreText: "上一页",
paginationNextText: "下一页",
queryParamsType: "",
queryParams : function (params) {
var temp = {
'pageSize' : params.pageSize,
'pageNumber' : params.pageNumber,
'searchText': params.searchText,
'sortName': params.sortName,
'sortOrder': params.sortOrder
};
return temp;
},
columns: [
{
checkbox: true
},{
field: 'title',
title:'标题',
width: '12%'
},{
field: 'content',
title:'内容',
width: '62%'
},{
field: 'create_time',
title:'创建时间',
width: '10%'
},{
title:'删除',
formatter: function(value, row, index){
return '<button type="button" class="btn btn-primary btn-xs" onclick="deleteData(' + row.id + ')">删除</button>';
}
}
],
onLoadError: function () {
toastr.error("数据加载失败！", "错误提示");
},
onClickRow: function (row, $element) {
// EditViewById(id, 'view');
}
});
function deleteData(id){
$.ajax({
type: "POST",
url: '/article/delete/',
data: {id: id},
dataType: "json",
success: function(data){
console.log(data);
if(data.ret){
toastr.success('删除成功！', '成功提示');
$articlesTable.bootstrapTable('refresh');
}
},
error: function(data){
console.log(data);
}
});
}
</script>
</body>
</html>
以上四个文件中，views.py和index.html文件是关键。
Django+BootstrapTable实现表格分页的更多相关文章
- 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持
在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...
- bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页
1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...
- 关于bootstrap-table服务端分页问题
昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...
- 基于Vue.js的表格分页组件
有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...
- python 学习笔记十八 django深入学习三 分页，自定义标签，权限机制
django Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...
- Vue.js的表格分页组件
转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...
- Angular.js+Bootstrap实现表格分页
最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...
- 如何用angularjs制作一个完整的表格之二__表格分页功能
接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...
- 【转】基于jquery的无刷新表格分页
效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...
随机推荐
- [转帖]DotNetCore跨平台~System.DrawingCore部署Linux需要注意的
DotNetCore跨平台~System.DrawingCore部署Linux需要注意的 https://www.bbsmax.com/A/QV5ZemYVJy/?tdsourcetag=s_pc ...
- CF450A 【Jzzhu and Children】
普通的模拟题这题用一个队列容器来模拟队列元素是pair类型的,first用来存每个小朋友想要的糖数,second用来存小朋友的序号,然后开始模拟,模拟出口是当队列迟到等于1时就输出当前队列里小朋友的序 ...
- C++拷贝构造函数：浅拷贝与深拷贝
在介绍C++浅拷贝与深拷贝之前,我们先引出C++的拷贝构造函数. C++拷贝构造函数是一种特殊的构造函数,其形参是本类对象的引用.用于在建立一个新的对象时,使用一个已经存在的对象来初始化这个新对象.因 ...
- 第一次编译ffmpeg
今天开始玩ffmpeg了. 从官网下载来的压缩包,不会编译诶,于是我开始研究起来了. 下面就是实时记录的随笔: 首先是从官网下载来的ffmpeg,就是下面这个版本,目前的最新版吧. http://ff ...
- Python和其他编程语言
Python和其他编程语言 一.Python介绍 Python的创始人为吉多·范罗苏姆(Guido van Rossum),如下图,少数几个不秃头的语言创始人.1989年的圣诞节期间,Guido为了打 ...
- Peter and Snow Blower CodeForces - 613A (点到线段距离)
大意: 给定多边形, 给定点$P$, 求一个以$P$为圆心的最小的圆环包含整个多边形. #include <iostream> #include <cmath> #define ...
- HTML5-placeholder属性
HTML 5<input> placeholder属性 placeholder属性提供可描述输入字段预期值的提示信息(hint). 该提示会在输入字段为空时显示,并会在字段获得焦点时消失. ...
- C# 面向对象1(类和对象的概念)
1.面向过程-->面向对象 面向过程:面向的是完成这件事儿的过程,强调的是完成这件事儿的动作. 2.面向过程的思想: 以上的,需求一更改,会导致不同的方法,一一去更改. 3.面向对象的思想:找个 ...
- 预约系统（四） 管理页面框架搭建easyUI
Manage控制器用于管理页面 Index视图为管理页面首页,采用easyUi的后台管理框架 Html头部调用,jquery库,easyui库,easyui.css,icon.css,语言包 < ...
- docker 入门（1）
1,docker 的安装卸载 https://docs.docker.com/install/linux/docker-ce/ubuntu/ 2,docker中的基本概念 镜像(Image) 容器(C ...