asp.net table.columns不是datatable.js中的函数

inkz8wg9  于 2023-11-20  发布在  .NET
关注(0)|答案(9)|浏览(148)
  1. <script>
  2. jQuery(document).ready(function () {
  3. $('#sample_3 tfoot th').each(function () {
  4. var title = $('#sample_3 thead th').eq($(this).index()).text();
  5. $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  6. });
  7. // DataTable
  8. var table = $('#sample_3').dataTable();
  9. // Apply the filter
  10. table.columns().eq(0).each(function (colIdx) {
  11. $('input', table.column(colIdx).footer()).on('keyup change', function () {
  12. table
  13. .column(colIdx)
  14. .search(this.value)
  15. .draw();
  16. });
  17. });
  18. });
  19. </script>

字符串
我得到了table.columns不是一个函数js错误,缺少了什么我不明白。
来源:https://datatables.net/examples/api/multi_filter.html

tvz2xvvm

tvz2xvvm1#

尝试更改

  1. var table = $('#sample_3').dataTable();

字符串

  1. var table = $('#sample_3').DataTable();


.也就是说,将DataTable()大写。来源:https://datatables.net/manual/api#Accessing-the-API

2g32fytz

2g32fytz2#

变更:

  1. table.columns()

字符串
致:

  1. table.api().columns()


对我很有效。

zzwlnbp8

zzwlnbp83#

我用dataTables的makeEditable()函数尝试了这个方法。如果我用DataTables()改变dataTables(),它就不工作了。
h0mayun的答案对我来说很有用。为了防止其他人搜索这个问题,我在h0mayun的评论中添加了一点东西。

  1. var table = $('#sample_3').dataTable();
  2. $('#sample_3 tfoot th').each(function (i)
  3. {
  4. var title = $('#sample_3 thead th').eq($(this).index()).text();
  5. // or just var title = $('#sample_3 thead th').text();
  6. var serach = '<input type="text" placeholder="Search ' + title + '" />';
  7. $(this).html('');
  8. $(serach).appendTo(this).keyup(function(){table.fnFilter($(this).val(),i)})
  9. });

字符串
并删除以下部分

  1. // Apply the filter
  2. table.columns().eq(0).each(function (colIdx) {
  3. $('input', table.column(colIdx).footer()).on('keyup change', function () {
  4. table
  5. .column(colIdx)
  6. .search(this.value)
  7. .draw();
  8. });
  9. });


希望能帮上忙。

展开查看全部
fdbelqdn

fdbelqdn4#

以前的答案都没有解决我的问题。
我发现的解决方案是使用table.api().column(colIdx)而不是table.column(colIdx)
我为一个包含姓名和年龄的表开发的工作示例:

  1. table = jQuery('#sel').dataTable( {
  2. "initComplete": function( settings, json ) {
  3. jQuery("#sel_filter").find("input").unbind();
  4. jQuery("#sel_filter").find("label").after(
  5. "<select id='opts'><option value='0'>Name</option>"+
  6. "<option value='1'>Age</option></select>");
  7. jQuery("#sel_filter").find("input").on('keyup change', function(){
  8. table.api().columns( jQuery("#opts").val()).search( this.value ).draw();
  9. });
  10. },
  11. "ajax": {
  12. "url": "urlvalue",
  13. "type": "GET"
  14. },
  15. "columns": [
  16. { "data": "name" },
  17. { "data": "age" }
  18. ]
  19. });

字符串
希望对你有帮助。

展开查看全部
7lrncoxx

7lrncoxx5#

试试这个

  1. var table = $('#sample_3').dataTable();
  2. $('#sample_3 tfoot th').each(function (i)
  3. {
  4. var title = $('#sample_3 thead th').eq($(this).index()).text();
  5. // or just var title = $('#sample_3 thead th').text();
  6. var serach = '<input type="text" placeholder="Search ' + title + '" />';
  7. $(this).html('');
  8. $(serach).appendTo(this).keyup(function(){table.fnFilter($(this).val(),i)})
  9. });

字符串

mwyxok5s

mwyxok5s6#

谢谢你的帮助。我有同样的错误信息。但在尝试了几乎所有的东西后,我发现,我的错误只是没有有一个

  1. <tfoot> ... </tfoot>

块在我的dataTable中。插入这个修复了它,我的dataTable可以将搜索输入附加到这个tfoot。

j0pj023g

j0pj023g7#

这个问题已经有一段时间没有被问到了,但我还是把这个贴出来,因为它可能会帮助到别人。
我有类似的问题,经过一些搜索,我意识到我必须包括文件位于-http://jquery-datatables-column-filter.googlecode.com/svn/trunk/media/js/jquery.dataTables.columnFilter.js到我的代码。

mm5n2pyu

mm5n2pyu8#

我知道这是一个2岁的帖子,但它仍然是在搜索这个问题时在谷歌搜索结果的顶部.所以我有同样的问题,但我没有改变代码修复它.我的代码的问题是,我使用了旧的jQuery或Datatables版本(不确定哪一个造成的麻烦),所以我在Datatables网站上生成一个新的链接:
https://datatables.net/download/index
包括jQuery2.x和其余的默认设置:
第一个月
因此,您必须删除包含的jQuery库和Datatables库,因为它们都包含在此链接中。之后,一切正常,没有任何错误.
所以我明白了为什么问题出在旧版本上:在旧版本的Datatables中,datatable是用函数调用的:

  1. $('#dt1').dataTable();

字符串
因此,旧版本的表被返回,其中不包括函数<tablevarname>.columns(),所以调用新函数:$('#dt1').DataTable();应该修复它(正如Rizzim已经说过的),但要做到这一点,你必须更新你的数据表,所以函数被包括在内.
(英语:Bad English)

ctzwtxfj

ctzwtxfj9#

我遇到了类似的问题,我建议尝试这个解决方案:
table.column(colIdx).footer()替换为table.**DataTable()**.column(colIdx).footer())
这应该可以解决问题。

相关问题