使用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简单运用于表格中的更多相关文章

  1. 如何使用免费控件将Word表格中的数据导入到Excel中

    我通常使用MS Excel来存储和处理大量数据,但有时候经常会碰到一个问题—我需要的数据存储在word表格中,而不是在Excel中,这样处理起来非常麻烦,尤其是在数据比较庞大的时候, 这时我迫切地需要 ...

  2. django如何查看mysql已有数据库中已有表格

    首先正常创建django项目,配虚拟环境,改配置文件,正常创建models,创建迁移和启动迁移等 接着通过找到Terminal窗户,双击,打开窗口 输入命令 python manage.py in i ...

  3. 用django创建一个简单的sns

    用django创建一个简单的sns 1.首先创建一个工程newsns django-admin.py startproject newsns 在工程目录下新建一个文件夹templates,在该文件夹下 ...

  4. django初探-创建简单的博客系统

    django第一步 1. django安装 pip install django print(django.get_version()) 查看django版本 2. 创建项目 打开cmd,进入指定目录 ...

  5. django初探-创建简单的博客系统(二)

    上篇django初探-创建简单的博客系统(一)已经记录了Django实现博客的发布的整个过程,接下来继续说明博客标题和内容的显示. 显示博客详细 将博客内容保存到数据库还不是发布博客的终极目的,博客一 ...

  6. Django - 模式、简单使用

    著名的MVC模式:所谓MVC就是把web应用分为模型(M),控制器(C),视图(V)三层:他们之间以一种插件似的,松耦合的方式连接在一起. 模型负责业务对象与数据库的对象(ORM) 视图负责与用户的交 ...

  7. Django的认证系统和Django admin的简单使用

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...

  8. 基于django的自定义简单session功能

    基于django的自定义简单session功能 简单思路: 1.建立自定义session数据库 2.登入时将用户名和密码存入session库 3.将自定义的随机session_id写入cookie中 ...

  9. django创建一个简单的web站点

    一.新建project 使用Pycharm,File->New Project…,选择Django,给project命名 (project不能用test命名)   新建的project目录如下: ...

随机推荐

  1. Xamarin.ios引用第三方SDK

    引言 诚然,Xamarin是个优秀的跨平台解决方案,但毕竟还是不能将Native中所有的方法都直接实现.诸如各种第三方库,也都只有java/oc原生版本的SDK,无法直接拿过来直接使用.但,不能直接拿 ...

  2. 自从升级到macOS后,整个人都不好了

    电脑一直莫名的随机卡死,各种软件都出现了一些崩溃和不稳定的情况. Siri就是个笑话,启用后就开始索引本地硬盘,不管你有没有正在工作:直到你启动Siri,会暂停一下,然后就算是你开在哪不动,过两分钟, ...

  3. Atitit. null错误的设计 使用Optional来处理null

    Atitit. null错误的设计 使用Optional来处理null 然后,我们再看看null还会引入什么问题. 看看下面这个代码: String address = person.getCount ...

  4. MongoDB学习笔记—Linux下搭建MongoDB环境

    1.MongoDB简单说明 a MongoDB是由C++语言编写的一个基于分布式文件存储的开源数据库系统,它的目的在于为WEB应用提供可扩展的高性能数据存储解决方案. b MongoDB是一个介于关系 ...

  5. jQuery刮彩票兑奖效果

    效果体验:http://keleyi.com/a/bjad/uaq24pxt.htm 其中拖拽刮涂层效果使用jquery UI的draggable方法,请参考:http://keleyi.com/a/ ...

  6. ArcSDE安装注意事项(二)

    上次安装的arcsde9.3后尝试往本机sde数据库中导入一个区局的数据库,但是每次都是导到一半就卡死不动,也没有报任何的错误,因此安装了arcsde9.3 sp2补丁,安装补丁后连接sde(非直连方 ...

  7. Android开发学习——Android项目的目录结构

    Android项目的目录结构: 资源文件夹: 清单配置文件: Android的四大组件在使用前全部需要在清单文件中配置 <?xml version="1.0" encodin ...

  8. android四大组件(简单总结)

    activity 一个Activity通常就是一个单独的屏幕(窗口) Activity之间通过Intent进行通信 android应用中每一个Activity都必须要在AndroidManifest. ...

  9. Linux常用命令:sed

    本文记录的是自己在学习<Linux私房菜>中正则表达式的笔记. 关于行尾符$ 如果文件本身没有内容,比如使用touch新建的文件,那么$将会没有意义.例如下面操作: 先使用touch新建了 ...

  10. 支付宝alipay使用小结 调用支付宝程序被杀死说明

    一. 准备阶段 如果没有蚂蚁金服开放平台的注册账号,则需要实现注册一个,这里多说一点,就是当我们以公司名义注册账号时,需要预备公司的营业执照等物品(需要上传照片等信息审核).账号申请成功之后,我们需要 ...