我使用的window matchmedia脚本是错误的，还是我缺少其中非常重要的内容？

如何解决我使用的window matchmedia脚本是错误的，还是我缺少其中非常重要的内容？

我正在尝试创建MysqL记录的响应式显示，并且试图在其上附加响应式分页。为此，我使用了窗口matchmedia脚本。 我在网上找到了一个，并且在互联网上常见的示例也响应良好（我将示例附加在禁用模式下以方便参考）。 但是，当我尝试根据自己的需求使用customize（使用pageSize = 1）时，我发现它没有响应。 我确定我在脚本中犯了一些错误或遗漏了某些内容，但是由于我不了解JavaScript，所以我很乐意找一个可以帮助我找到它的人。 我正在使用的脚本如下-

        var mq = window.matchMedia("(max-width:468px)");
        myFunction(mq);
        mq.addListener(myFunction);
        function myFunction(mq) {
        if (mq.matches){
    pageSize = 1;
        //document.body.style.backgroundColor = "yellow";
        }
        else {
    pageSize = 5;
        //document.body.style.backgroundColor = "pink";
        }
        }
        //Pagination
        //pageSize = 1;
    var pageCount =  $(".line-content").length / pageSize;
    
        for(var i = 0 ; i<pageCount;i++){
        
        $("#pagin").append('<li><a href="javascript:void();">'+(i+1)+'</a></li> ');
        }
        $("#pagin li").first().find("a").addClass("current");
        showPage = function(page) {
        $(".line-content").hide();
        $(".line-content").each(function(n) {
            if (n >= pageSize * (page - 1) && n < pageSize * page)
                $(this).show();
        });        
    };
    
    showPage(1);
        
    $("#pagin li a").click(function() {
        $("#pagin li a").removeClass("current");
        $(this).addClass("current");
        showPage(parseInt($(this).text())); 
    });