WordPress enqueue datatables library and CSS Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of WordPress enqueue datatables library and CSS without wasting too much if your time.

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);
We are here to answer your question about WordPress enqueue datatables library and CSS - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji