表格插件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 ...
随机推荐
- 莫队-小Z的袜子
----普通莫队 首先清楚概率怎么求假设我们要求从区间l到r中拿出一对袜子的概率sum[i]为第i种袜子在l到r中的数量 $$\frac{\sum_{i=l}^{r} {[sum[i] \times ...
- php strcmp()函数
<? $str = "LAMP"; $str1 = "LAMPBrother"; $strc = strcmp($str,$str1); switch ( ...
- C++ Primer 5th 第19章 特殊工具与技术
C++是一种通用型语言,其设计者希望它能处理各种各样的问题,因此除了一些能适用于所有问题的语言特性,还有一些适用于特定问题的特性. 控制内存分配 某些程序对内存分配有着特殊的需求,它们不适合使用标准的 ...
- 【iptables】linux网络防火墙-iptables基础详解(重要)
一:前言 防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...
- Ajax异步请求struts的JSON机制(省市区三级联动)
1.struts.xml <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts P ...
- 【算法】Base64编码
1.说明 Base64是网络上最常见的用于传输8Bit字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法. 2.编码 ASCII码 -> 十六进制码 -> ...
- 通过PDB文件实现非嵌入式的c++反射
上一篇blog我阐述了一种实现非嵌入式的反射的基本思路.相比于通过宏和模板实现,这种非嵌入的反射的优点是不需要写额外的代码来记录meta信息. 首先,为了在c++中实现反射系统,我认为需要解决以下两个 ...
- Oracle和MySQL的高可用方案对比【转】
关于Oracle和MySQL的高可用方案,其实一直想要总结了,就会分为几个系列来简单说说.通过这样的对比,会对两种数据库架构设计上的细节差异有一个基本的认识.Oracle有一套很成熟的解决方案.用我在 ...
- Nginx - 压缩模块
1. 前言 在 Nginx 中与网页压缩相关的模块有两个:一个是 HttpGzipModule,另一个是 HttpGzipStaticModule.前者用于启用在文件传输过程中使用 gzip 压缩,而 ...
- git —— 分支
git中每一个分支相当于一个时间线 并列且相互平行 控制用指针控制~ 1.第一种创建命令: $ git branch 分支名称 —— 创建分支 $ git checkout 分支名称 —— 切换分支 ...