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. DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞

    DedeCMS flink_add Getshell漏洞 管理员CSRF漏洞 1.漏洞利用 由于tpl.php中的$action,$content,$filename变量没有初始化,从而能操纵这些变量 ...

  2. bzoj2330: [SCOI2011]糖果

    2330: [SCOI2011]糖果 Time Limit: 10 Sec Memory Limit: 128 MB Description 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友 ...

  3. HDU 4081Qin Shi Huang's National Road System（次小生成树）

    题目大意: 有n个城市,秦始皇要修用n-1条路把它们连起来,要求从任一点出发,都可以到达其它的任意点.秦始皇希望这所有n-1条路长度之和最短.然后徐福突然有冒出来,说是他有魔法,可以不用人力.财力就变 ...

  4. 仿window系统自带的日期差计算器类

    public class MonthSubstract { /// <summary> /// 日期差之月份 /// </summary> public int Months ...

  5. iOS之UIKit系列教程<一>

    前言:博主接触iOS的编程也有一段时间,今天把有关UI控件的一些知识在这里做一些总结. 申明:此系列文章都是使用目前最新版本swift3.0.1进行讲解的,与其他版本可能略有差异. 一,UIKit之设 ...

  6. Swift_提醒框

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px Menlo; color: #ffffff } p.p2 { margin: 0.0px 0. ...

  7. kettle将Excel数据导入oracle

    导读 Excel数据导入Oracle数据库的方法: 1.使用PL SQL 工具附带的功能,效率比较低 可参考这篇文章的介绍:http://www.2cto.com/database/201212/17 ...

  8. T-SQL 关闭数据库所有连接

    原文引用自: http://www.cnblogs.com/kissazi2/p/3462202.html 下面给出一种删除数据库活动连接的方式.将下面代码段中的"--修改一下"处 ...

  9. C#：泛型（Generic）

    前言:  此系列都为个人对C#的回顾,属于个人理解,新司机可参考.求老司机指点.如果有什么问题或不同见解,欢迎大家与我沟通! 目录:  泛型是什么 泛型的好处及用途 如何声明使用泛型 泛型类 泛型方法 ...

  10. spring jdbc 查询结果返回对象、对象列表

    首先,需要了解spring jdbc查询时,有三种回调方式来处理查询的结果集.可以参考 使用spring的JdbcTemplate进行查询的三种回调方式的比较,写得还不错. 1.返回对象(queryF ...