草庐IT

按钮的 jQuery Datatable DOM 定位

coder 2024-07-14 原文

我刚刚将我的 jQuery Datatable 版本升级到 1.10。然后我尝试删除其已退役的插件，例如带有“Button”扩展名的“Colvis”和“Tabletools”。这里一切正常。

但我的问题是，我无法将“Colvis”按钮与“Tabletool”按钮分开。 

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'p>B",
    "buttons": [
        'copyHtml5',
        'excelHtml5',
        'csvHtml5',     
        {
            extend: 'colvis',
            postfixButtons: [ 'colvisRestore' ],
            columns: '0,1,2,3,4,5,6'
        }
    ],
    language: {
        buttons: {
            colvis: 'Change columns'
        }
    }

在“sDom”中，字母“B”表示按钮。所以我将所有四个按钮(复制、Excel、CSV 和 Colvis)放在一行中。但我需要将“Colvis”按钮与(复制、Excel 和 CSV)分开。

那么有什么方法可以在搜索框附近添加一个按钮，在分页附近添加另一个按钮吗？

或

“sDom”或“Button”中是否有可用的配置？

谢谢!

最佳答案

您可以使用 <'.class'> 将新元素添加到 dataTables dom 控件中或 <'#id'> .例如，插入一个新的 <div id="colvis">分页左侧的元素，<'#colvis'>之前p :

"sDom": "B<'row'><'row'<'col-md-6'l><'col-md-6'f>r>t<'row'<'col-md-4'i>><'row'<'#colvis'>p>"

colvis 按钮类有 .buttons-colvis , 所以你将它们永久地移动到注入(inject)的 #colvis元素:

$('.buttons-colvis').detach().appendTo('#colvis')

这是将 colvis 按钮移动到另一个位置的快速方法。

关于@GreeKatrina 的建议，是的 - 但正确的放置方法是:

var colvis = new $.fn.dataTable.Buttons( table, {
    buttons: [
        {
            extend: 'colvis',
            ... 
        }
   ]
})
colvis.container().appendTo('#colvis')

如果您有一个 #colvis当然是元素。

我的建议: 除了上面的硬编码解决方案，您可以专门针对 colvis 按钮，您可以猴子修补 dataTables 按钮，这样每个扩展按钮都可以有一个 container。选项。初始化后，按钮移动到指定的container :

var org_buildButton = $.fn.DataTable.Buttons.prototype._buildButton;
$.fn.DataTable.Buttons.prototype._buildButton = function(config, collectionButton) {
   var button = org_buildButton.apply(this, arguments);
   $(document).one('init.dt', function(e, settings, json) {
       if (config.container && $(config.container).length) {
          $(button.inserter[0]).detach().appendTo(config.container)
       }
   })    
   return button;
}

使用container选项:

{
   extend: 'colvis',
   postfixButtons: [ 'colvisRestore' ],
   container : '#colvis', //<---
   columns: '0,1,2,3,4,5'
}

演示 -> http://jsfiddle.net/v4bLv83h/

如示例所示，您现在可以为每个按钮指定一个替代容器。注意 container可以是任何元素，它不一定是 dom 注入(inject)的元素.另请注意(您可能会在 fiddle 中注意到)如果您想让注入(inject)的元素与 native 控制元素(例如分页 block )一起正确流动，则需要进行一些样式设置。

关于按钮的 jQuery Datatable DOM 定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34416766/

DatatablejQuerycode39colvistwitter-bootstrapdatatablesdatatables-1.10

有关按钮的 jQuery Datatable DOM 定位的更多相关文章

  1. 「Python｜Selenium｜场景案例」如何定位iframe中的元素？ - 2

    本文主要介绍在使用Selenium进行自动化测试或者任务时，对于使用了iframe的页面，如何定位iframe中的元素文章目录场景描述解决方案具体代码场景描述当我们在使用Selenium进行自动化测试的时候，可能会遇到一些界面或者窗体是使用HTML的iframe标签进行承载的。对于iframe中的标签，如果直接查找是无法找到的，会抛出没有找到元素的异常。比如近在咫尺的例子就是，CSDN的登录窗体就是使用的iframe，大家可以尝试通过F12开发者模式查看到的tag_name,class_name,id或者xpath来定位中的页面元素，会抛出NoSuchElementException异常。解决

  2. ruby-on-rails - Rails 单选按钮 - 模型中多列的一种选择 - 2

    我希望用户从一个模型的三个选项中选择一个。即我有一个模型视频，可以被评为正面/负面/未知目前我有三列bool值(pos/neg/unknown)。这是处理这种情况的最佳方式吗？为此，表单应该是什么样的？目前我有类似的东西但显然它允许多项选择，而我试图将它限制为只有一个..怎么办？ 最佳答案 如果要使用字符串列，让我们说rating。然后在你的表单中:#...#...它只允许一个选择编辑完全相同但使用radio_button_tag: 关于ruby-on-rails-Rails单选按钮-模

  3. ruby-on-rails - 如何从按钮或链接单击的 View 调用 Rails 方法 - 2

    基本上，我试图在用户单击链接(或按钮或某种类型的交互元素)时执行Rails方法。我试着把它放在View中:但这似乎没有用。它最终只是在用户甚至没有点击“添加”链接的情况下调用该函数。我也用link_to试过了，但也没用。我开始认为没有一种干净的方法可以做到这一点。无论如何，感谢您的帮助。附言。我在ApplicationController中定义了该方法，它是一个辅助方法。 最佳答案 View和Controller是相互独立的。为了使链接在Controller内执行函数调用，您需要对应用程序中的端点执行ajax调用。该路由应调用rub

  4. ruby-on-rails - 如何在 Rails 中添加禁用的提交按钮 - 2

    我在ruby​​表单中有一个提交按钮f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id"我想在不使用任何javascript的情况下通过ruby​​禁用此按钮 最佳答案 添加disabled:true选项。f.submitbtn_text,class:"btnbtn-onemgt12mgb12",id:"btn_id",disabled:true 关于ruby-on-rails-如何在Rails中添加禁用的提交按钮，我们在St

  5. ruby-on-rails - 从 ActiveAdmin has_many 表单助手中删除 "Add new"按钮 - 2

    我在事件管理员编辑页面中有嵌套资源，但我只想允许管理员编辑现有资源的内容，而不是添加新的嵌套资源。我的代码看起来像这样:formdo|f|f.inputsdof.input:authorf.input:contentf.has_many:commentsdo|comment_form|comment_form.input:contentcomment_form.input:_destroy,as::boolean,required:false,label:'Remove'endendf.actionsend但它在输入下添加了“添加新评论”按钮。我怎样才能禁用它，并只为主窗体保留f.ac

  6. ruby - 按 Enter 键而不是用鞋子单击按钮(Ruby) - 2

    正如标题所暗示的那样，我只是在寻找一种无需单击即可按下Shoes中的按钮的方法。我已经搜索了论坛，但不幸的是找不到任何东西。谢谢 最佳答案 这在Windows下的红色鞋子中不起作用，因为Windows控件窃取了所有事件。不过，我设法在window下穿着绿鞋工作。举个例子['green_shoes'].each(&method(:require))Shoes.app{e=edit_linebutton("Clickme!"){alert("Youclickedme.")}keypress{|k|alert("YoupressedEnt

  7. ruby - 如何使用 Mechanize 保存通过单击按钮下载的文件 - 2

    我正在尝试使用Mechanize来模拟点击网页上的按钮，然后会在浏览器中启动文件下载。这是我的代码片段form=page.forms.first#=>Mechanize::Formform=agent.page.form_with(:name=>"aspnetForm")button=form.button_with(:value=>"GPXfile")ppbuttonagent.submit(form,button)pp按钮的输出是这样显示的，这意味着它是右键:#但是在发出“agent.submit(form,button)”之后，我怎样才能让Mechanize检索单击该按钮时将发送

  8. ruby-on-rails - 将 Bootstrap 图标添加到 Ruby on Rails 中的按钮 - 2

    我想在RubyonRails中为按钮添加图标。目前我尝试了以下方法:"),{:controller=>'events',:action=>"upvoteEvent",:method=>"put",:id=>@event.id,:uid=>current_user.id},{:class=>"btnbtn-success"}%>生成以下html:"/>我遵循了此处发布的解决方案:https://stackoverflow.com/a/10468935/1385324，但这对我不起作用。我还测试了BootstrapCSS是否正常工作，只需在网站的其他任何地方插入一个图标即可。感谢您的帮助!

  9. 打通源码，高效定位代码问题｜云效工程师指北 - 2

    大家好，我叫胡飞虎，花名虎仔，目前负责云效旗下产品Codeup代码托管的设计与开发。代码作为企业最核心的数据资产，除了被构建、部署之外还有更大的价值。为了帮助企业和团队挖掘更多源代码价值以赋能日常代码研发、运维等工作，云效代码团队在大数据和智能化方向进行了一系列的探索和实践（例如代码搜索与推荐），本文主要介绍我们如何通过直接打通源代码来提高研发与运维效率。随着微服务架构的流行，一个业务流程需要多个微服务共同完成。一旦出现问题，运维人员在面对数量多、调用链路复杂的情况下，很难快速锁定导致问题发生的罪魁祸首：代码。为了提高排查效率，目前常见的解决方案是：链路跟踪+日志分析工具相结合。即通过链路跟踪

  10. ruby-on-rails - 在 Facebook、转推等上分享直接 Ruby gem 中的按钮？ - 2

    注意http://techcrunch.com/2010/04/04/he-even-makes-coldplay-sound-fun/顶部的那些按钮在社交网络上分享网址？我想为我正在构建的网站做一些非常相似的事情。ShareThis提供了一个可以做同样事情的小部件，但它是品牌化的和外部的。我正在寻找纯Ruby解决方案。包含可包含在RailsApplicationHelper类中的模块的gem将是完美的。在我重新发明轮子之前，感谢您的建议!想象一下: 最佳答案 我能找到的最好的是:http://www.addthis.com/这里有

随机推荐