jquery Datatables 行数据删除、行上升、行下降功能演示
Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
官方网站:http://www.datatables.net
Datatables 的使用中遇到的一些问题,其中包括行删除,行编辑,行上升,行下降:
HTML结构:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1"> <title>DataTables Demo - Row up and down</title> <link rel="stylesheet" type="text/css" href="bootstrap-3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="font-awesome-4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="DataTables-1.10.5/css/jquery.dataTables.css"> <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="bootstrap-3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="DataTables-1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="demo.js"></script> </head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<table id="demo" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>姓名</th>
<th>职位</th>
<th>办公室</th>
<th>薪水</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>$320,800</td>
<td></td>
</tr>
<tr>
<td>李四</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$170,750</td>
<td></td>
</tr>
<tr>
<td>王五</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>$86,000</td>
<td></td>
</tr>
<tr>
<td>赵六</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>$433,060</td>
<td></td>
</tr>
<tr>
<td>小明</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>$162,700</td>
<td></td>
</tr>
<tr>
<td>小丽</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>$372,000</td>
<td></td>
</tr>
<tr>
<td>小春春</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>$137,500</td>
<td></td>
</tr> </tbody>
</table>
</div>
</div>
</div>
</body>
</html>
JS代码:
$(document).ready(function() { $('#demo').DataTable({
"paging": false,
"ordering": false,
"info": false,
"searching": false,
"columnDefs": [{
// 定义操作列
"targets": 4,
"data": null,
"render": function(data, type, row) {
var html = '<a href="javascript:void(0);" class="delete btn btn-default btn-xs"><i class="fa fa-times"></i> 删除</a>'
html += ' <a href="javascript:void(0);" class="up btn btn-default btn-xs"><i class="fa fa-arrow-up"></i> 上升</a>'
html += ' <a href="javascript:void(0);" class="down btn btn-default btn-xs"><i class="fa fa-arrow-down"></i> 下降</a>'
return html;
}
}],
language: {
"processing": "处理中...",
"lengthMenu": "显示 _MENU_ 项结果",
"zeroRecords": "没有匹配结果",
"info": "显示第 _START_ 至 _END_ 项结果,共 _TOTAL_ 项",
"infoEmpty": "显示第 0 至 0 项结果,共 0 项",
"infoFiltered": "(由 _MAX_ 项结果过滤)",
"infoPostFix": "",
"search": "搜索:",
"url": "",
"emptyTable": "表中数据为空",
"loadingRecords": "载入中...",
"infoThousands": ",",
"paginate": {
"first": "首页",
"previous": "上页",
"next": "下页",
"last": "末页"
},
"aria": {
"sortAscending": ": 以升序排列此列",
"sortDescending": ": 以降序排列此列"
}
}
}); // 初始化刪除按钮
$('#demo tbody').on('click', 'a.delete', function(e) {
e.preventDefault(); if (confirm("确定要删除该属性?")) {
var table = $('#demo').DataTable();
table.row($(this).parents('tr')).remove().draw();
} }); // 初始化上升按钮
$('#demo tbody').on('click', 'a.up', function(e) {
e.preventDefault();
var table = $('#demo').DataTable();
var index = table.row($(this).parents('tr')).index();
if ((index - 1) >= 0) {
var data = table.data();
table.clear();
data.splice((index - 1), 0, data.splice(index, 1)[0]);
table.rows.add(data).draw();
} else {
alert("亲,已经到顶了");
} }); // 初始化下降按钮
$('#demo tbody').on('click', 'a.down', function(e) {
e.preventDefault(); var table = $('#demo').DataTable();
var index = table.row($(this).parents('tr')).index();
var max = table.rows().data().length;
if ((index + 1) < max) {
var data = table.data();
table.clear();
data.splice((index + 1), 0, data.splice(index, 1)[0]);
table.rows.add(data).draw();
} else {
alert("亲,已经到底了");
}
});
});
--谨记铭心
jquery Datatables 行数据删除、行上升、行下降功能演示的更多相关文章
- 一个将当前目录下HEX文件的第一行数据删除的程序
为什么要写这样一个函数 在使用SoftConsole开发M3程序时,生成的hex文件,必须要把第一行数据删除,才能在Libero中使用,所以写了这个小工具,这是2.0版本了,第一版是直接删除第一行数据 ...
- jquery 模态对话框传值,删除,新增表格行
个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- Jquery datatables 重载数据方法
参考这里 { RefreshTable('#table-example', '/BlogManage/GetLabelData'); } function RefreshTable(tableId, ...
- 黄聪:jquery+Datatables出现数据过长,表格不自动换行,columns设置width失效的办法
添加下面的CSS代码即可: table.dataTable.nowrap th, table.dataTable.nowrap td{white-space: normal !important;}
- VBA高效删除不连续多行
最近在搞VBA,在感叹Excel功能强大的同时,对于新接触的一门编程语言也很烦恼.很多基础的语法都要靠网上搜索.现总结一些学习到的心得. VBA高效删除不连续多行 在一个拥有几万条数据的Excel中, ...
- jquery DataTables表格插件的使用(网页数据表格化及分页显示)
DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...
- Jquery DataTables 获取表格数据及行数据
注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...
- Jquery table元素操作-创建|数据填充|重置|隐藏行
1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...
- jquery datatable 多行(单行)选择(select),行获取/行删除
jquery datatable 多行(单行)选择(select),行获取/行删除 代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...
随机推荐
- [bzoj3626][LNOI2014]LCA
Description 给出一个$n$个节点的有根树(编号为$0$到$n-1$,根节点为$0$). 一个点的深度定义为这个节点到根的距离$+1$. 设$dep[i]$表示点$i$的深度,$lca(i, ...
- 基于Dubbo框架构建分布式服务(一)
Dubbo是Alibaba开源的分布式服务框架,我们可以非常容易地通过Dubbo来构建分布式服务,并根据自己实际业务应用场景来选择合适的集群容错模式,这个对于很多应用都是迫切希望的,只需要通过简单的配 ...
- coreseek操作
开启服务$ /usr/local/coreseek/bin/searchd -c /usr/local/coreseek/etc/csft.conf 重新索引: /usr/local/coresee ...
- MongoDB笔记
mongodb简介 MongoDB 是一个基于分布式文件存储的数据库.存储的是Bson结构的文档(二进制的JSON),内部执行引擎为JS解释器,把文档存储为BSON结构,在查询时,转换为JS对象,可以 ...
- [Android]学习笔记Activity_001
操作button的说明 设置button的ID: android:id="@+id/button" 设置button的点击事件 findViewById(R.id.button). ...
- Oracle数据库找回密码
Oracle数据库忘记用户的密码.经验证,可行的解决方案如下: 1.Ctrl + R 打开cmd窗口,输入 sqlplus / as sysdba (注意/左右两侧有空格) 2.运行cmd ,输入 ...
- Centos6.5下docker 环境搭建
一.运行docker Linux内核版本需要在3.8以上,针对centos6.5 内核为2.6的系统需要先升级内核.不然会特别卡,退出容器. 在yum的ELRepo源中,有mainline(3.13. ...
- 共有31款PHP 图形/图像处理开源软件(转)
详情点击:http://www.oschina.net/project/lang/22/php?tag=141&os=0&sort=view PHP 图像处理库 Grafika Gra ...
- eclipse自动补全的设置
eclipse自动补全的设置 如果你用过Visual Studio的自动补全功能后,再来用eclipse的自动补全功能,相信大家会有些许失望. 但是eclipse其实是非常强大的,eclipse的 ...
- logback日志写入数据库(mysql)配置
如题 建议将日志级别设置为ERROR.这样可以避免存储过多的数据到数据中. 1 logback 配置文件(如下) <?xml version="1.0" encoding ...