错误 $.fn.DataTable.TableTools 不是函数

Posted 2023-05-09

【中文标题】错误 $.fn.DataTable.TableTools 不是函数

【英文标题】：Error $.fn.DataTable.TableTools is not a function

【发布时间】：2015-09-23 23:50:34

【问题描述】：

我在网上购买的一个模板中具有以下功能。我下载并引用了 TableTools 库，但对于 TableTools，调用 $.fn.DataTable.TableTools() 始终是 undefined。

如何在initDataTableHelper()这个函数中初始化TableTools？

function initDataTableHelper () 
        if ($.fn.dataTable) 
            $('[data-provide="datatable"]').each (function ()  
                $(this).addClass ('dataTable-helper');      
                var defaultOptions = 
                        paginate: false,
                        search: false,
                        info: false,
                        lengthChange: false,
                        displayRows: 10,
                        sRowSelect: "single"
                    ,
                    dataOptions = $(this).data (),
                    helperOptions = $.extend (defaultOptions, dataOptions),
                    $thisTable,
                    tableConfig = ;

                tableConfig.iDisplayLength = helperOptions.displayRows;
                tableConfig.bFilter = true;
                tableConfig.bSort = true;
                tableConfig.bPaginate = false;
                tableConfig.bLengthChange = false;  
                tableConfig.bInfo = false;

                if (helperOptions.paginate)  tableConfig.bPaginate = true; 
                if (helperOptions.lengthChange)  tableConfig.bLengthChange = true; 
                if (helperOptions.info)  tableConfig.bInfo = true;        
                if (helperOptions.search)  $(this).parent ().removeClass ('datatable-hidesearch');                

                tableConfig.aaSorting = [];
                tableConfig.aoColumns = [];

                $(this).find ('thead tr th').each (function (index, value) 
                    var sortable = ($(this).data ('sortable') === true) ? true : false;
                    tableConfig.aoColumns.push ( 'bSortable': sortable );

                    if ($(this).data ('direction')) 
                        tableConfig.aaSorting.push ([index, $(this).data ('direction')]);
                    
                );     

                // Create the datatable
                $thisTable = $(this).dataTable (tableConfig);

                if (!helperOptions.search) 
                    $thisTable.parent ().find ('.dataTables_filter').remove ();
                

                var filterableCols = $thisTable.find ('thead th').filter ('[data-filterable="true"]');

                if (filterableCols.length > 0) 
                    var columns = $thisTable.fnSettings().aoColumns,
                        $row, th, $col, showFilter;

                    $row = $('<tr>',  cls: 'dataTable-filter-row' ).appendTo ($thisTable.find ('thead'));

                    for (var i=0; i<columns.length; i++) 
                        $col = $(columns[i].nTh.outerhtml);
                        showFilter = ($col.data ('filterable') === true) ? 'show' : 'hide';

                        th = '<th class="' + $col.prop ('class') + '">';
                        th += '<input type="text" class="form-control input-sm ' + showFilter + '" placeholder="' + $col.text () + '">';
                        th += '</th>';
                        $row.append (th);
                    

                    $row.find ('th').removeClass ('sorting sorting_disabled sorting_asc sorting_desc sorting_asc_disabled sorting_desc_disabled');

                    $thisTable.find ('thead input').keyup( function () 
                        $thisTable.fnFilter( this.value, $thisTable.oApi._fnVisibleToColumnIndex( 
                            $thisTable.fnSettings(), $thisTable.find ('thead input[type=text]').index(this) ) );
                    );

                    $thisTable.addClass ('datatable-columnfilter');
                
            );

            $('.dataTables_filter input').prop ('placeholder', 'Search...');
        
    

【问题讨论】：

代码中没有对$.fn.DataTable.TableTools的引用。

将dom: 'T<"clear">t' 选项添加到var defaultOptions = \* ... *\, dom: 'T<"clear">t' , 以初始化TableTools，如here 所示。否则，如果您以正确的顺序加载 JS/CSS/SWF，您应该能够在调用 $(this).dataTable (tableConfig) 之后执行 direct initialization。

两种方法都行不通。它仍然未定义。有什么想法吗？

您能否展示一下如何加载您的 DataTables/TableTools JS 文件？如果您在$thisTable = $(this).dataTable (tableConfig); 之后添加此var tableTools = new $.fn.dataTable.TableTools( $thisTable, );，控制台中的确切消息是什么？

编辑的代码在上面。 var tableTools = new $.fn.dataTable.TableTools($thisTable, ); - TableTools 仍未定义。

【参考方案1】：

您正在使用 DataTables 1.9.4 和 TableTools 2.0.0。这个版本的 TableTools 当时没有$.fn.DataTable.TableTools() 功能。

相反，它可以通过添加sDom: 'T<"clear">t' 来初始化，如下所示：

                tableConfig = 
                   "sDom": 'T<"clear">lfrtip',
                   "oTableTools": 
                      "sRowSelect": "single"
                  
                ;

不过，我建议升级到最新版本的 DataTables (1.10.7) 和 TableTools (2.2.4)。不仅$.fn.DataTable.TableTools() 将可用，而且您将从所有更新中受益。 DataTables 1.10.x 分支向后兼容 1.9.x 分支。