DataTables - 如何使用自己的按钮进行导出?

2024-01-23

我使用 Materialise 作为我的 UI 框架,并使用 DataTables 作为我的表格。我有一个表需要导出到 Excel,我可以使用 DataTables 按钮很好地完成它。但是,它们是默认的 DataTables 按钮,我想使用 Materialize 按钮。

所以问题是:如何使用自己的按钮并让它们执行DataTables内置按钮的功能(特别是导出到Excel)?

我已经尝试使用 Materialize 按钮类的“className”选项,但这不起作用。我想我可能需要做一些 JQuery 函数。

感谢大家!

编辑:这是我的代码:

$(document).ready(function() {
var dataTable = $('#datatable').DataTable( {
    language: {
        search: "",
        searchPlaceholder: "Search"
    },
    dom: 'Brftip',
    buttons: [
        'copy',
        'csv',
        'excel',
        'pdf',
        'print'
    ]
} );

Use buttons.dom.button https://datatables.net/reference/option/buttons.dom.button定义用于按钮的类和元素。

例如:

var table = $('#example').DataTable({
    "ajax": 'https://api.myjson.com/bins/qgcu',
    "order": [],
    "dom": 'Bfrtip',        
    "buttons": {
       "dom": {
          "button": {
            "tag": "button",
            "className": "waves-effect waves-light btn mrm"
          }
       },
       "buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]   
    }
});

See 这个jsFiddle https://jsfiddle.net/ey891een/1/用于代码和演示。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

DataTables - 如何使用自己的按钮进行导出? 的相关文章

  • 未捕获的类型错误:无法读取未定义的属性“prop”

    我有 6 个输入复选框 如果选中的复选框超过 3 个 则最后一个复选框将被取消选中 为了更好地理解 请参阅我之前的question https stackoverflow com questions 35195235 if checkbox
  • 如何避免 TypeScript 中出现虚假的“未使用参数”警告

    我遇到过很多次这种情况 最后决定弄清楚正确的方法是什么 如果我有一个声明方法的抽象父类 然后一些具体子类在其实现中实现真正的逻辑 并且显然使用方法参数 但某些子类不需要在该方法中执行任何操作 因此不要使用方法参数 那些不必执行任何操作的方法
  • Excel VBA - 如何逐行读取csv文件而不是整个文件

    这是我需要读取的 csv 文件内容 header header header header header header value value value value value value value value value 我在网上找到
  • @RenderBody() 该怎么办?

    我有一个 ASP NET MVC 3 应用程序JQuery UI Tabs 我有一个主布局页面 layout cshtml 代码如下 大师 layout cshtml需要一个 RenderBody 代码 既然是必需的 那我该怎么办呢 我想我
  • 在 Chrome 中加载analytics.js时出现307重定向

    我正在构建一个网络应用程序并使用 Google Analytics analytics js 进行分析 我最近注意到 Chrome 中的分析功能无法正常工作 我使用单独模块中的标准代码片段加载分析并通过 requirejs 包含 我已验证该
  • 如何更改元素的 CSS 类并在单击时删除所有其他类

    我如何处理 AngularJS 2 中的一种情况 即单击一个元素需要更改其自己的样式 并且如果其他元素具有该样式 则需要将其删除 最好在一个函数中 如同Angular js 如何在单击时更改元素 css 类并删除所有其他元素 https s
  • 我们如何使用 thymeleaf 绑定对象列表的列表

    我有一个表单 用户可以在其中添加任意数量的内容表对象这也可以包含他想要的列对象 就像在 SQL 中构建表一样 我尝试了下面的代码 但没有任何效果 并且当我尝试绑定两个列表时 表单不再出现 控制器 ModelAttribute page pu
  • iPhone 点击时使 div 变暗

    当您的 div 附加了点击处理程序时 当点击该 div 时 iPhone 会使该 div 变暗 作为点击指示器 示例 在移动 Safari 上查看http jsbin com awejo3 4 http jsbin com awejo3 4
  • 元素不适应 Firefox 上的

    使用 ES6 ish D3js 模块运行 Angular 6 应用程序会导致 Firefox 出现问题 Chromium Chrome Safari 和 IE Edge 工作正常 伪代码看起来类似于 生产代码可以在下面找到
  • knockoutjs通过点击事件获取元素id

    我正在使用 knockoutjs 目前我认为有些东西看起来像这样 img src images image1 png 这允许我获取视图模型中的元素 ID pressedTab function tab console log Element
  • 选择在 Excel 宏(VBA 中的范围对象)中具有值的列

    如何修改 VBA 中的这一行以仅选择具有值的列 Set rng Range A1 Range A65536 End xlUp SpecialCells xlCellTypeVisible 我不认为我做的事情是正确的CountLarge财产是
  • SlickGrid 回调onRowSelect?

    我想在用户选择表中的一行时添加回调 但我不知道该怎么做 这是我到目前为止所拥有的
  • 什么是 TinyMCE jQuery 包?

    我被要求在项目中使用 TinyMCE 编辑器 在下载页面上 有一个主包 然后是一个 jQuery 包 This package contains special jQuery build of TinyMCE and a jQuery in
  • 标准 VBA 函数“找不到项目或库”

    因此 我必须在我的 PC 上运行别人的 Excel 应用程序 并且在标准函数 如日期 格式 十六进制 中间等 上收到 找不到项目或库 的信息 一些研究表明 如果我在这些函数前加上 VBA 前缀 如 VBA Date 中那样 它会正常工作 网
  • 动态 dom 操作后,如何在浏览器历史记录中保留 dom 状态?

    是否有一个通用的解决方案来保留 dom 状态 以便当用户使用后退 前进返回页面时 整个页面处于他们离开时的确切状态 这篇文章询问并回答了为什么不同浏览器和不同 javascript 库的行为不一致 Ajax 后退按钮和 DOM 更新 htt
  • 在firefox上用js改变表单方法

    我需要使用 javascript jQuery 或纯 更改表单的方法属性 我的表单有 method post 我尝试用以下方法更改它 submit button click function var url input id url val
  • 这个 JQuery 指令做什么 $(function(){...}) [重复]

    这个问题在这里已经有答案了 我最近一直在研究JQuery 尽管我知道一些东西 但书上有这样一句话我根本无法理解 function current entry 1 有谁知道这条线是如何工作的以及它的作用是什么 它类似于 JQuery 函数中的
  • jQuery 如何实现延迟滑动?

    我正在使用以下 jQuery div 框向上滑动 5 秒后淡出 有没有办法实现这一点 因为该框需要很长时间才能出现 document ready function load limit slideUp 500 have tried fast
  • 我如何用 javascript/jquery 进行两指拖动?

    我正在尝试创建当有两个手指放在 div 上时拖动 div 的功能 我已将 div 绑定到 touchstart 和 touchmove 事件 我只是不确定如何编写这些函数 就像是if event originalEvent targetTo
  • JavaScript 中“键”的类型是什么?

    当我失去焦点并开始思考一个愚蠢的问题时 我遇到了这样的时刻 var a b value b 的类型是什么 我的意思不是 值 的类型 而是标记为 b 的实际键 背景 当我必须创建一个字符串键时 我开始想知道这一点 var a b value

随机推荐