Datatables 是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。
官方网站:http://www.datatables.net
最近在研究Datatables 的使用,其中包括行删除,行编辑,行上升,行下降。Google了一把,没有发现太多有用的资料,索性自己写一个简单的Demo,为了记录,也为了方便DataTables 的粉丝。
首先上HTML 结构(其中引入了jquery, Boostrap 和 Font-Awesome 图标):
<!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("亲,已经到底了"); } }); });
最后来一张效果图片:
相关推荐
DataTables行分组的展开与折叠功能的实现
jquery.datatables,异步请求后台数据时,调用api动态合并行。
Datatables是一款jQuery表格插件,可以表头排序,内容过滤查询,功能很强大!
适合前端初学者 jquery中的datatable使用ajax读取数据 并展示表格数据
datatables增删改查,行内编辑等官方源码实例 冒泡编辑,多行编辑、删除,例子超多,官方的实现代码非常精简,可直接引用 datatables.dll,减少了非常多的页面脚本 带数据库SQL文件 vs2015工程
laravel-datatables-demo, Laravel 数据表演示应用程序 #Laravel 数据表演示程序Laravel 4 |5的数据表包 这个包是通过使用Eloquent的ORM或者Fluent查询生成器来处理 DataTables插件的服务器端工作的服务器端工作的。...
此资源用于databales的重新刷新加载数据的插件,具体如何应用可参照博文,请大家放心下载,该插件亲测有效。
用于dataTables 使用dataTables添加行辅助按钮如 修改/删除.
Datatables实现多选框与AJAX返回数据 JAVA版
从dataTables网站下载的导出扩展功能cav,pdf,excel等多个功能,非常方便使用,留个备份。
Laravel开发-datatables Laravel4的数据表jquery插件的服务器端处理程序
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格...这篇文章主要介绍了DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等),需要的朋友可以参考下
DataTables提供了多种用户设置,自动分页、排序(包括多条件排序)、隐藏部分列等功能。
使用datatables获取后台响应数据时,只能获取到aaData,而其他数据无法显示问题
datatables 异步请求数据
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
使用方法: ... ... ...也可使用Eclipse直接导入此项目文件...分页栏增加跳页功能(直接修改了dataTables.bootstrap.js和dataTables.bootstrap.css) CSS实现单元格超长文字省略号显示 CSS实现单元格连续纯字母数字强制换行显示
开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min开发工具 dataTables.bootstrap.min...