具体用法查看官网 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. 【leetcode 简单】 第七十八题 Nim游戏

    你和你的朋友,两个人一起玩 Nim游戏:桌子上有一堆石头,每次你们轮流拿掉 1 - 3 块石头. 拿掉最后一块石头的人就是获胜者.你作为先手. 你们是聪明人,每一步都是最优解. 编写一个函数,来判断你 ...

  2. 【codeforces】【比赛题解】#940 CF Round #466 (Div. 2)

    人生的大起大落莫过如此,下一场我一定要回紫. [A]Points on the line 题意: 一个直线上有\(n\)个点,要求去掉最少的点,使得最远两点距离不超过\(d\). 题解: 暴力两重fo ...

  3. 冲量：momentum

    参见:http://www.jianshu.com/p/58b3fe300ecb,这个博客里有冲量的python实现的代码和讲解 “冲量”这个概念源自于物理中的力学,表示力对时间的积累效应. 在普通的 ...

  4. 使用os模块实现展示目录下的文件和文件夹

    Windows 10家庭中文版,Python 3.6.4 今天学习了os模块,下面是使用它开发的一个展示目录下的文件和文件夹的函数,代码如下: import os # deep大于等于1的整数,默认为 ...

  5. linux（vi）常用命令

    常用操作 系统命令 查看主机名 hostname 修改主机名(重启后无效) hostname yang 修改主机名(重启后永久生效) vi /ect/sysconfig/network 修改IP(重启 ...

  6. 分析new delete 的本质

    在程序设计中,数据可能会存在不同的内存空间,如函数栈 堆   全局变量区  ,今天我们来分析一下C++中堆分配方式和C语言的堆分配方式异同,从而更好的理解new  delete本质 C语言使用mall ...

  7. 本地为Windows，使用Xshell登录Linux云主机

    以某东的云主机为实例 1. 下载并安装远程登录软件 下载Xshell软件 下载后双击xshell5_5.0.1332.exe进行安装 2. 安装完成,打开Xshell,并点击新建,根据要求输入相应参数 ...

  8. 【[国家集训队]小Z的袜子】

    对于L,R的询问.设其中颜色为x,y,z的袜子的个数为a,b,c...那么答案即为(a*(a-1)/2+b*(b-1)/2+c*(c-1)/2....)/((R-L+1)*(R-L)/2)化简得:(a ...

  9. Linux学习笔记：wc查看文件字节数、字数、行数

    Linux系统中的wc(Word Count)命令可以统计指定文件中的字节数.字数.行数,并将统计结果显示输出. 若不指定文件名称,或是所给予的文件名为“-”,则wc指令会从标准输入设备读取数据. 语 ...

  10. 1、树莓派3B开箱+安装系统

    说白了,树莓派就是英国人为学生开发的一款微型电脑.电脑能干什么,那就多了.英国小学生有用树莓派做气象站的,有检测家长开门回家的(可以安心玩游戏了),总之脑洞有多大就可以玩多大. 了解到了之后就一直心水 ...