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!