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 行数据删除、行上升、行下降功能演示的更多相关文章

  1. 一个将当前目录下HEX文件的第一行数据删除的程序

    为什么要写这样一个函数 在使用SoftConsole开发M3程序时,生成的hex文件,必须要把第一行数据删除,才能在Libero中使用,所以写了这个小工具,这是2.0版本了,第一版是直接删除第一行数据 ...

  2. jquery 模态对话框传值,删除,新增表格行

    个人的练习代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  3. Jquery datatables 重载数据方法

    参考这里 { RefreshTable('#table-example', '/BlogManage/GetLabelData'); } function RefreshTable(tableId, ...

  4. 黄聪：jquery+Datatables出现数据过长，表格不自动换行，columns设置width失效的办法

    添加下面的CSS代码即可: table.dataTable.nowrap th, table.dataTable.nowrap td{white-space: normal !important;}

  5. VBA高效删除不连续多行

    最近在搞VBA,在感叹Excel功能强大的同时,对于新接触的一门编程语言也很烦恼.很多基础的语法都要靠网上搜索.现总结一些学习到的心得. VBA高效删除不连续多行 在一个拥有几万条数据的Excel中, ...

  6. jquery DataTables表格插件的使用(网页数据表格化及分页显示)

    DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用Data ...

  7. Jquery DataTables 获取表格数据及行数据

    注意table变量是 1.jQuery DataTables 行号获取 $("#example tbody tr").on("click", function( ...

  8. Jquery table元素操作-创建|数据填充|重置|隐藏行

    1.Jquery创建表格 /** * 创建表格 * @param label 标题 json格式,数据结构见附录1 * @param data 数据 json格式,数据结构见附录1 * @param ...

  9. jquery datatable 多行(单行)选择(select)，行获取/行删除

    jquery datatable 多行(单行)选择(select),行获取/行删除 代码展示 // 示例数据源 var dataSet = [ ['Tasman','Internet Explorer ...

随机推荐

  1. python通过函数改变变量取值

    严格讲应该是"通过函数调用,改变引用对象".python中,要区分"变量名"和"对象" 如果是类的对象,是引用类型的,那么可以通过函数调用, ...

  2. MATLAB的三维散点图

    MATLAB中三维散点图函数为scatter3(x,y,z) 三维火柴图为stem3(x,y,z)

  3. maven上传jar到nexus本地仓库

    一.nexus新增本地仓库 Hosted Repository:本地仓库,部署组织内部的版本内容 Proxy Repository:代理仓库,代理远程的公共仓库,如maven中央仓库 Virtual ...

  4. 数据降维技术（1）—PCA的数据原理

    PCA(Principal Component Analysis)是一种常用的数据分析方法.PCA通过线性变换将原始数据变换为一组各维度线性无关的表示,可用于提取数据的主要特征分量,常用于高维数据的降 ...

  5. 配置LVS + Keepalived高可用负载均衡集群之图文教程

    负载均衡系统可以选用LVS方案,而为避免Director Server单点故障引起系统崩溃,我们可以选用LVS+Keepalived组合保证高可用性.  重点:每个节点时间都同步哈! C++代码 [r ...

  6. Solr学习总结（八）IK 中文分词的配置和使用

    最近,很多朋友问我solr 中文分词配置的问题,都不知道怎么配置,怎么使用,原以为很简单,没想到这么多朋友都有问题,所以今天就总结总结中文分词的配置吧. 有的时候,用户搜索的关键字,可能是一句话,不是 ...

  7. Css3阴影实例

    阴影大约从CSS2就开始有了,但是只有Safari一个浏览器支持它,到现在依然是这样.阴影在CSS3中可以应用在边框和文字上,就像图片的阴影效果一样.一般可以分为: box-shadow textsh ...

  8. [整理]AngularJS移动端开发遇到的问题

    最近在开发一个移动WebAPP的小项目,因为之前一直使用AngularJS, 对于这个项目,废话不多说,拿过来就用上了. 开发过程是一路通畅和舒服的,但是,却忽略了一个非常重要的问题,移动2G环境下的 ...

  9. 20155217-杨笛-c与java

    命是弱者的借口,运是强者的谦词 你有什么技能比大多数人(超过90%以上)更好? 针对这个技能的获取你有什么成功的经验? 与老师博客中的学习经验有什么共同之处? 其实我经常会去想自己有什么拿得出手的优点 ...

  10. AD域组策略-只显示指定的控制面板选项配置方法

    操作方法: 1.打开组策略管理器,新建一个组策略并右击编辑. 2,找到隐藏指定的“控制面板”项并双击打开:并参照设置: 填入要显示的控制面板项目,比如: joystick.cpl 表示将显示“游戏控制 ...