Datatables 行数据删除、行上升、行下降功能演示

最新推荐文章于 2022-08-30 11:05:40 发布

Irvin-bin

最新推荐文章于 2022-08-30 11:05:40 发布

阅读量3.7k

点赞数 1

分类专栏： datatables插件文章标签： datatables

datatables插件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

官方网站：http://www.datatables.net

最近在研究Datatables 的使用，其中包括行删除，行编辑，行上升，行下降。Google了一把，没有发现太多有用的资料，索性自己写一个简单的Demo，为了记录，也为了方便DataTables 的粉丝。

首先上HTML 结构（其中引入了jquery, Boostrap 和 Font-Awesome 图标）：

      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 文件的写法：

      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("亲，已经到底了");  
         }  
     });  
 });  

最后来一张效果图片：

DataTables Demo

Irvin-bin

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Datatables 行数据删除、行上升、行下降功能演示

Datatables 是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。官方网站：http://www.datatables.net 最近在研究Datatables 的使用，其中包括行删除，行编辑，行上升，行下降。Google了一把，没有发现太多有用的资料，索性自己写一个简单的Demo，为了记录，也为了方便DataTab
复制链接

扫一扫