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实现表格分页的更多相关文章

  1. 基于Metronic的Bootstrap开发框架经验总结（18）-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  2. bootstrap table + spring + springmvc + mybatis 实现从前端到后端的表格分页

    1.使用准备 前台需要的资源文件,主要有Bootstrap3相关css.js以及bootstrap Table相关css.js: <-- 样式 --> <link rel=" ...

  3. 关于bootstrap-table服务端分页问题

    昨天项目中涉及到了前端表格分页问题.数据一共有1万多条,所以选择了后端分页. 之前用的都是前端分页,第一次使用后端分页.网上也找到了一些例子,最后做出来了. 这里用的是bootstrap-table插 ...

  4. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  5. python 学习笔记十八 django深入学习三 分页，自定义标签，权限机制

    django  Pagination(分页) django 自带的分页功能非常强大,我们来看一个简单的练习示例: #导入Paginator>>> from django.core.p ...

  6. Vue.js的表格分页组件

    转自:http://www.cnblogs.com/Leo_wl/p/5522299.html 有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更 ...

  7. Angular.js+Bootstrap实现表格分页

    最近一直学习Angular.js,在学习过程中也练习了很多的Demo,这里先贴一下表格+分页. 先上图看看最终结果: 不得不说Angular.js代码风格很受人欢迎,几十行代码清晰简洁的实现了上面的功 ...

  8. 如何用angularjs制作一个完整的表格之二__表格分页功能

    接上一次,这次主要介绍表格分页功能,由于项目需要这个案例是关于前端分页的方式,现在很少会这么用了,但如有需要可以参考其中的思路 html: 1.通过UL来展示页标,其中每个页标的li是通过异步加载从获 ...

  9. 【转】基于jquery的无刷新表格分页

    效果图 css样式 <style> html,body{margin: 0;padding:0} a:focus {outline: none;} /* 通用表格显示 */ table, ...

随机推荐

  1. docker-compose 部署elk+解决时间不对导致kibana找不到logstash定义的index + docker-compose安装

    1.拉代码 git clone https://github.com/deviantony/docker-elk.git 2.docker-compose配置文件 [root@host7 docker ...

  2. EditText inputType类型整理

    //文本类型,多为大写.小写和数字符号.     android:inputType="none"//输入普通字符    android:inputType="text& ...

  3. springboot 极简使用例子： redis，MySql数据库，日志，netty，打包和运行

    配置 创建项目的时候选择 application.yml内容如下 spring: redis: host: 127.0.0.1 port: 6379 database: 0 datasource: d ...

  4. JDK下bin文件夹常见几个可执行文件

    bin目录下有很多的可执行文件: java.exe:运行Java程序,就是启动JVM,让JVM执行指定的编译后的代码: javac.exe:Java的编译器,它用于把Java源码文件(以.java后缀 ...

  5. docker 使用阿里云免费仓库

    阿里云为开发人员提供了免费的仓库~~ 登录阿里云 ,选择容器镜像服务,当前是2019/08/13 ,之后不知道阿里云控制台菜单会不会调整哈 进入容器镜像服务菜单,创建仓库,需要绑定git仓库 怎么上传 ...

  6. windows 装mac

    必备条件: 1.vmware虚拟机 2.给相应版本虚拟机打mac补丁 3.用securable检测CPU支持虚拟化设置 4.mac镜像文件 5.这时候还不能启动虚拟机,还需要在引导文件里面进行参数修改 ...

  7. jQuery可拖拽旋转的3D图片墙

    在线演示 本地下载

  8. git bash中不能显示中文

    git bash中不能显示中文 问题描述:当使用git log查看提交日志时,中文字符不能正常显示问题 1.首先把git的配置改一下 git config --global core.quotepat ...

  9. luogu题解 UVA11536 【Smallest Sub-Array】最短set区间&滑动窗口

    题目链接: https://www.luogu.org/problemnew/show/UVA11536 题目大意: 给定一个\(N,M,K\),构造这样的数列: \(x[1]=1,x[2]=2,x[ ...

  10. 部署Dashboard，监控应用

    部署web UI(dashboard)用于监控node资源 参见文档:https://blog.csdn.net/networken/article/details/85607593 官网:https ...