具体用法查看官网 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. 【CC2530强化实训01】普通延时函数实现按键的长按与短按

    [CC2530强化实训01]普通延时函数实现按键的长按与短按 [题目要求]     用一个按键实现长按与短按的功能已经是很多嵌入式产品的常用手法.使用定时器的间隔定时来进行按键按下的时间是通用的做法, ...

  2. VS2010 项目属性的默认包含路径设置方法

    VS2010 项目属性的默认包含路径设置方法 分类: c++小技巧2014-01-10 10:16 1358人阅读 评论(0) 收藏 举报 c++ 有两种方法可以设置vs2010的默认包含路径 方法一 ...

  3. JS设计模式——10.门面模式

    门面模式 这是一种组织性的模式,它可以用来修改类和对象的接口,使其更便于使用.它可以让程序员过得更轻松,使他们的代码变得更容易管理. 门面模式有两个作用: 简化类的接口 消除与使用她的客户代码之间的耦 ...

  4. C. Polygon for the Angle（几何）

    题目链接:http://codeforces.com/contest/1096/problem/C 题目大意:T是测试样例,然后每一次输入一个角度,然后问你在一个n边形里面,能不能构成这个角度,如果能 ...

  5. VM虚拟机上连接usb无反映

    主机的usb连接又是正常的,排除了usb3.0的接口原因后,突然想到了是不是虚拟机的什么服务没有开?进入到控制面板->管理工具->服务,找到 V开头的,发现原来确实是虚拟机有关usb的服务 ...

  6. PCA主成分分析理解

    一.理论概述 1)问题引出 先看如下几张图: 从上述图中可以看出,如果将3个图的数据点投影到x1轴上,图1的数据离散度最高,图3其次,图2最小.数据离散性越大,代表数据在所投影的维度上具有越高的区分度 ...

  7. SDL封装的系统操作(转载）

    Andrew Haung bluedrum@163.com SDL封装很多操作系统的功能,为了保证SDL程序可移植性,最好尽量用这一些封装函数,哪果没有的话,才使用各种操作本地函数.  对于如何封各个 ...

  8. ArcMap2SLD添加中文支持

    首先,你可以从作者提供的链接下载ArcMap2SLD.zip(支持ArcMap10.2) 1.打开LUT_sld_mapping_file.xml文件(上传文件中已经修改)修改文件<LUT> ...

  9. BatchNorm caffe源码

    1.计算的均值和方差是channel的 2.test/predict 或者use_global_stats的时候,直接使用moving average use_global_stats 表示是否使用全 ...

  10. Linux网络综合命令——IP

    1.作用 ip是iproute2软件包里面的一个强大的网络配置工具,它能够替代一些传统的网络管理工具,例如ifconfig.route等,使用权限为超级用户.几乎所有的Linux发行版本都支持该命令. ...