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

                                              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页面配置

在页面头部添加引用

    <!-- DataTables CSS -->

    <link rel="stylesheet" type="text/css" href="/static/DataTables-1.10.21/media/css/jquery.dataTables.css">

    <!-- jQuery -->

    <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.21/media/js/jquery.js"></script>

    <!-- DataTables -->

    <script type="text/javascript" charset="utf8" src="/static/DataTables-1.10.21/media/js/jquery.dataTables.js"></script>

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_条数据检索)",
        },
    } );
 
 
});

点击按钮

检索功能

排序功能