Add Bootstrap Table With Sorting Searching and Paging into my PHP function

Question

I have an issue adding  bootstrap Table With Sorting, Searching and Paging, This is my Code :

<div class="data-content">
<span>REPORT SELECTION</span>
<div class="data-table" id="tableData">
<?php
$qry="select id, name, identity, created, payOption, amount, receivedBy from payment" ;
$result = mysqli_query($conn,$qry);

if ($result->num_rows > 0) {
    echo "<table id='dataTable'><tr><th>Payer</th><th>Passport/IC No</th><th>Date Paid</th><th>Payment Type</th><th>Payment Amount</th><th>Received by</th><th>Payment Receipt</th></tr>";

    while($row = $result->fetch_assoc()) {
        echo "<tr id=".$row["id"]."><td>".$row["name"]."</td><td>".$row["identity"]."</td><td>".$row["created"]."</td><td>".$row["payOption"]."</td><td>".$row["amount"]."</td><td>".$row["receivedBy"]."</td><td><a href='invoice.php' onclick='sessionFunction(".$row["id"].")'>View</a></td></tr>";
    }
    echo "</table>";
} else {
}
?>
</div>
</div>

The original output : 

I have tried this:

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">   
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link rel="stylesheet" 

href="http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css"></style>
<script type="text/javascript" 

src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" 

src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

But didn't work. I have also tried the script function but didn't get the results. Can someone please help me with this issue?