-------------- 记录 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);
})11.修改默认排序
如果数据一次性全部返回前端，datatables 默认显示时是按照第一列的升序显示的
如何把默认的排序列设置其他列？
$('#example').DataTable( {
"order": [[ 1, 'asc' ]]
} );12.更改某列的排序方式
例如：点击第一列的排序，实际上是按照第五列的排序进行排序
columnDefs: [ { targets: [ 0 ], orderData: [ 1 ] //如果第一列进行排序，数据则按照第二列顺序排列 }]13.某列按照其绝对值进行排序
在 $('#table').DataTable({}) 之前定义
$.fn.dataTable.ext.type.order['value-abs-pre'] = function ( d ) { // log2FoldChange 按照绝对值进行排序
var v = Math.abs(d);
return v;
};
$('#table').DataTable({
columnDefs: [
{
targets: 0,
orderData: [5, 4, 7, 6] //如果第一列进行排序，有相同数据则按照第二列顺序排列
},
{
targets: 5,
type: "value-abs",
}
],
"order": [[ 5, "desc" ] ], // 第 6 列按照降序排列
})
