数据表插件中 csv 按钮的工具提示

问题描述 投票:0回答:2

是否有任何选项可以为数据表中的 csv 按钮提供工具提示? 我关于这个 csv 按钮的代码如下:

$('#example').dataTable( {
"bProcessing": true,
//"bServerSide": true,
"sAjaxSource": "datatabledb.php",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
//"sDom": 'T<"clear">rt',
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"aButtons": [
{
"sExtends": "csv",
"sButtonText": "Save to CSV",
"bFooter":false                             }
]
},
"oLanguage": {
"sSearch": "Search all columns:"
},
"aoColumns": [
null,
{ "bSortable": false }, // disable the sorting property for checkbox header
null,
null,
null,
null,
null,
null,
null,
null
]       
} );

请帮助我。

提前致谢。

button csv tooltip datatables
2个回答
1
投票

您可以使用 sTooltip :

"aButtons": [{
  "sExtends": "csv",
  "sButtonText": "Save to CSV",
  "sTooltip": "My CSV button's tooltip",
  "bFooter": false
}]

请参阅此处sFlash按钮选项部分中的工具提示选项

编辑 根据Srimanta的说法,“sTooltip”需要在“bFooter”之前才能工作。


0
投票

El HTML:

<table id="tabla-usuario" class="table table-bordered w-100" style="width: 100%;">
  <thead>
    <tr>
      <th>Opciones</th>
      <th>Usuario</th>
      <th>Nombre</th>
      <th>Apellidos</th>      
    </tr>
  </thead>
  <tbody>
  </tbody>
  <tfoot>
    <tr>
      <th>Opciones</th>
      <th>Usuario</th>
      <th>Nombre</th>
      <th>Apellidos</th>      
    </tr>
  </tfoot>
</table>

El JavaScript:

$('#tabla-usuario').dataTable({
  lengthMenu: [[ -1, 5, 10, 25, 75, 100, 200,], ["Todos", 5, 10, 25, 75, 100, 200, ]],//mostramos el menú de registros a revisar
  "aProcessing": true,//Activamos el procesamiento del datatables
  "aServerSide": true,//Paginación y filtrado realizados por el servidor
  dom:"<'row'<'col-md-3'B><'col-md-3 float-left'l><'col-md-6'f>r>t<'row'<'col-md-6'i><'col-md-6'p>>",//Definimos los elementos del control de tabla
  buttons: [ 'copy', 'excel', 'pdf'  ],
    "ajax": {
        url: '../ajax/usuario.php?op=listar',
        type: "get",
        dataType: "json",
        error: function (e) {
            console.log(e.responseText);
        },
    complete: function () {
     
      $(".buttons-copy").attr('data-bs-toggle', 'tooltip').attr('data-bs-original-title', 'Copiar');
      $(".buttons-excel").attr('data-bs-toggle', 'tooltip').attr('data-bs-original-title', 'Excel');
      $(".buttons-pdf").attr('data-bs-toggle', 'tooltip').attr('data-bs-original-title', 'PDF');        
      $('[data-bs-toggle="tooltip"]').tooltip();
    },
    },
    language: {
    lengthMenu: "Mostrar: _MENU_ registros",
    buttons: { copyTitle: "Tabla Copiada", copySuccess: { _: "%d líneas copiadas", 1: "1 línea copiada", }, },
    sLoadingRecords: '<i class="fas fa-spinner fa-pulse fa-lg"></i> Cargando datos...'
  },
  "bDestroy": true,
  "iDisplayLength": 10,//Paginación
  "order": [[2, "desc"]]//Ordenar (columna,orden)
}).DataTable();

结果:

© www.soinside.com 2019 - 2024. All rights reserved.