表格插件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 ...
随机推荐
- hdu 1004 Let the Balloon Rise(字典树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1004 Let the Balloon Rise Time Limit: 2000/1000 MS (J ...
- 【网页开发学习】Coursera课程《面向 Web 开发者的 HTML、CSS 与 Javascript》Week1课堂笔记
Coursera课程<面向 Web 开发者的 HTML.CSS 与 Javascript> Johns Hopkins University Yaakov Chaikin Week1 In ...
- Pytorch多进程最佳实践
预备知识 模型并行( model parallelism ):即把模型拆分放到不同的设备进行训练,分布式系统中的不同机器(GPU/CPU等)负责网络模型的不同部分 —— 例如,神经网络模型的不同网络层 ...
- mysql高可用架构 -> MHA部署-04
MHA架构图 本次MHA的部署基于GTID复制成功构建,普通主从复制也可以构建MHA架构. 下载所需的软件包 mkdir /server/tools -p //创建存放包的目录 [root@db01 ...
- arp命令 清arp表
平常删除arp都用arp-d.大量存在的时候 arp -n|awk '/^[1-9]/ {print arp -d $1}' | sh 清除所有arp表,以前用这个来清arp表貌会清空,没注意到存在i ...
- 本地为Windows,使用Xshell登录Linux云主机
以某东的云主机为实例 1. 下载并安装远程登录软件 下载Xshell软件 下载后双击xshell5_5.0.1332.exe进行安装 2. 安装完成,打开Xshell,并点击新建,根据要求输入相应参数 ...
- VS Code折腾记 - (1)扯淡
题外话 距离上篇介绍VSCode的文章已经过去四十多天,已经在正式项目作为主力开发工具了. 社区的发展非常快速,更新迭代够快,功能基本已经满足我所需了: 这个系列教程基于最新的vs code 1.8. ...
- 解决mysql不能远程登入的问题
mysql远程不能登入,问题就在于当时设置的账号只限制本地访问,mysql默认也只是本地访问. 之前的设置: 通过命令行登录管理MySQL服务器(提示输入密码时直接回车): mysql> /us ...
- Spring整合junit测试
本节内容: Spring整合junit测试的意义 Spring整合junit测试 一.Spring与整合junit测试的意义 在没整合junit之前,我们在写测试方法时,需要在每个方法中手动创建容器, ...
- USACO 5.1 Musical Themes(哈希+二分)
Musical ThemesBrian Dean A musical melody is represented as a sequence of N (1 <= N <= 5000) n ...