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("亲,已经到底了");
- }
- });
- });
最后来一张效果图片: