Bootgrid with php and mysql (query with joins)

<head>
<!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css">
    <link href="css/customize.css" rel="stylesheet" type="text/css" media="screen">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="css/jquery.bootgrid.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="row">
<div id="" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<table id="grid-data" data-toggle="bootgrid" data-ajax="true" data-url="beneficiaries_json.php" class="table table-bordered table-responsive table-striped table-hover">
<thead>
<td data-column-id="StudentID" data-type="numeric" data-identifier="true" class="text-center col-lg-1">StudentID</th>
<th data-column-id="Full Name" class="col-lg-2">Student's Full Name</th>
<th data-column-id="Gender"class="text-center col-lg-1">Gender</th>
<th data-column-id="CityName"class="text-center col-lg-1">City</th>
<th data-column-id="CourseDescriptionShort"class="text-center col-lg-1">Course Title</th>
<th data-column-id="Subject"class="text-center col-lg-2">Subject</th>
<th data-column-id="Sum(scholarshipdetails.ScholarshipAwarded)"class="text-right col-lg-1">Scholarship Awarded</th>
<th data-column-id="Sum(scholarshipdetails.HeldDeposit)"class="text-right col-lg-1">Deposit Witheld</th>
</thead>
</table>
</div>
</div>

<script src="js/jquery-1.11.2.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-hover-dropdown.js"></script>
<script src="js/jquery.bootgrid.js"></script>
<script src="js/jquery.bootgrid.fa.js"></script>

<script>
$(document).ready(function() {
      $('.js-activated').dropdownHover().dropdown();
});

//$("#grid-basic").bootgrid();
$("#grid-data").bootgrid({
    ajax: true,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return {
            id: "21"
        };
    },
    url: "beneficiaries_json.php",

});

  </script>
</body>