datatables 相关问题

jQuery 数据表导出到 Excel，并带有单元格（<td>）背景色

PFB 是我的代码示例： https://codepen.io/avinash-reddy95/pen/eYzORmJ。 $(文档).ready(函数() { var 表 = $('#example').</desc> <question vote="0"> <p>PFB 是我的代码示例： <a href="https://codepen.io/avinash-reddy95/pen/eYzORmJ" rel="nofollow noreferrer">https://codepen.io/avinash-reddy95/pen/eYzORmJ</a>.</p> <pre><code>&lt;script type=&#34;text/javascript&#34;&gt; $(document).ready(function () { var table = $(&#39;#example&#39;).DataTable({ &#34;paging&#34;: false, &#34;info&#34;: false, searching: false, dom: &#39;Bfrtip&#39;, buttons: [ { extend: &#39;excelHtml5&#39;, title: &#39;custom&#39; } ] }); }); &lt;/script&gt; </code></pre> <p>我正在使用 jQuery datable 来呈现表格并使用 dataTable 导出到 Excel 功能。我能够成功导出 Excel，但如果单元格有任何背景颜色，我想导出到带有单元格背景颜色的 Excel。</p> <p>在上面的示例中，“薪水”、“年龄”、“日期”列的某些单元格颜色为红色，我想用这些颜色导出。有人可以帮我解决这个问题吗？</p> </question> <answer tick="false" vote="0"> <p>此方法可自动创建新的 Excel 样式 - 其中一种样式可用于重新创建具有红色背景的 HTML 表格单元格。</p> <p>起点是这样的数据表：</p> <p><a href="https://i.sstatic.net/jbpsI.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvamJwc0kucG5n" alt="enter image description here"/></a></p> <p>最终结果是这样的：</p> <p><a href="https://i.sstatic.net/a86Fw.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvYTg2RncucG5n" alt="enter image description here"/></a></p> <p>在我的例子中，我选择将那些红色背景的单元格的 Excel 字体设置为白色，只是为了演示目的，但一个小小的更改就会恢复原来的黑色。</p> <p>这是代码：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code>$(document).ready(function() { var table = $(&#39;#example&#39;).DataTable( { dom: &#34;Brftip&#34;, buttons: [{ extend: &#39;excelHtml5&#39;, customize: function(xlsx) { // set up new styles: let styles = xlsx.xl[&#39;styles.xml&#39;]; let stylesCount = parseInt($( &#39;cellXfs&#39;, styles ).attr(&#34;count&#34;), 10); addCellColorStyles(styles, stylesCount); // use new styles: let sheet = xlsx.xl.worksheets[&#39;sheet1.xml&#39;]; //$( &#39;row c&#39;, sheet ).attr( &#39;s&#39;, (stylesCount + 1).toString() ); highlightCells(sheet, stylesCount); } }] } ); var myFontColors = [ &#39;548235&#39;, // idx 0 - mustard &#39;ffc000&#39;, // idx 1 - dark green &#39;000000&#39;, // idx 2 - black &#39;ffffff&#39; // idx 3 - white ]; var myFillColors = [ &#39;548235&#39;, // idx 0 - mustard &#39;ffc000&#39;, // idx 1 - dark green &#39;ff0000&#39; // idx 2 - red ]; var myCellStyles = [ { fontIdx: 0, fillIdx: 1 }, // idx 0 - mustard on green { fontIdx: 1, fillIdx: 0 }, // idx 1 - green on mustard { fontIdx: 2, fillIdx: 2 }, // idx 2 - black on red { fontIdx: 3, fillIdx: 2 } // idx 3 - white on red ]; function addCellColorStyles(styles, stylesCount) { // add font styles: let fontsCount = parseInt($( &#39;fonts&#39;, styles ).attr(&#34;count&#34;), 10); myFontColors.forEach((color) =&gt; { $( &#39;fonts&#39;, styles ).append( fontTmplt(color.toUpperCase()) ); }); $( &#39;fonts&#39;, styles ).attr(&#34;count&#34;, (fontsCount + myFontColors.length).toString()); // add fill styles: let fillsCount = parseInt($( &#39;fills&#39;, styles ).attr(&#34;count&#34;), 10); myFillColors.forEach((color) =&gt; { $( &#39;fills&#39;, styles ).append( fillTmplt(color.toUpperCase()) ); }); $( &#39;fills&#39;, styles ).attr(&#34;count&#34;, (fillsCount + myFillColors.length).toString()); // add cell styles: myCellStyles.forEach((style) =&gt; { $( &#39;cellXfs&#39;, styles ).append( cellXfTmplt(fontsCount + style.fontIdx, fillsCount + style.fillIdx) ); }); $( &#39;cellXfs&#39;, styles ).attr(&#34;count&#34;, (stylesCount + myCellStyles.length).toString()); } function highlightCells(sheet, stylesCount) { $( &#39;#example&#39; ).dataTable().api().rows( { search: &#39;applied&#39; } ) .every( function ( rowIdx, tableLoop, rowLoop ) { var xlRow = rowLoop +3; // +1 for DT zero index; +1 for title row; +1 for row heading in Excel $.each( $( &#39;td&#39;, $(this.node()) ), function( index, trNode ) { var bgColor = $(trNode).css(&#34;background-color&#34;); if ( bgColor &amp;&amp; bgColor === &#39;rgb(255, 0, 0)&#39; ) { // just handle red backgrounds let xlCol = createXlColLetter(index); let xlRef = xlCol + xlRow; let cellSelector = &#39;c[r=&#39; + xlRef + &#39;]&#39;; let cellStyle = 3; // 3 is my custom style index for white on red let cellStyleID = (stylesCount + cellStyle).toString(); $(cellSelector, sheet).attr( &#39;s&#39;, cellStyleID ); } } ); } ); } // to build an Excel column letter reference from an // integer (1 -&gt; A, 2 -&gt; B, 28 -&gt; AB, and so on...); function createXlColLetter( n ){ var ordA = &#39;A&#39;.charCodeAt(0); var ordZ = &#39;Z&#39;.charCodeAt(0); var len = ordZ - ordA + 1; var s = &#34;&#34;; while( n &gt;= 0 ) { s = String.fromCharCode(n % len + ordA) + s; n = Math.floor(n / len) - 1; } return s; } // style templates function fontTmplt(color) { return `&lt;font&gt;&lt;sz val=&#34;11&#34; /&gt;&lt;name val=&#34;Calibri&#34; /&gt;&lt;color rgb=&#34;${&#39;FF&#39; + color}&#34; /&gt;&lt;/font&gt;`; } function fillTmplt(color) { return `&lt;fill&gt;&lt;patternFill patternType=&#34;solid&#34;&gt;&lt;fgColor rgb=&#34;${&#39;FF&#39; + color}&#34; /&gt;&lt;bgColor indexed=&#34;64&#34; /&gt;&lt;/patternFill&gt;&lt;/fill&gt;`; } function cellXfTmplt(fontIdx, fillIdx) { return `&lt;xf numFmtId=&#34;0&#34; fontId=&#34;${fontIdx}&#34; fillId=&#34;${fillIdx}&#34; borderId=&#34;0&#34; applyFont=&#34;1&#34; applyFill=&#34;1&#34; applyBorder=&#34;1&#34; /&gt;`; } } );</code></pre> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&#34;UTF-8&#34;&gt; &lt;title&gt;Cell Colors Demo&lt;/title&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css&#34;/&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://cdn.datatables.net/buttons/2.2.3/css/buttons.dataTables.min.css&#34;/&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-3.6.0.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; type=&#34;text/css&#34; href=&#34;https://datatables.net/media/css/site-examples.css&#34;&gt; &lt;/head&gt; &lt;body&gt; &lt;div style=&#34;margin: 20px;&#34;&gt; &lt;table id=&#34;example&#34; class=&#34;display dataTable cell-border&#34; style=&#34;width:100%&#34;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Position&lt;/th&gt; &lt;th&gt;Office in Country&lt;/th&gt; &lt;th&gt;Age&lt;/th&gt; &lt;th&gt;Start date&lt;/th&gt; &lt;th&gt;Salary&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;Tiger Nixon&lt;/td&gt; &lt;td&gt;System Architect&lt;/td&gt; &lt;td&gt;Edinburgh&lt;/td&gt; &lt;td&gt;61&lt;/td&gt; &lt;td&gt;2011/04/25&lt;/td&gt; &lt;td&gt;$320,800&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Garrett Winters&lt;/td&gt; &lt;td&gt;Accountant&lt;/td&gt; &lt;td&gt;Tokyo&lt;/td&gt; &lt;td&gt;63&lt;/td&gt; &lt;td&gt;2011/07/25&lt;/td&gt; &lt;td&gt;$170,750&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Ashton Cox&lt;/td&gt; &lt;td&gt;Junior &#34;Technical&#34; Author&lt;/td&gt; &lt;td&gt;San Francisco&lt;/td&gt; &lt;td&gt;66&lt;/td&gt; &lt;td&gt;2009/01/12&lt;/td&gt; &lt;td&gt;$86,000&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Cedric Kelly&lt;/td&gt; &lt;td&gt;Senior Javascript Developer&lt;/td&gt; &lt;td style=&#34;background-color: red&#34;&gt;Edinburgh&lt;/td&gt; &lt;td&gt;22&lt;/td&gt; &lt;td&gt;2012/03/29&lt;/td&gt; &lt;td&gt;$433,060&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Airi Satou&lt;/td&gt; &lt;td&gt;Accountant&lt;/td&gt; &lt;td&gt;Tokyo&lt;/td&gt; &lt;td style=&#34;background-color: red&#34;&gt;33&lt;/td&gt; &lt;td&gt;2008/11/28&lt;/td&gt; &lt;td&gt;$162,700&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Donna Snider&lt;/td&gt; &lt;td&gt;Customer Support&lt;/td&gt; &lt;td&gt;New York&lt;/td&gt; &lt;td&gt;27&lt;/td&gt; &lt;td&gt;2011/01/25&lt;/td&gt; &lt;td&gt;$112,000&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> <p></p> <p>部分代码与我最初的尝试相同，但也有一些差异。主要区别在于，此代码在 <pre><code>addCellColorStyles</code></pre> 函数中自动向 DataTables 创建的 Excel 工作表添加新样式。</p> <p>用户必须首先设置他们想要使用的背景颜色（参见<pre><code>myFillColors</code></pre>） - 以及可选的前景色（字体）颜色。</p> <p>然后将这些组合成新的样式，在 <pre><code>myCellStyles</code></pre>。</p> <p>因为我们要将样式添加到工作表中现有样式的列表中，所以我们必须跟踪样式计数 - 因此有逻辑可以做到这一点 - 并相应地调整自定义样式索引：</p> <pre><code>let cellStyle = 3; // 3 is my custom style index for white on red let cellStyleID = (stylesCount + cellStyle).toString(); </code></pre> <hr/> <p>总的来说，这种方法还假设电子表格的第 1 行有一个标题：</p> <pre><code>var xlRow = rowLoop +3; // +1 for DT zero index; +1 for title row; +1 for row heading in Excel </code></pre> <p>因此，如果标题被抑制，则需要将 <pre><code>+3</code></pre> 调整为 <pre><code>+2</code></pre>。</p> <hr/> <p>但通过这种方法，整个电子表格生成过程都是自动化的。</p> </answer> <answer tick="false" vote="-1"> <p>您对这样的细胞的使用（简化）...</p> <pre><code>&lt;td&gt;&lt;a href=&#34;&#34; style=&#34;background-color: red;&#34;&gt;&lt;i&gt;$12,345&lt;/i&gt;&lt;/a&gt;&lt;/td&gt; </code></pre> <p>...确实让事情变得更加复杂。</p> <p>要确定 HTML 使用的背景颜色，您可以迭代表格的单元格，然后以这种方式提取颜色。</p> <p>这是这样做的一个例子。</p> <p>假设您在一个函数中拥有所有这些逻辑：</p> <pre><code>customize: function ( xlsx ) { var sheet = xlsx.xl.worksheets[&#39;sheet1.xml&#39;]; highlightCells(sheet); } </code></pre> <p>功能是：</p> <pre><code> function highlightCells(sheet) { $( &#39;#example&#39; ).dataTable().api().rows( { search: &#39;applied&#39; } ) .every( function ( rowIdx, tableLoop, rowLoop ) { var xlRow = rowLoop +2; // +1 for DT zero index; +1 for row heading in Excel $.each( $( &#39;td&#39;, $(this.node()) ), function( index, trNode ) { var bgColor = $(&#39;a&#39;, trNode).css(&#34;background-color&#34;); if ( bgColor ) { var xlCol = createXlColLetter(index); var xlRef = xlCol + xlRow; console.log( &#39;xlRef = &#39; + xlRef + &#34;: bgColor = &#34; + bgColor ); var cellSelector = &#39;c[r=&#39; + xlRef + &#39;]&#39;; console.log( cellSelector ); var cellStyleID = 10; // assume all are &#34;rgb(255, 0, 0)&#34; (red) $(cellSelector, sheet).attr( &#39;s&#39;, cellStyleID ); } } ); } ); } </code></pre> <p>它还使用支持函数将列整数转换为 Excel 字母：</p> <pre><code> // to build an Excel column letter reference from an // integer (1 -&gt; A, 2 -&gt; B, 28 -&gt; AB, and so on...); function createXlColLetter( n ){ var ordA = &#39;A&#39;.charCodeAt(0); var ordZ = &#39;Z&#39;.charCodeAt(0); var len = ordZ - ordA + 1; var s = &#34;&#34;; while( n &gt;= 0 ) { s = String.fromCharCode(n % len + ordA) + s; n = Math.floor(n / len) - 1; } return s; } </code></pre> <p>主要功能使用此选择器定位单元格的背景颜色：</p> <pre><code>var bgColor = $(&#39;a&#39;, trNode).css(&#34;background-color&#34;); </code></pre> <p>在上面的代码中，我假设它始终是红色的 (<pre><code>rgb(255, 0, 0)</code></pre>)，因此我将格式化 ID 硬编码为 <pre><code>10</code></pre>。</p> <p>但是您可以使用 switch 语句来处理一系列颜色。</p> <p><strong>但是...</strong></p> <p>这对您来说可能仍然只是部分解决方案。</p> <p>如果您的单元格数据不是纯文本（例如 Excel 货币值或数字），则应用其中一种内置样式可能会强制 Excel 单元格丢失其数字格式。 DataTables 提供的每个内置样式都会覆盖您可能想要的任何其他样式。</p> <p>例如 - 如果我从这个 HTML 表开始：</p> <p><a href="https://i.sstatic.net/W5gH3.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvVzVnSDMucG5n" alt="enter image description here"/></a></p> <p>...我最终会得到这个 Excel 工作表：</p> <p><a href="https://i.sstatic.net/3rqFJ.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvM3JxRkoucG5n" alt="enter image description here"/></a></p> <p>您可以看到货币格式已丢失 - 因为样式 10 是 <em>普通文本，红色背景</em>。正常是指 Excel“通用”文本格式。</p> <p>您不能将 2 个或多个数据表样式应用到一个单元格。</p> <p>因此，这意味着您现在必须在 Excel 电子表格中提前准备好所需的所有样式，然后解压缩 Excel 文件，从相关 Excel 样式文件中获取相关 HTML，并将其应用到您的 DataTables Excel 文件中。</p> <p>这就是OP在<a href="https://stackoverflow.com/questions/62434346/datatables-excel-style-based-on-cell-class">我最初链接到的问题</a>中所做的事情。所以我认为这就是你在你的情况下也需要做的。</p> <p>完成此操作后，您仍然可以使用上面的示例代码 - 但您将使用来自样式表的样式 ID - 而不是 DataTables 中可用的内置样式 ID。</p> </answer> </body></html>

从最近日期数据表 dd/mm/yyyy 开始排序

我使用 DataTables 插件制作了一个表格。 我创建了一个名为“日期”的列，其中包含一些日期。使用“日期”附近的按钮，我可以订购记录，但我必须使用这种格式...

使用fixedColumn的数据表滚动x问题

我使用带有固定列的 jquery 数据表。一切正常，但我在滚动 x 时遇到问题。 正如你所看到的，我无法从固定列中删除滚动 x。有什么想法可以解决这个问题吗？

如何使用 JQuery pdfHtml5 将整个 DataTable 在 pdf 中居中

我喜欢使用 $('#tableId').DataTable() 和“pdfHtml5”按钮来生成 PDF。我只是不知道如何将生成的 PDF 中的信息居中。 只有两列的表格

使用数据表导出到Excel

我想导出到Excel。这是我的代码。 $('#tabelku').dataTable({ dom: 'Bfrtip', “纽扣”： [{ ...

使用 jQuery 删除表格的所有行

我有一个javascript函数，可以使用jquery在表中插入新行。这是代码： $.each(数据,函数(i,项目){ $('#tb-articoli').dataTable().fnAddData( [ ...

用数据表中的当前日期减去数据库中的日期

我有一个以 YYYY-MM-DD 格式存储在数据库中的日期。我想用当前日期减去日期来计算年差。 我的代码如下所示： ... 我有一个以 YYYY-MM-DD 格式存储在数据库中的日期。我想用当前日期减去日期来计算年差。 我的代码如下所示： <table id="my_table"> <tr> <th>Name</th> <th>DOB</th> <th>Age</th> </table> 脚本 <script type="text/javascript"> $(function() { let table = $("#my_table").DataTable({ ajax: "{{route('my_table')}}", columns: [ {data:'Name',name:'Name',orderable:false}, {data:'DOB',name:'DOB',orderable:false}, {data:null,title : 'days', render: function ( data, type, row ) { var dbdate = moment(data.DOB, 'YYYY-MM-DD'); var now = moment(); return now.diff(dbdate, 'Age'); }}, ] }); }); </script> （我查看了这个链接，但是如果实现了计算代码，我的数据表将不会加载。） 没关系，测试了一些代码并找到了结果。 {data:null, render: function (data, type, row, meta){ const date=new Date(); let date2=new Date(row.DOB_E); return Math.floor((date-date2)/(365.25 * 24 * 60 * 60 * 1000)); }

DataTable 初始化为“无结果可显示”，但 dt-length、dt-search、dt-info 和 dt-paging 正在显示，并且 dt-paging NaN 作为 data-dt-idx

jQuery：3.7.1 数据表：2.0.6 $(#dtTable).DataTable({ 分页：真实， 排序：真实， 服务器端：正确， 搜索： 真实， // 表的排序默认 [列,方向] 哦...

jquery removeClass 不删除类

在我的数据表的createdRow函数中，我试图从最后一个TD中删除一个类。下面是该函数的代码。添加类只是一个测试，看看该函数是否被触发......

如何在 JQuery DataTable 中默认显示所有行

有人知道如何在 jQuery 数据表中默认显示所有行吗？ 我已经尝试过这段代码，但它默认只显示 10 行。 $("#adminProducts").dataTable({ “aLengthMenu”：[100...

数据表居中对齐

我在页面上有一个表格，并使用数据表检索和显示内容。但列未与中心对齐。这就是现在的样子。点击这里 。这就是我的创作方式...

Yajra Laravel Datatables 阻止一列排序仅在对另一列进行排序时才起作用

我正在尝试创建一个数据表，如下所示，但我不希望打印第一列和最后一列，可排序甚至用于搜索，但这仅在我单击排序按钮进行排序时才有效...

单击标题内的输入字段时，DataTables 会过滤列

我有一个 DataTables 实例，它在表的标题中附加一个选择。这是一个显示它的代码笔。 这是将选择添加到标题的代码的相关部分 初始化完成：

table.column(0).checkboxes.selected() 返回数据表的所有行

我是数据表新手，并且已经在数据表的每一行中实现了复选框。我为此遵循了这个示例。 我只想返回选定行的数据，但它返回所有数据...

有没有办法用Python计算这个表？

我在 python 中计算这个表时遇到了麻烦，因为 x 轴和 y 轴有范围。有没有一种方法可以输入此表，而无需手动输入范围内的所有数字？例如...

返回数据为空时DataTable未初始化

我们对 DataTable v1.10.20 进行了动态设置，以便在数据为空时初始化数据表事件，因为当选择选择选项时，数据表将被特定数据填充。 现在我们更新了 jQuery

Datatable .column() 不返回任何内容

我使用数据表 1.10.18 有以下代码（是的，我知道，这是旧代码，更新数据表版本需要大量重写）： ... 我使用数据表 1.10.18 有以下代码（是的，我知道，这是旧代码，更新数据表版本需要大量重写）： <table id='testtable' class='datatable'> <tr><td>Within value</td><td>Second column</td></tr> <tr><td>Without value</td><td>Second column</td></tr> </table> <script> var testtable = $('#testtable').dataTable({ paging: true, bLengthChange: true, bPaginate: true, bFilter: false, bSort: false, autoWidth: true, sDom: 'lrtp', columns: [ { sTitle: 'ACTIVITY' }, { sTitle: 'DATE' } ] }); var table = $('#testtable').DataTable(); </script> 污垢简单，光秃秃的骨头。当我在控制台中运行 table.data() 时，我正确地获取了数据数组。所以信息是正确的，并且可以访问。但是，当我运行 table.column(0) 或任何导数函数时，我没有得到任何结果。我想做的是table.column(0).search('Within').draw()。当我尝试运行它时，没有任何变化。 据我所知，我正在做与https://datatables.net/examples/api/regex.html上完全相同的事情，除了我是静态而不是动态地做。我已经对我的代码进行了双重和三次检查，我不明白为什么 .column() 函数不起作用，或者它之后的任何内容。我做错了什么？ 解决方案是删除以下选项： bFilter: false （或将其设置为 true，这是默认值）。 对于 DataTables 版本 1.10 及以上版本，旧的 bFilter 选项 现在已重命名为searching - 尽管旧名称仍然可以使用（如您的代码中所示）。 searching的文档阐明了此选项： 允许启用或禁用数据表的搜索功能。 因此您已在代码中禁用搜索（过滤）。这就是为什么您没有获得预期的 DataTables 结果。 还请注意： “当我运行 table.column(0) 或任何导数函数时，我没有得到任何结果” 正如您在屏幕截图中所示，您do得到了结果——您得到了一个返回的对象。您将其打印到控制台。 查看 column() 的 API 文档，它指出： 返回：结果集中具有选定列的 DataTables API 实例。 这正是您所得到的。 查看该列中的数据的一种方法是： console.log( table.column(0).data().toArray() ); 打印： Array [ "Within value", "Without value" ] 请注意，您不需要定义该 table 变量。您可能需要这样做的原因未在问题中显示，但您可以做更简单的事情： var testtable = $('#testtable').DataTable({ paging: true, bLengthChange: true, bPaginate: true, //bFilter: false, bSort: false, autoWidth: true, sDom: 'lrtp', columns: [{ sTitle: 'ACTIVITY' }, { sTitle: 'DATE' } ] }); testtable.column(0).search('Within').draw();<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.datatables.net/1.10.18/js/jquery.dataTables.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css"> </head> <body> <div style="margin: 20px;"> <table id='testtable' class='datatable'> <tr> <td>Within value</td> <td>Second column</td> </tr> <tr> <td>Without value</td> <td>Second column</td> </tr> </table> </div> </body> </html> 您可以自己运行上面的代码片段。 我改变了这个： var testtable = $('#testtable').dataTable({ 对此： var testtable = $('#testtable').DataTable({ 这是一个微妙的变化 - 小写d变为大写d。您可以在此处了解差异： 注意 $( selector ).DataTable() 和 $( selector ).dataTable() 之间的区别。前者返回一个 DataTables API 实例，而后者返回一个 jQuery 对象。 因此，您的代码没有返回 DataTables 实例 - 因此您需要使用 var table = $('#testtable').DataTable(); 创建一个实例。就我而言，我已经创建了一个 DataTables 实例并将其分配给 testtable。无需创建 table 变量。 S，我删除了它，并在各处使用了 testtable。

jQuery 可编辑数据表

我正在做一个使用jQuery，MVC的项目。 为此，我正在使用 jquery 数据表，所以我需要添加一个可编辑的数据表，用户可以通过单击表行来添加数据......并且当我单击但是......

如何将 dt-render 函数与 yadcf-filter_match_mode: 'exact' 和分隔符结合起来？

我已经尝试和搜索了很长时间，但找不到解决方案。 字段值由分隔符分隔。为了更好地显示它，我用逗号替换它。然而，过滤器的行为...

数据表导出到 Excel，无需保留定义的空格

我用DateTables创建了一个表格，起初表格本身定义的空格没有显示，这非常重要。我使用 html 标签 pre 修复了它。 现在我遇到的问题是...