具体用法查看官网 https://datatables.net/

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试DataTable插件</title>
    {#需要引入js、css文件#}
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>
<script>
    $(document).ready(function () {
        var data = [
            {
                "name": "Tiger Nixon",
                "position": "System Architect",
                "salary": "$3,120",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": "5421"
            },
            {
                "name": "Garrett Winters",
                "position": "Director",
                "salary": "$5,300",
                "start_date": "2011/07/25",
                "office": "Edinburgh",
                "extn": "8422"
            }
        ]
        $('#myTable').DataTable({
            /*
            "ajax": { //ajax请求
                "url": "", // 请求数据url
                "type": "POST", // 请求方法
                "data": function (d) { // 请求参数
                    return $.extend(false, {}, d, {})
                }
            },
            */
            "data": data,
            "aoColumns": [
                {
                    'sWidth': "20%",
                    "mDataProp": "name",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        console.log(nTd);
                        console.log(sData);
                        console.log(oData);
                        console.log(iRow);
                        console.log(iCol);
                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "position",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "salary",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "start_date",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "10%",
                    "mDataProp": "office",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "10%",
                    "mDataProp": "extn",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
            ],
            select: {
                style: 'multi'
            },
            fnDrawCallback: function (oSettings) { //ajax回调
                {#var json = jQuery.parseJSON(oSettings.jqXHR.responseText);#}
            }

        });
    });
    {# 测试$.extend(false, {}, d, {}) #}
    $(document).on("click",function () {
        var ext = $.extend(true,{"name":"klx"},{"name":{"klx":"klx","hrr":"hrr"}});
        console.log(ext);
    })
</script>

表格插件datatables的更多相关文章

  1. 基于JQuery可拖动列表格插件DataTables的踩坑记

    前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...

  2. JQuery表格插件DataTables 当前页合计功能

    公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...

  3. 一款比较强大的jquery表格插件Datatables

    Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...

  4. jquery表格插件Datatables使用、快速上手

    Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...

  5. jquery 强大表格插件 DataTables

    官网:https://datatables.net/ 配置:https://datatables.net/reference/option/ API :https://datatables.net/r ...

  6. metronic 表格插件 datatables

    官方网站:https://datatables.net/ css引入:datatables.min.css && datatables.bootstrap.css && ...

  7. 前端表格插件datatables

    下载datatables datatables官网:https://www.datatables.net/ datatables下载地址:https://www.datatables.net/down ...

  8. datatables 前端表格插件 增删改查功能

    官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...

  9. Datatables快速入门开发--一款好用的JQuery表格插件

    博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...

随机推荐

  1. 42、Java装饰者设计模式

    设计模式简介 什么是设计模式?设计模式是可以重复利用的解决方案.软件开发的先驱或者前辈们将之前在开发中遇到的问题进行总结并给出了解决方案,后辈在遇到这些问题之后直接使用这些方案即可解决问题.比如盖高楼 ...

  2. 查看Linux系统版本的几种方法

    第一种: cat /etc/os-release # 或者 cat /etc/redhat-release 结果如下: NAME="Ubuntu" VERSION="16 ...

  3. windows 批处理文件调用exe

    @echo offstart "" "C:\Users\Administrator\Desktop\testtaotao\Debug\testtaotao.exe&quo ...

  4. java递归遍历获取目录下所有文件

    import java.io.File; import java.util.ArrayList; import java.util.List; public class GetFiles { Arra ...

  5. SQL语句帮助大全

    --删除约束 Status:字段名 alter table Table_1 drop constraint Status; --添加约束 --Status :字段名 t_Pay_Order:表名 默认 ...

  6. Vue 进阶教程之：详解 v-model

    分享 Vue 官网教程上关于 v-model 的讲解不是十分的详细,写这篇文章的目的就是详细的剖析一下, 并介绍 Vue 2.2 v-model改进的地方,然后穿插的再说点 Vue 的小知识. 在 V ...

  7. mvn简单命令

    导出maven项目依赖的jar包 mvn dependency:copy-dependencies -DoutputDirectory=lib 编译Java代码 mvn compile eclipse ...

  8. 回归模型效果评估系列3-R平方

    决定系数(coefficient of determination,R2)是反映模型拟合优度的重要的统计量,为回归平方和与总平方和之比.R2取值在0到1之间,且无单位,其数值大小反映了回归贡献的相对程 ...

  9. delphi 获取一个字符占用几个字节，方法

  10. H5新特性：video与audio的使用

    HTML5 DOM 为 <audio> 和 <video> 元素提供了方法.属性和事件. 这些方法.属性和事件允许您使用 JavaScript 来操作 <audio> ...