具体用法查看官网 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. HTML5之2D物理引擎 Box2D for javascript Games 系列 第一部分

    我要的是能在H5页面上跑的javascript版的Box2D啊!!! 最近想学习Javascript版本的Box2D JS物理引擎,无奈搜了半天也没找到相对比较系统的资料 官方网站也只是简单的介绍,A ...

  2. Ubuntu 12.04 更新源的方法及地址

    本文章转自:http://www.maybe520.net/blog/424/ 安装好ubuntu 12.04之后,可以联网之后,马上要做的最重要的事情之一就是配置更新源列表,这样以后安装更新或者软件 ...

  3. 20165227 实验二《Java面向对象程序设计》实验报告

    2017-2018-4 20165227实验二<Java面向对象程序设计>实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉 ...

  4. Dream------scala--类的属性和对象私有字段实战详解

    Scala类的属性和对象私有字段实战详解 一.类的属性 scala类的属性跟java有比较大的不同,需要注意的是对象的私有(private)字段 1.私有字段:字段必须初始化(当然即使不是私有字段也要 ...

  5. codepage 和 charset

    codepage:简单地说,这是程序用于对字符进行编码的一个表.代码页是服务器的事情. 常见的三种codepage 简体中文 : 936 繁体中文 : 950 UTF-8 : 65001 如果你不想用 ...

  6. KVM，QEMU，libvirt入门学习笔记【转】

    转自:http://blog.csdn.net/julykobe/article/details/27571387 注:本文内容均来自网络,我只是在此做了一些摘抄和整理的工作,来源均有注明. 0.虚拟 ...

  7. Nginx - 压缩模块

    1. 前言 在 Nginx 中与网页压缩相关的模块有两个:一个是 HttpGzipModule,另一个是 HttpGzipStaticModule.前者用于启用在文件传输过程中使用 gzip 压缩,而 ...

  8. android设备休眠

    从上面的连接里面找到了一些资料: 如果一开始就对Android手机的硬件架构有一定的了解,设计出的应用程序通常不会成为待机电池杀手,而要设计出正确的通信机制与通信协议也并不困难.但如果不去了解而盲目设 ...

  9. InnoDB锁问题

    InnoDB锁问题 InnoDB与MyISAM的最大不同有两点:一是支持事务(TRANSACTION):二是采用了行级锁.行级锁与表级锁本来就有许多不同之处,另外,事务的引入也带来了一些新问题.下面我 ...

  10. Linux下LAMP服务器的搭建

    1.安装并配置Apache 安装apache的方法有很多种,这里选择通过yum方式进行安装,但需要Linux系统能够连接互联网,执行如下命令,安装Apache. # yum install httpd ...