请教jquery一个页面渲染两个datatables总是出现其中一个table加载不成功导致

Posted 2023-04-09

难道没有人知道在tapestry中实现过两个datatables放在一个页面呈现的吗，这两个表是分别在两个zone里，一左一右

关于datatables同时处理两个表格，我的解决方法要根据你加载数据表的方式来定：
1、直接html的方式：这种比较简单，只要在初始化的时候将两个表格的id设置成不一样的即可，例如：table1和table2，初始化只要写，$("#table1").datatable();$("#table2").datatable();
2、data传入的方式：在加载data的过程中，例如：$("#table1").datatable(data:JSON.parse(tdata1);columns:[data:"0",data:"1",data:"2",data:"3");$("#table2").datatable(data:JSON.parse(tdata2);columns:[data:"0",data:"1",data:"2",data:"3");
3、使用ajax方式传入：跟data传入方式类似，分别进行ajax。
注意：2、3两种方式不要提前将初始化后面括号的内容进行变量绑定，容易出错。 参考技术A 在jquery里可以直接用isNaN()，因为他是javascript的类库。是由JavaScript语言写的。
例如：
<script type="text/javascript">
$(document).ready(function()
alert(isNaN($('#id').val()));
);
</script>可以直接使用追问

这个在tapestry里能用吗，isNaN(),它的作用是什么？我的问题是在一个页面中呈现两个datatables，总会出现一个表（随机的）提示正在加载中

参考技术B 我也遇到这个问题，你有找到解决方法吗？

渲染 JavaScript 会破坏 R Shiny DT (DataTable) 中的页面导航和反应功能

【中文标题】渲染 JavaScript 会破坏 R Shiny DT (DataTable) 中的页面导航和反应功能

【英文标题】：Rendering JavaScript breaks page navigation and reactive function in R Shiny DT (DataTable)

【发布时间】：2021-12-07 07:38:10

【问题描述】：

我有一个使用 R Shiny 构建的数据表，并使用我的反应函数 filteredData() 动态呈现数据。我从 Azure SQL 引入的数据有几列（索引 3 和 29），其中包含大量 nvarchar 文本；这段文字破坏了表格的视觉美感，让查看多行变得痛苦。我的解决方案是将这些列单元格中的可查看文本限制为 200 个字符，并将其余部分显示为悬停时的工具提示。

    output$table1 <- renderDT(
        DT::datatable(filteredData(),
                            selection = "single",
                            escape = FALSE,
                            style = "bootstrap4",
                            rownames = FALSE,
                            options = list(
                                dom = 'rtip',
                                scrollX=TRUE,
                                autoWidth = TRUE,
                                searching=FALSE,
                                ordering=TRUE,
                                bFilter = FALSE,
                                pageLength = 5,
                                columnDefs = list(list(
                                    targets = c(3, 28),
                                    width = '600px'
                                    # THIS BREAKS THE TABLE, CANNOT GO TO *NEXT* PAGE
                                    ,render = JS(
                                        "function(data, type, row, meta) ",
                                        "return type === 'display' && data.length > 200 ?",
                                        "'<span title=\"' + data + '\">' + data.substr(0, 200) + '...</span>' : data;",
                                        "")
                                )))
        ))

此解决方案有效（有点）。文本截断并按预期在悬停时显示工具提示，但随后破坏了允许用户转到数据表中的下一页或上一页的内置按钮（现在我将我的数据表限制为每页 5 条记录）。当我单击“下一步”时，屏幕中间会弹出一个半透明的小窗口并显示“处理中”，但卡在此循环中。 这也破坏了我对数据的反应式过滤。注释掉有问题的 Javascript

                                    #,render = JS(
                                    #    "function(data, type, row, meta) ",
                                    #    "return type === 'display' && data.length > 200 ?",
                                    #    "'<span title=\"' + data + '\">' + data.substr(0, 200) + '...</span>' : data;",
                                    #    "")

修复了页面导航，但我没有工具提示或文本截断。我查看了 DT 网站上的文档，除了我的反应式 SQL 派生数据之外，我不明白我在做什么不同。

编辑：我正在使用这些软件包，因为它的价值：shinymanager、tidyverse、DT、bs4Dash。我还在我的dashboardBody() 中调用了shinyjs::useShinyjs()。

【问题讨论】：

最好提供reproducible example。但是，你打电话给useShinyjs()了吗？似乎有时会错过。

我将尝试创建一个可重现的示例。但是，是的，我在仪表板正文中调用了 shinyjs::useShinyjs()

现在查看代码 - 哇，不知道为什么我认为这与 shinyjs 有关。哎呀！当我添加自己的数据框并将其粘贴到现有的闪亮应用程序中时，它可以正常工作。也许您的软件包需要更新？检查DT 和htmlwidgets。我也检查了库冲突。不过，我没有找到您列出的库。

【参考方案1】：

我不知道发生了什么，但你可以试试 ellipsis 插件：

library(DT) 

dat <- data.frame(
  A = c("fnufnufroufrcnoonfrncacfnouafc", "fanunfrpn frnpncfrurnucfrnupfenc"),
  B = c("DZDOPCDNAL DKODKPODPOKKPODZKPO", "AZERTYUIOPQSDFGHJKLMWXCVBN")
)

datatable(
  dat, 
  plugins = "ellipsis",
  options = list(
    columnDefs = list(list(
      targets = c(1, 2),
      render = JS("$.fn.dataTable.render.ellipsis( 200, false )")
    ))
  )
)