Change static data array to database query results in DataTables

Change static data array to database query results in DataTables

Hello, I created a DataTables jQuery table that worked good using a static data array. But I now need to use database query results. I have little experience with javascript, I just need to get this one search page to work. Thanks so much for any help... 

------------------------------------------------------------------------------------------------------------

<?php  
 $connect = mysqli_connect("localhost", "user123X", "pass123X", "page_list");  
 $query ="SELECT * FROM page_list ORDER BY page_name";  
 $result = mysqli_query($connect, $query);  
 ?>  
 <!DOCTYPE html>
<html>
<head>
  <script type="text/javascript" src="jQuery-3.2.1/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="DataTables-1.10.16/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="DataTables-1.10.16/css/jquery.dataTables.min.css"/>

  <style type="text/css">
  </style>
  <title>DataTables</title>

<script>
$(document).ready(function() {
  $('#page_list').dataTable({
    "ajax": 'array.txt',
        "columns": [
            { "data": "page_name" },
            { "data": "page_url",
         "render": function(data, type, row, meta){
            if(type === 'display'){
   data = '<a href="' + data + '" target="_blank">More Info</a>'
            }
            return data;
         }
      } 
   ]
});
});//]]> 
</script>

</head>
<body>

<p>Top of html...</p>
<p>&nbsp;</p>
table<br>
<table class="display" id="example">
    <thead>
        <tr>
            <th><p>Page Name</p></th>
            <th>Page url</th>
        </tr>
    </thead>
</table>

</body>
</html>

------------------------------------------------------------------------------------------------------------