The question is published on by Tutorial Guruji team.
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);