datatables 那点儿事

-------------- 记录 datatables 的那点儿事 持续更新 -----------------------

1. 点击 某个 td 触发的点击事件 （项目基于 vue.js）

let self = this
$('#example0 tbody').on('click', 'tr td:nth-child(2)', function(e) {
     var name = $(this).text();   //   当前 td 里的内容
     self.a()     //  这里 注意一下 this 的作用域，调用 vue 的方法 需要在点击事件前声明 this
});
复制代码

2.导出 csv excel copy 功能 （基于 vue.js）

--1.下载依赖 在 main.js 引入

import 'datatables.net-bs';
import jsZip from 'jszip';
import 'datatables.net-buttons-bs';
import 'datatables.net-buttons/js/buttons.colVis.min';
import 'datatables.net-buttons/js/dataTables.buttons.min';
import 'datatables.net-buttons/js/buttons.flash.min';
import 'datatables.net-buttons/js/buttons.html5.min';
window.JSZip = jsZip;
复制代码

--2.表格代码里加入下列代码

$('#exampledeg').DataTable({
          lengthMenu: [
            [25, 50, 100, -1],
            [25, 50, 100, "All"]
          ],
          pageLength: 25,
          dom: 'Bfrtip',
          buttons: [{
              extend: 'csv',
              text: '导出 csv',    // 按钮里要显示的文字
            },
            {
              extend: 'excel',
              text: '导出 excel',
            },
            {
              extend: 'copy',
              text: '复制所有',
            },
            {
              extend: 'copy',
              text: '复制 ID',
              exportOptions: {
                columns: [0]
              }
            },
          ]
        });
复制代码

--3.引入这些 js 会把 datatables 的css 给覆盖 我大致改了一下分页的css，如下

.active{
        border: 1px solid #979797 !important;
        background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
      }
      .paginate_button a {
        color: #666 !important;
        outline: none !important;
        text-decoration: none !important;
      }
      .paginate_button:hover a {
        color: #fff !important;
      }
      .disabled:hover a {
        color: #666 !important;
      }
      .paginate_button .active a {
        text-decoration: none !important;
      }
      .previous a,.next a{
        text-decoration: none !important;
        out-line: none !important;
        color: #666 !important;
      }

// 导出按钮样式
.btn-default {
  width: 80px !important;
  height: 35px !important;
  cursor: pointer;
}复制代码

参考链接

3.DT 的 copy 功能 会把 表头 和 网站的 title 也复制到剪切板上，那么如何去掉呢？

   怎样修改下载 csv 和 excel 的文件名呢？如下：

buttons: [{
              extend: 'csv',
              text: '导出 csv',
              filename: '文件名'
            },
            {
              extend: 'copy',
              text: '按钮文字',
              header: false,  // header 不复制
              title: null,    // 不显示 网页的 title
            }
           ]复制代码

参考链接

4. 当前页 刷新 and 重新加载表格

区别：当前页刷新还是停留在当前页

         重新加载表格，则回到第一页

1> 当前页刷新

$("#patients").DataTable().draw(false)复制代码

或

$("#patients").dataTable().fnDraw(false)
复制代码

2> 重新加载表格 返回第一页

this.table.ajax.reload()
复制代码

或

this.table.draw(true)
复制代码

5. 表格最后一列添加操作按钮 点击获取 整行 数据

添加 按钮

{
                  "data" : "id",
                  "mRender" : function(data, type, full) {
                      return '<button class="deletebutton">删除</button>'
                  }
              }
复制代码

监听按钮点击事件

$("#patients").on("click", '.deletebutton', function () {   // 只能这么写，否则监听按钮点击事件点击没反应
            var Row = $(this).parents('tr')[0]
            var Data = $("#patients").dataTable().fnGetData(Row)
            console.log(Data);    // 该按钮所在的整行数据
          })
复制代码

获取整行数据参考链接

6. 获取当前页所有数据

$('#patients').dataTable().fnGetData()
复制代码

7.服务端分页 默认为 GET 请求，改为 POST，并修改参数

"sServerMethod": "POST",
"sAjaxSource" : "/server/projects",  // 请求的 url
"fnServerData": function ( sSource, aoData, fnCallback ) {
        aoData.push({name: 'username', value: 'xxx'})   // 自行添加的请求参数（已包括 DT 自带参数）
          $.ajax( {
            "dataType": 'json',
            "type": "POST",
            "url": sSource,
            "data": aoData,
            "success": fnCallback
           } );
},
复制代码

8.数据还没加载完，表格内容的文字显示自定义

"oLanguage": {
                "sProcessing": "loading data..."
               },
复制代码

9.初始化表格报错 cannot reinitialise data table

$("#DataTable").dataTable().fnDestroy();    //  在初始化表格前 加上这句话 ！
    var table=$("#DataTable").DataTable({
复制代码

10.表头是动态的，点击某个单元格获取到它所对应的表头（也就是它的 key ）

1> 将它的 key 赋值给它的 value 属性，点击时获取它的 value 值

//   初始化
{
   "mDataProp": d,
   "mRender" : function(data, type, full) {
       let template = '<span value="'+d+'"class="text-decoration cursor-pointer datalink">' +  data + '</span>'
       return template
   }
}

//   点击事件
$("#table").on("click", '.datalink', function () {
    var Row = $(this).parents('tr')[0]
    var sampleId = $("#table").dataTable().fnGetData(Row).sampleId // 获取该行数据
    var type = $(this).attr("value")
    console.log(type)
})复制代码

2> 点击单元格获取该 td 的 index 再从表头数组里获取对应索引的值

$("#table").on("click", '.datalink', function () {
         var table = $('#table').DataTable();
         var index = table.cell($(this).parents('td')[0]).index().column
         var columnName = self.columns[index]['mDataProp']
         console.log(columnName);
})复制代码

参考链接