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. 《Javascript高级程序设计》读书笔记（1-3章）

    第一章 JavaScript简介 1.1 JavaScript简史 略 1.2 JavaScript实现 虽然 JavaScript 和 ECMAScript 通常都被人们用来表达相同的含义,但 Ja ...

  2. 8 HTML&JS等前端知识系列之jquery的自定义方法

    preface 有时候我们在前端写jquery的时候,会自己自定义些方法,这样可以不需要重复造轮子.先说说2种自定义方法的区别: 不跟在选择器后面的 跟在选择器后面的. 那下面说说如何自定义jquer ...

  3. centos 查看脚本

    centos 查看脚本 #!/bin/bash date >>info.txt echo "本机centos版本为" >>info.txt cat /etc ...

  4. TomCat的安装与配置方法

    经过自己的研究,各种烦,所以要写个博客,帮助大家安装这个软件. 一.安装TomCat(因为大家都安装了jdk,所以就不写了) 1.下载TomCat 网址如下:http://tomcat.apache. ...

  5. 红米2A高配刷机记录

    2014816 机型:红米2A高配版 设备型号:2014816 CPU:高通 线刷:fastboot平台 http://192.168.7.118/MesReports/Reports/Cutting ...

  6. hibernate学习一（hibernate简介与准备）

    一.hibernate简介 Hibernate是一个开放源代码的对象-关系映射(Object/Relational Mapping 即 ORM)框架,它对JDBC进行了非常轻量级的对象封装,它将POJ ...

  7. 2MyBatis入门--深入浅出MyBatis技术原理与实践(笔记)

    什么是 MyBatis ? MyBatis 是支持定制化 SQL.存储过程以及高级映射的优秀的持久层框架.MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集.MyBatis ...

  8. Android Textview实现文字颜色渐变效果

    最近做应用的时候遇到一个需求,一行文字的颜色需要一个渐变效果 如上所有 从左到有逐渐变化,自己写了一个demo实现上述效果 package com.huwei.example.test; import ...

  9. 使用axis开发web service服务端

    一.axis环境搭建 1.安装环境 JDK.Tomcat或Resin.eclipse等. 2.到 http://www.apache.org/dyn/closer.cgi/ws/axis/1_4下载A ...

  10. file xxx from install of xxx conflicts with file from xxx

    执行安装 rpm -ivh lib64stdc++6-4.6.1-2-mdv2011.0.x86_64.rpm 时提示以下错误: warning: lib64stdc++6-4.6.1-2-mdv20 ...