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. TYVJ1035 棋盘覆盖

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 给出一张n*n(n<=100)的国际象棋棋盘,其中被删除了一些点,问可以使用多少1*2的多米诺骨牌进行掩 ...

  2. Windows bat脚本学习（1）

    基础 首先所有命令在cmd命令行中都能找到说明: 例如 想知道type用法 输入type /? 其他命令都一样 type [drive:][path] filename 显示文本文件内容 虽然有点鸡肋 ...

  3. logistic regression与SVM

    Logistic模型和SVM都是用于二分类,现在大概说一下两者的区别 ① 寻找最优超平面的方法不同 形象点说,Logistic模型找的那个超平面,是尽量让所有点都远离它,而SVM寻找的那个超平面,是只 ...

  4. ubuntu 默认防火墙安装、启用、查看状态

    ubuntu 9.10默认的是UFW防火墙,已经支持界面操作了.在命令行运行ufw命令就可以看到提示的一系列可进行的操作. 最简单的一个操作:sudo ufw status可检查防火墙的状态,我的返回 ...

  5. 机器学习——利用K-均值聚类算法对未标注数据分组

    聚类是一种无监督的学习,它将相似的对象归到同一簇中.它有点像全自动分类.聚类方法几乎可以应用到所有对象,簇内的对象越相似,聚类的效果越好. K-均值(K-means)聚类算法,之所以称之为K-均值是因 ...

  6. Java学习笔记14---使用标志位控制循环

    使用标志位控制循环 前面提到了控制循环的常用技术:计数器控制的循环.另一种控制循环的常用技术是在读取和处理一个集合的值时指派一个特殊值.这个特殊的输入值也成为标志值(sentinel value),用 ...

  7. jQuery 中 jQuery(function(){})与(function(){})(jQuery) 的区别

    $(document).ready(function(){ // 在这里写你的代码... }); 在DOM加载完成时运行的代码 可以简写成 jQuery(function(){ // 在这里写你的代码 ...

  8. HTML中的SVG

    HTML5中的SVG是Scalable Vector Graphic的简称,是一种用来绘制矢量图的HTML5标签,由万维网联盟定制,是一个基于可扩展标记语言,用于绘制二维可缩放矢量图形. 是一种使用X ...

  9. C# 如何强制关闭WINWORD进程

    private void KillProcess(string processName) //调用方法,传参{try{ Process[] thisproc = Process.GetProcesse ...

  10. U盘容量变小解决办法

    之前买了个三星闪盘,容量32G,USB3.0 后来装了U盘系统Kali Linux,最近想用的时候发现容量变为6GB了,真的很奇怪. 于是万能的百度(别说为什么不用谷歌,防火墙呀...) 找到解决办法 ...