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. Mac OSX：Powerline风格的zsh配置

    需要的工具 iTerm,一个替代OSX自带终端的软件,基于iTerm才能实现上面的效果: oh-my-zsh,zsh是OSX上最强大的shell,没有之一,但是配置过程较为复杂,这个脚本能够帮你一键配 ...

  2. Java中创建对象的5种方式

    作为Java开发者,我们每天创建很多对象,但我们通常使用依赖管理系统,比如Spring去创建对象.然而这里有很多创建对象的方法,我们会在这篇文章中学到. Java中有5种创建对象的方式,下面给出它们的 ...

  3. Ubuntu学习总结-12 linux 平台及 windows 平台 mysql 重启方法

    一 Linux下重启MySQL的正确方法 1.通过rpm包安装的MySQL   service mysqld restart2.从源码包安装的MySQL   // linux关闭MySQL的命令$my ...

  4. 解决Python中不能输入汉字的问题

    我们在python的IDE中有时候会输入中文,python对中文不是太友好.现在我们就解决这个问题.一般情况下在你的代码前面加入: # coding: utf-8 reload(sys)sys.set ...

  5. mysql 查询制定日期数据

    //获取昨天更新数据的条件date_sub(current_date(), interval 1 day) = from_unixtime(senddate, '%Y-%m-%d') 注释:date_ ...

  6. DateUtils 学习记录1

    开发过程中很多时候都需要处理各种各样的日期..有些项目可能还会有自己的DateUtil.... 其实apache commons lang3有一个很好用的日期处理工具类,叫DateUtils... 基 ...

  7. [asp.net core] Tag Helpers 简介(转)

    原文地址 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/intro What are Tag Helpers? ...

  8. 线性插值&双线性插值&三线性插值

    http://www.cnblogs.com/yingying0907/archive/2012/11/21/2780092.html 內插是数学领域数值分析中的通过已知的离散数据求未知数据的过程或方 ...

  9. RabbitMQ修改端口号和心跳时间

    定读者正在Windows系列的操纵体系中装置好了Rabbit MQ后,请找到装置途径下的etc文件夹下,将rabbitmq.config.example备份一份,并点窜为config范例的文件,即为] ...

  10. python模块简介

    模块:用代码实现了某个功能的代码集合,功能模块化,节省时间,提高效率 一.模块的导入 导入模块,其实就是告诉python解释器去解释相应的.py文件 • 导入.py文件,解释器解释该.py文件 • 倒 ...