javascript - WordPress排队数据表库和CSS

我正在尝试使datatables（datatables.net）库和CSS入队，所以这就是我所做的。

在我的子主题目录中的functions.php中。

function my_assets() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'datatables', '//cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js', array( 'jquery' ) );
    wp_enqueue_style( 'datatables-style', '//cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css' );
    wp_enqueue_script( 'jq-assets', get_stylesheet_directory_uri() . '/js/jq-assets.js', array( 'jquery' ) );
}

add_action( 'wp_enqueue_scripts', 'my_assets' );

然后我意识到您必须将$更改为jQuery，所以我如下修改了我的jq-assets.js文件，这是包含我的数据表设置的文件。

// Initialization of dataTable and settings.
 jQuery(document).ready(function ($) {
      var dataTable = $('#contracts-datatable').DataTable({
       bLengthChange: false,
       "pageLength": 5,
       "pagingType": "simple",
       "order": [[ 7, "asc" ]],
       "columnDefs": [
            {
                "targets": [ 5 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 6 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": [ 7 ],
                "visible": false,
                "searchable": true
            },
            {
                "targets": 0,
                "orderable": false
            },
            {
                "targets": 1,
                "orderable": false
            },
            {
                "targets": 2,
                "orderable": false
            },
            {
                "targets": 3,
                "orderable": false
            },
            {
                "targets": 4,
                "orderable": false
            }
        ],

// Dropdown filter function for dataTable from hidden column number 5 for filtering gifts.
       initComplete: function () {
            this.api().columns(5).every(function () {
                var column = this;
                var select = $('<select><option value="">Show all</option></select>')
                    .appendTo($("#contracts_control-panel").find("div").eq(1)) // append dropdown to div 2 in control panel
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val());
                    column.search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                        dataTable.page.len(5).draw(); //reset pagination after dropdown filter change.
                });
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>')
                });
            });
        }
    });

// This function is for handling Child Rows. (Not in use).
    $('#contracts-datatable').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = dataTable.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
    });

// Checkbox filter function below is for filtering hidden column 6 to show Free Handsets only.
    $('#contracts_checkbox-filter').on('change', function() {
        dataTable.draw();
      dataTable.page.len(5).draw(); //reset pagination after checkbox filter change.
    });

    $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
        var target = '£0.00';
        var position = data[6]; // use data for the position column
        if($('#contracts_checkbox-filter').is(":checked")) {
            if (target === position) {
            return true;
         }
         return false;
        }
        return true;
      }
    );

//Alternative pagination load more.
$('#load-more').on( 'click', function () {
    var i = dataTable.page.len() + 5; // Change value for pagination.
    dataTable.page.len( i ).draw();
} );

//Alternative pagination show less - 5. (Not in use).
$('#button-less').on( 'click', function () {
        var VisibleRows = dataTable.page.len();
    var i = VisibleRows - 5; // Change value for pagination.
    if (VisibleRows > 8) {
    dataTable.page.len( i ).draw();
    }
} );

// Opens all child rows
$("#contracts-datatable").DataTable().rows().every( function () {
    var tr = $(this.node());
    this.child(format(tr.data('child-value'))).show();
    tr.addClass('shown');
});

// This function is for displaying data from HTML "data-child-value" tag in the Child Row.
function format(value) {
      return '<div>' + value + '</div>';
  }

});

但是桌子仍然无法使用。我还检查了页面的源代码，以查看队列是否在页面中包括库以及我的设置和CSS。 （我发现在场）

有人知道我在做什么错吗？如果您想查看相关页面，则需要一个用户代理切换器，并能够将其更改为移动设备，因为我正在使用网站的移动版本，该版本只有在检测到移动用户代理时才会加载。

http://mobilereactor.co.uk/shop/mobile-phones/apple-iphone-5c-8gb-white-deals/

我在做错人吗？谢谢您的帮助！

最佳答案

通过移动版本的开发人员工具检查控制台后，它显示：

jq-assets.js?ver=4.5.2:3

Uncaught TypeError: $ is not a function(anonymous function)

可能的解决方案可能是替换：

jQuery(document).ready(function ($) {

与：

jQuery(function ($) {

让我知道它是否有效。

编辑：

如果上述方法不起作用，请尝试以下方法：

;(function($){
    // your code
})(jQuery);