DataTable change properties with Media Query

Question

I want to change the scrollX property of my DataTable to true when switched to mobile but I don't know how to do that, I have tried using media query but it does not seem to work. Any idea?

var mobview = window.matchMedia( "(max-width: 425px)" );
$(document).ready(function() {
    var table = $('#datatable').DataTable( {
        "scrollX": false,
        "bLengthChange": false,
        "ajax": "src/json/AttendanceReport.json",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "id" },
            { "data": "FullName" },
            { "data": "DaysPresent" },
            { "data": "DaysAbsent" },
            {"data":"DaysLate"}
        ],
        "order": [[1, 'asc']]
    } );
    
    if (mobview.matches) {
        table.scrollX=true;
    }

Answer 1

$(document).ready(function() {
    var mobview = window.matchMedia( "(max-width: 425px)" );
    var table = $('#datatable').DataTable( {
        "scrollX": !mobview.matches,
        "bLengthChange": false,
        "ajax": "src/json/AttendanceReport.json",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "id" },
            { "data": "FullName" },
            { "data": "DaysPresent" },
            { "data": "DaysAbsent" },
            {"data":"DaysLate"}
        ],
       "order": [[1, 'asc']]
 });

EDIT

matchMedia() method returns a object that can then be used to determine if the document matches the media query string.

mediaQueryList = window.matchMedia(mediaQueryString)

Where mediaQueryString stores information on a media query.

You can invoke multiple mediaQueryString as well, Let say an example

const mediaQueryList = window.matchMedia('(min-width: Xpx), (max-height: Ypx)');

It will result in output as follows

MediaQueryList {media: "not all, not all", matches: false, onchange: null}

Description of output (MediaQueryList)

1. media - A DOMString representing a serialized media query.
2. matches - Bolean (true/False)