Jquery Pagination doesn't work when the Next Button is pressed - php

Question

I have made ​​a script for Pagination and it can be displayed.
I will be a problem when the Next Button is pressed, the Pagination can't continue to the next page.
when the url has changed but the page remains in the first place.
eg:
[1]. http:// localhost /pagination/
This works and can display data 1-10 on page 1.
[2] http:// localhost /pagination/?page=2
paging should've been on page 2, but the data shown is 1-10 (supposedly 11-20)
This is the code:
// data_students.php
<?php
require 'conn.php';
open_conn();
?>
<table class="table table-condensed table-bordered table-hover" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th style="width:20px">No</th>
<th style="width:120px">NIM</th>
<th style="width:200px">Name</th>
<th>Address</th>
<th style="width:120px">Room</th>
<th style="width:120px">Status</th>
<th style="width:40px"></th>
</tr>
</thead>
<tbody>
<?php
$i = 1;
$num_pages = 10;
$num_data = mysql_num_rows(mysql_query("SELECT * FROM students"));
$total_page = ceil($num_data / $num_pages);
// query searching
if(isset($_POST['search'])) {
$key = $_POST['search'];
echo "<strong>Search results for keyword: $key</strong>";
$query = mysql_query("
SELECT * FROM students
WHERE nim LIKE '%$key%'
OR name LIKE '%$key%'
OR address LIKE '%$key%'
OR room LIKE '%$key%'
OR status LIKE '%$key%'
");
// query if the specified page number
} elseif(isset($_GET['page']) && $_GET['page']!="") {
$page = $_GET['page'];
$i = ($page - 1) * $num_pages + 1;
$query = mysql_query("SELECT * FROM students ORDER BY name ASC LIMIT ".(($page - 1) * $num_pages).", $num_pages");
// query when there is no parameter page and search
} else {
$query = mysql_query("SELECT * FROM students ORDER BY name ASC LIMIT 0, $num_pages");
}
// show database students
while($data = mysql_fetch_array($query)) {
if($data['status']==1) {
$status = "Active";
} else {
$status = "Off";
}
?>
<tr>
<td><?php echo $i ?></td>
<td><?php echo $data['nim'] ?></td>
<td><?php echo $data['name'] ?></td>
<td><?php echo $data['address'] ?></td>
<td><?php echo $data['room'] ?></td>
<td><?php echo $status ?></td>
<td>
<a href="#dialog-students" id="<?php echo $data['kd_mhs'] ?>" class="change" data-toggle="modal">
<i class="icon-pencil"></i>
</a>
<a href="#" id="<?php echo $data['kd_mhs'] ?>" class="delete">
<i class="icon-trash"></i>
</a>
</td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
<?php if(!isset($_POST['search'])) { ?>
<!-- to display the menu page -->
<div class="pagination pagination-right">
<ul>
<?php for($i = 1; $i <= $total_page; $i++) { ?>
<li class="page" id="<?php echo $i ?>"><?php echo ''.$i.'' ;?></li>
<?php } ?>
</ul>
</div>
<?php } ?>
<?php
close_conn();
?>
this is jquery:
// students-app.js
(function($) {
// function is executed after the entire document is displayed
$(document).ready(function(e) {
var kd_mhs = 0;
var main = "data_students.php";
// show data students from data_students.php in index.php <div id="data-students"></div>
$("#data-students").load(main);
// when the search inputbox filled
$('input:text[name=searching]').on('input',function(e){
var v_search = $('input:text[name=searching]').val();
if(v_search!="") {
$.post(main, {search: v_search} ,function(data) {
$("#data-students").html(data).show();
});
} else {
$("#data-students").load(main);
}
});
// when the button page is pressed
$('.page').live("click", function(event){
// take the value of the inputbox
kd_page = this.id;
$.post(main, {page: kd_page} ,function(data) {
$("#data-students").html(data).show();
});
});
});
}) (jQuery);