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