Django--8 Django+Datatables插件+Ajax实现数据表

最新推荐文章于 2024-06-07 09:32:28 发布

liuning2008

最新推荐文章于 2024-06-07 09:32:28 发布

阅读量1.4k

点赞数 2

分类专栏： Django 文章标签： ajax jquery js

本文链接：https://blog.csdn.net/liuning2008/article/details/112973380

版权

Django 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

本文介绍了如何使用Django框架结合Datatables插件，通过Ajax实现数据的动态加载和交互功能，包括分页、搜索和排序。教程详细步骤包括配置CSS和JS引用、创建HTML表格、编写Ajax视图和配置Datatables参数。

摘要由CSDN通过智能技术生成

Django+Datatables插件+Ajax实现数据表

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源（ MIT license ）！商业支持

Datatables下载链接：https://pan.baidu.com/s/1OgLgdiFoHo5rJv0e8lBTqg 提取码：1fru

1 下载DataTables解压，拷贝到static文件目录下

2 在HTML页面配置

在页面头部添加引用

3 在页面创建表格usertab

<table id="usertab" class="display">
        <thead>
            <tr>
                <th>用户名</th>
                <th>密码</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>王浩</td>
                <td>123456</td>
                <td>w@qq.com</td>
            </tr>
        </tbody>
</table>

4 创建js文件sunck.js

$(document).ready(function () {

console.log("**************")

});

5 解析器urls.py创建url

6 创建模型User

插入几条数据

7 创建视图ajaxuser和ajaxdata

def ajaxuser(request):
    return render(request,"myApp/ajaxuser.html")

def ajaxdata(request):
    users = User.objects.all()
    list = []
    for user in users:
        user_info = {
            'name': user.name,
            'password': user.password,
            'email': user.email,
        }
        list.append(user_info)
    user_dic = {}
    user_dic['data'] = list
return JsonResponse(user_dic)

8 启动服务器

python manage.py runserver

打印******，说明sunck.js文件运行正常

8 在sunck.js文件添加语句

实现页面点击按钮，发送ajax请求，从服务器取出数据，数据渲染到前端html页面的table里。

$(document).ready(function () {
    console.log("**************")
    $('#example').DataTable( {
        ajax:{//ajax请求后台
            url: '/ajaxdata/',
            type: 'GET',
            dataType: 'json',
        },
        "columns": [
            { "data": "name" },
            { "data": "password" },
            { "data": "email" }
        ],
        language:{
            zeroRecords:'抱歉,没有检索到数据',
            search:'检索',  // 将英文search改为中文
            searchPlaceholder:'请输入',//搜索框提示功能
            lengthMenu:'每页显示_MENU_条记录',
            info:'显示第_START_到第_END_条记录，共_TOTAL_条',
            paginate:{'next':'下页','previous':'下页','first':'第一页','last':'最后一页'},
            infoEmpty:'没有数据',
            infoFiltered:"(从_MAX_条数据检索)",
        },
    } );


});