DataTable 使用媒体查询更改属性

Question

我想在切换到移动设备时将 DataTable 的 scrollX 属性更改为 true 但我不知道该怎么做，我尝试使用媒体查询 但它似乎不起作用。有什么想法吗？

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']]
 });

编辑

matchMedia() 方法 returns 一个对象，然后可用于确定文档是否与媒体查询字符串匹配。

mediaQueryList = window.matchMedia(mediaQueryString)

其中 mediaQueryString stores information on a media query.

你也可以调用多个mediaQueryString，举个例子

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

结果如下

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

输出说明 (MediaQueryList)

media - 表示序列化媒体查询的 DOMString。
匹配 - 布尔值 (true/False)

DataTable 使用媒体查询更改属性

DataTable change properties with Media Query

javascript

datatable