How to apply sorting by clicking on column header in PHP?

Question

I have to apply sorting which refreshes the page and displays the sorted list on clicking on particular column header in ascending or descending order. I don't want the entire page to refresh but just refresh the area where sorting is to be applied.

Here is the code for just displaying the data

<?php
include_once("session.php");
include_once("functions.php");

$username = $_SESSION["username"];
$conn1 = mysqli_connect("localhost","root","","jobportal");

$sql1 = "SELECT * FROM job_info WHERE username='$username' AND approved=1";

$stmt1 = $conn1->query($sql1);
?>

<div class="wrapper">
    <div class="main-panel">
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-12">
                        <div id="content" style="margin:0 auto; overflow:hidden;">
                            <div style="background-color:#86E4F9; overflow:hidden;border-radius:5px;">
                                <div class="col-md-2" >Date </div>
                                <div class="col-md-1" >Job Name</div>
                                <div class="col-md-2" >Industry</div>
                                <div class="col-md-2" >Skills</div>
                                <div class="col-md-2" >Operation</div>
                                <div class="col-md-1" >Show More</div>
                                <div class="col-md-2" >View Applicants</div>
                            </div>
                            <div style="clear:both;"></div>
                            <div style="background-color:#BBFDFB; overflow:hidden;">
                            <?php
                                while($row1 = $stmt1->fetch_array()) {
                                    echo "<div class='col-md-2'>".$row1[14]."</div>";
                                    echo "<div class='col-md-1'>".$row1[1]."</div>";
                                    echo "<div class='col-md-2'><a href='jobListIndustry.php?industry=$row1[7]' class='delete'>".$row1[7]."</a></div>";
                                    echo "<div class='col-md-2'>".$row1[11]."</div>";
                                    echo "<div class='col-md-2'><a href='delete.php?id=$row1[0]'><i class='fa fa-remove'></i></a>";
                                    echo "<a href='edit.php?id=$row1[0]'><i class='fa fa-pencil-square-o'></i></a></div>";
                                    echo "<div class='col-md-1'><a href='showmore.php?id=$row1[0]'>Show More</a></div>";
                                    echo "<div class='col-md-2'><a href='viewApplicants.php?jobId=$row1[0]'>View Applicants</a></div>";
                                    echo "<div style='clear:both;'></div>";
                                } ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>