trying to display data in dataTables table

i have a data.php code which is as follows:

and my html projects.php

include("db_connection.php")?>
include("Main_Dashboard.php")?>
"en">
include("partials/head.php")?>
"UTF-8">
"viewport" content="width=device-width, initial-scale=1.0">
Project Information Area
include("partials/add_button.php")?>
"#example" class="table-striped table-bordered" style="width:100%">
Municipality
Contact Person
Email
Phone
Designation
Department
Project Data
"text/javascript">
$(document).ready(function() {
$('#example').DataTable( {
"ajax" :{
"url":"data.php",
"dataSrc" : " "
},
"columns" : [
{"data":"Municipality"},
{"data":"Contact Person"},
{"data":"Email"},
{"data":"Phone"},
{"data":"Designation"},
{"data":"Deapartment"},
{"data":"ProjectData"},
]
});
});
include("partials/table_script.php")?>
include("partials/js_script.php")?>
$con = mysqli_connect("localhost", "root", "", "solid");
$result = mysqli_query($con, "SELECT municipality, contact_person, email, phone, designation, department, project_data FROM projects");
// Add all records into an array
$rows= array();
while($row = mysqli_fetch_array($result))
{
$rows [] = $row;
}
echo json_encode($rows);
?>