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

【问题标题】：Error $.fn.DataTable.TableTools is not a function错误 $.fn.DataTable.TableTools 不是函数
【发布时间】：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 仍未定义。

标签： javascript jquery datatables 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 分支。

【讨论】：