[django]django+datatable简单运用于表格中
使用datatable首先需要下载datatable文件,文件主要包括三个文件夹css,img,js相关文件,在django中如何配置呢?
首先需要在模板中引入datatable文件,格式如下:
<!-- DataTables CSS -->
<link rel="stylesheet" href="{% static 'DataTables/css/jquery.dataTables.css' %}">
<!-- jquery -->
<script src="{% static 'js/jquery/jquery.min.js' %}"></script>
<!-- DataTables -->
<script src="{% static 'DataTables/js/jquery.dataTables.js' %}"></script>
注意datatables中的js文件需要引用在jquery文件之后.
那么django中如何让数据使用datatables表格呢?
代码如下:
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
{% for d in data %}
<tr>
<td>{{ d.col1 }}</td>
<td>{{ d.col2 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
<script>
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
完毕!
[django]django+datatable简单运用于表格中的更多相关文章
- 如何使用免费控件将Word表格中的数据导入到Excel中
我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...
- django如何查看mysql已有数据库中已有表格
首先正常创建django项目,配虚拟环境,改配置文件,正常创建models,创建迁移和启动迁移等 接着通过找到Terminal窗户,双击,打开窗口 输入命令 python manage.py in i ...
- 用django创建一个简单的sns
用django创建一个简单的sns 1.首先创建一个工程newsns django-admin.py startproject newsns 在工程目录下新建一个文件夹templates,在该文件夹下 ...
- django初探-创建简单的博客系统
django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...
- django初探-创建简单的博客系统(二)
上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...
- Django - 模式、简单使用
著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据库的对象(ORM) 视图负责与用户的交 ...
- Django的认证系统和Django admin的简单使用
Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...
- 基于django的自定义简单session功能
基于django的自定义简单session功能 简单思路: 1.建立自定义session数据库 2.登入时将用户名和密码存入session库 3.将自定义的随机session_id写入cookie中 ...
- django创建一个简单的web站点
一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名) 新建的project目录如下: ...
随机推荐
- 通知中心 NSNotificationCenter 的简单使用方法
NSNotificationCenter(通知中心) [注意]需再dealloc中移除观察者 获取通知中心单例对象 NSNotificationCenter *center=[NSNotifi ...
- Nancy之ModelBinding(模型绑定)
过年前的最后一篇博客,决定留给Nancy中的ModelBinding 还是同样的,我们与MVC结合起来,方便理解和对照 先来看看MVC中简单的ModelBinding吧 // POST: Author ...
- Xamarin.Android和UWP之MVVM的简单使用(一)
0x01 前言 就目前而言,MVVM可以说是挺流行的,无论是web端还是移动端,web端的主要代表angularjs,avalonjs等, 移动端(xamarin,uwp)的代表应该是mvvmligh ...
- MyEclipse10查看Struts2源码及Javadoc文档
1:查看Struts2源码 (1):Referenced Libraries >struts2-core-2.1.6.jar>右击>properties. (2):Java Sour ...
- SpringMVC中的异常处理集锦
1 描述 在J2EE项目的开发中,不管是对底层的数据库操作过程,还是业务层的处理过程,还是控制层的处理过程,都不可避免会遇到各种可预知的.不可预知的异常需要处理.每个过程都单独处理异常,系统的代码耦合 ...
- karma的基础应用之与fis结合
一.介绍 1. karma是单元测试运行框架,可以集成jasmine断言库,也支持babel. 2.fis是百度前端团队开源推出的前端工程化管理工具. 二.karma的基础应用 1.karma的基础a ...
- 【转载】实用的Javascript获取网页屏幕可见区域高度
本文转载原地址:这里 document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 docu ...
- HTML5学习笔记三 HTML元素、属性、标题、段落简介
一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- eclipse整体设置
2.Eclipse for android 设置代码提示功能(1)设置 java 文件的代码提示功能打开 Eclipse 依次选择 Window > Preferences > Java ...
- Android常用英文词汇不为命名纠结
ANR (Application Not Response ) bundle 捆, entire 整个的,完整的 lifetime 生命周期 entire lifetime 完整生命周期 ...