表格插件datatables
具体用法查看官网 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的更多相关文章
- 基于JQuery可拖动列表格插件DataTables的踩坑记
前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---DataTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全 ...
- JQuery表格插件DataTables 当前页合计功能
公司项目表格插件使用的是DataTables,最近添加表合计功能,发现百度统一都是如图类型的代码,不知道是配置问题还是怎么了,在我的页面下根本不能用 var addd=0; $(document).r ...
- 一款比较强大的jquery表格插件Datatables
Datatables是一款jquery表格插件.它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能. 链接:http://www.datatables.club/ 本人无聊时发现的一款用 ...
- jquery表格插件Datatables使用、快速上手
Datatables使用 一.简介 官网:https://datatables.net/ 中文官网:http://datatables.club/ Datatables是一款jquery表格插件.它是 ...
- jquery 强大表格插件 DataTables
官网:https://datatables.net/ 配置:https://datatables.net/reference/option/ API :https://datatables.net/r ...
- metronic 表格插件 datatables
官方网站:https://datatables.net/ css引入:datatables.min.css && datatables.bootstrap.css && ...
- 前端表格插件datatables
下载datatables datatables官网:https://www.datatables.net/ datatables下载地址:https://www.datatables.net/down ...
- datatables 前端表格插件 增删改查功能
官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet ...
- Datatables快速入门开发--一款好用的JQuery表格插件
博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jqu ...
随机推荐
- 21、List遍历时修改元素的问题
List迭代时修改元素的问题 请编写代码完成以下需求:判断一个List里面是否包含monkey,如果包含的话,向集合中添加1024这个字符串.‘ package com.monkey1024.list ...
- Linux基础-host文件解析
任务目标:为集群内的机器设定主机名,利用/etc/hosts文件来解析自己的集群中所有的主机名, 相应的集群的配置应该改成使用主机名的方式 使用 hostnamectl set-hostname 设定 ...
- 调整扩大VMDK格式VirtualBox磁盘空间
如果虚拟机的格式是VDI格式的, 那么可以通过这篇文章来调整磁盘大小: 调整Virtual Box硬盘大小 不过楼主当初在创建虚拟机的时候,是用的VMDK格式, 以求与VMWare的兼容性.这时候要扩 ...
- 建立ARM交叉编译环境 (arm-none-linux-gnueabi-gcc with EABI)【转】
转自:http://lib.csdn.net/article/embeddeddevelopment/60172?knId=886 建立ARM交叉编译环境 (arm-none-linux-gnueab ...
- linux通配符,grep和 egrep区别
其实主要是正则表达式中的一些特殊语法.在网上找的几篇文章,截取相关部分贴在了下面,方便以后翻阅. 参考:http://hi.baidu.com/sei_zhouyu/item/c18e1a950d2e ...
- TreeCollection2
Tree Collection 2 Table of Contents Introduction Structure Interfaces Data Node structure Tree struc ...
- JS调用百度地图API标记地点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- WinScp几个极大提高开发效率的小功能
WinSCP 是一个 Windows 环境下使用 SSH 的开源图形化 SFTP 客户端.同时支持 SCP 协议.它的主要功能就是在本地与远程计算机间安全的复制文件. 最近研究了一下winscp的一些 ...
- SQL Server中常用全局变量介绍
在SQL Server中,全局变量是一种特殊类型的变量,服务器将维护这些变量的值.全局变量以@@前缀开头,不必进行声明,它们属于系统定义的函数.下表就是SQL Server中一些常用的全局变量. 全局 ...
- Effective STL 笔记 -- Item 9: Choose carefully among erasing options
假设有一个容器中存放着 int ,Container<int> c, 现在想从其中删除数值 1963,可以有如下方法: 1: c.erase(remove(c.begin(), c.end ...