Scott Scott - 6 months ago 27
PHP Question

WordPress enqueue datatables library and CSS

I'm trying to enqueue datatables (datatables.net) library and css so here's what I did.

in functions.php in my child theme directory.

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' );


Then I realized that you have to change
$
to
jQuery
so I modified my
jq-assets.js
file as follows this is the file that contains the settings for my datatable.

// 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>';
}

});


But the table still won't work. I also checked the source code of the page to see if the enqueue had included the library in the page along with my settings and the css. (which I found to be present)

Does anyone know what I'm doing wrong here? If you would like to view the page in question you will need a user agent switcher and be able to change that to a mobile device as I'm working on a mobile version of my website which is only loaded if it detects a mobile user agent.

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

What am I doing wrong guys? Thanks for your help in advance!

Answer

Upon checking the console via developer tools on mobile version, it says:

jq-assets.js?ver=4.5.2:3 

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

Possible solution might be to replace:

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

with:

jQuery(function ($) {

Let me know if it works.

Edit:

Try this if above doesn't work:

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