PHP+html动态获取数据内容并分页

PHP+html动态获取数据内容并分页
需求：动态获取展示列表，并可分页
1.引入的js
(1) jquery.min.js
(2) pagination.js

<script type="text/javascript" src="../js/jquery.min.js"/></script>
<script type="text/javascript" src="../js/pagination.js"/></script>
<script>
    const pageSize = 3;//一页展示多少条
    let currentPage = 1;//分页第一页
    let totalPage=1//总共多少页
    $("#search").click(function () {
        var title = $("#title").val();
        $.ajax({
            url: "url",//动态展示的url
            type: 'POST',
            data: {title: title },
            dataType: "json",
            success: function (res) {
                var data = res.data.list;
                var html = "";
                for(var i = 0 ; i < pageSize ; i++) {
                    if(i < data.length) {
                        var title = data[i].title;
                        var id = data[i].id;
                        var url = "search/detail?ids=" + data[i].id;
                        html +="<tr>"
                        html +="<td ><input id='searchid' name='searchid' type='radio' value='"+id+"' ></td>"
                        html +="<td  href='" + url + "' class='label dialogit' title='" + title +"'>"+title+"</a></td>"
                        html +="</tr>"
                    }
                }
                $('#container').html(html);//赋值到html中
                // 调用pagination方法
                var counts = res.data.count;//数据总数
                totalPage=Math.ceil(counts / pageSize);//多少页
                var script = document.createElement('script');//外部引入js
                script.type = 'text/javascript';
                script.src = '/assets/js/pagination.js';
                document.body.appendChild(script);
                setTimeout(function (){
                    $(".Pagination").html("");
                    $('.Pagination').pagination({
                        pageCount: Math.ceil(counts / pageSize),
                        current:currentPage,
                        callback: function (api) {
                            var index = api.getCurrent();    // 获取点击之后的新页数
                            currentPage = index;
                            loadMoreData(data,index);
                        }
                    });
                },100)
            }
        });
    });
    
    //分页
    function loadMoreData(datas,index) {
        var title = $("#title").val();
        var page = index;
        $.ajax({
            url: "url",
            type: 'POST',
            data: {keytitle: keytitle,page:page,pageSize:pageSize},
            dataType: "json",
            success: function (res) {
                var data = res.data.list;
                var html = "";
                for(var i = 0 ; i < pageSize ; i++) {
                    if(i < data.length) {
                        var title = data[i].title;
                        var id = data[i].id;
                        var url = "search/detail?ids=" + data[i].id;
                        html +="<tr>"
                        html +="<td><input id='searchid' name='searchid' type='radio' value='"+id+"' ></td>"
                        html +="<td href='" + url + "' class='label dialogit' title='" + title +"'>"+title+"</a></td>"
                        html +="</tr>"
                    }
                }
                $('#container').html(html)
            }
        });
    }
</script>

2.html代码

 <table id="table" width="100%">
      <tbody data-listidx="0"  id="container">

      </tbody>
 </table>