How to do pagination of table data using the received JSON table data in client side without bootstrap?

I have received the table rows data in JSON form using PHP server pages and received the JSON table rows with each new search condition new table is displayed. But the problem is when i have more number of rows so i want to paginate it and also allow user to select the number of rows he want to see like 10, 20, 30.

In short, i want to achieve the following result:

if number of rows are 200 and user want to see to 25 rows at a time then 200/25 means (previous 1->2->3->4.....->8 Next) 8 numbers display at the top of table which allow user to jump to desired page and see rows.

I tried below things in my loadtable.js file as shown below. Also i am attaching both my server side PHP file search.php and client side script loadtable.js which is processing the JSON data and do the pagination task.

//###########################################
// Pagination code start
//###########################################

$("#pagination").attr('style','display:block;');

$("#pagination").html("<p1>Total number of records fetched: "+result.length+"</p1><h5 style='display: inline-block;float:left;width: 150px;'>Number of rows/page: &nbsp;&nbsp; &nbsp;&nbsp;<select id='number-of-records-per-page' onchange='num_of_records(this)' style='width:60px;'><option value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option><option value='50'>50</option></select></h5><br><br>");

$("#pagination").append("<div id='nav-pagination' style='float:left;'><a href='#'>&laquo;</a><a class='active' href='#'>1</a></div>");

var total_num_of_rows = result.length;

var number_of_rows_per_page = $('#pagination').find('#number-of-records-per-page option:selected').val();

console.log(total_num_of_rows)
console.log(number_of_rows_per_page)

for (i = 1; i < total_num_of_rows/number_of_rows_per_page; i++) {

     $("#nav-pagination").append("<a href='#'>"+(i+1)+"</a>");

}

$("#nav-pagination").append("<a href='#'>&raquo;</a></div>");

 //###########################################
// Pagination code end
//###########################################

The problem is i am doing pagination inside ajax success funtion success:function(data){ which i think will be called once when the JSON result is received from the Server side. Also as i m beginner in ajax feeling difficulty to proceed. Please help.

Complete code of client side script loadtable.js

// This is script to load table based on filter section

$(document).ready(function() {

var delay = 1000;

// Campaign Submit Info
$('[name="search_submit"]').click(function(e) {

$('#load-csv-file-button').attr('style','display:none;');
$("#filterRecords").attr('style','display:block;');
$('#add_lead_info').attr('style','display:none;');

e.preventDefault();

var lead_owner = $('#filterformpost').find('#lead_owner_select option:selected').val();
var lead_status = $('#filterformpost').find('#lead_status_select option:selected').val();
var campaign_status = $('#filterformpost').find('#campaign_status_select option:selected').val();
var company_name = $('#filterformpost').find('#company_name_select option:selected').val();
var tech_area = $('#filterformpost').find('#tech_area_select option:selected').val();
var firm_size = $('#filterformpost').find('#firm_size_select option:selected').val();
var firm_type = $('#filterformpost').find('#firm_type_select option:selected').val();
var country_name = $('#filterformpost').find('#country_name_select option:selected').val();
var state_name = $('#filterformpost').find('#state_name_select option:selected').val();
var start_date = $('#filterformpost').find('#start_date_search').val();
var end_date = $('#filterformpost').find('#end_date_search').val();        

$.ajax({
type: "POST",
url: "./server/search.php",
data: {
"lead_owner": lead_owner,
"lead_status": lead_status,
"campaign_status": campaign_status,
"company_name": company_name,
"tech_area": tech_area,
"firm_size": firm_size,
"firm_type": firm_type,
"country_name": country_name,
"state_name": state_name,
"start_date": start_date,
"end_date": end_date
},
beforeSend: function() {
$('.search_lead_filter_message_box').html(
    '<img src="tenor.gif" width="40" height="40"/>'
);
},

success:function(data){

var result = $.parseJSON(data);                       

$("#filterRecords").empty();

//###########################################
// Pagination code start
//###########################################

$("#pagination").attr('style','display:block;');

$("#pagination").html("<p1>Total number of records fetched: "+result.length+"</p1><h5 style='display: inline-block;float:left;width: 150px;'>Number of rows/page: &nbsp;&nbsp; &nbsp;&nbsp;<select id='number-of-records-per-page' onchange='num_of_records(this)' style='width:60px;'><option value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option><option value='50'>50</option></select></h5><br><br>");

$("#pagination").append("<div id='nav-pagination' style='float:left;'><a href='#'>&laquo;</a><a class='active' href='#'>1</a></div>");

var total_num_of_rows = result.length;

var number_of_rows_per_page = $('#pagination').find('#number-of-records-per-page option:selected').val();

console.log(total_num_of_rows)
console.log(number_of_rows_per_page)

for (i = 1; i < total_num_of_rows/number_of_rows_per_page; i++) {

     $("#nav-pagination").append("<a href='#'>"+(i+1)+"</a>");

}

$("#nav-pagination").append("<a href='#'>&raquo;</a></div>");

 //###########################################
// Pagination code end
//###########################################

var table='';

table = $("<table></table>");

table.append('<thead><th>#</th><th>Lead Name</th><th>Company</th><th>Email</th><th>Phone</th><th>Lead Owner</th></thead>'); 

table.append('<tbody></tbody>'); 

var i = 1;

$.each(result, function(key, value) {

    table.last().append("<tr><td>" + i + "</td><td><a target='_blank' href=./lead/index.html?lead_id="+ value['Lead_Id'] + "</a>" + value['FirstName'] + '' + value['LastName'] + "</td><td>" + value['Company'] + "</td><td><a href=mailto:" + value['Email'] + ">" + value['Email'] + "</a></td><td>" + value['Phone'] + "</td><td><a target='_blank' href=./account/index.html?user_id="+ value['LeadAddedBy'] + "</a>" + value['LeadAddedBy'] + "</td></tr>" );

    i = i + 1;                

});

table.after().append("<br><br>");               

$("#filterRecords").html(table);
$('.search_lead_filter_message_box').html('');

}           

});

});


});


function num_of_records(select){

    alert(select.options[select.selectedIndex].text);
    var number_of_rows_per_page = select.options[select.selectedIndex].text;

}

Complete code of server side PHP page to send encoded JSON data to process at client side search.php

<?php 

// send a JSON encoded array to client

include('connection.php');

$sqlFlag = 0;

function queryDelimiter(){
global $sqlFlag;
if ($sqlFlag == 0){
    $sqlFlag = 1;
    return ' WHERE ';
}else{
    return ' AND ';
}
}   

// $selectSQL = "SELECT * FROM tbl_main_lead_info as M, tbl_campaign_info as C";

$selectSQL = "SELECT * FROM tbl_main_lead_info as M";

if(isset($_POST['lead_status']) and strlen(trim($_POST['lead_status'])) > 0){
$selectSQL .= queryDelimiter()."M.LeadStatus = '".$_POST['lead_status']."'";
}

if(isset($_POST['lead_owner']) and strlen(trim($_POST['lead_owner'])) > 0){
$selectSQL .= queryDelimiter()."M.LeadAddedBy = '".$_POST['lead_owner']."'";
}

if(isset($_POST['company_name']) and strlen(trim($_POST['company_name'])) > 0){
$selectSQL .= queryDelimiter()."M.Company = '".$_POST['company_name']."'";
}       

if(isset($_POST['tech_area']) and strlen(trim($_POST['tech_area'])) > 0){
$selectSQL .= queryDelimiter()."M.TechArea = '".$_POST['tech_area']."'";
}

if(isset($_POST['firm_size']) and strlen(trim($_POST['firm_size'])) > 0){
$selectSQL .= queryDelimiter()."M.FirmSize = '".$_POST['firm_size']."'";
}

if(isset($_POST['firm_type']) and strlen(trim($_POST['firm_type'])) > 0){
$selectSQL .= queryDelimiter()."M.FirmType = '".$_POST['firm_type']."'";
}

if(isset($_POST['country_name']) and strlen(trim($_POST['country_name'])) > 0){
$selectSQL .= queryDelimiter()."M.Country = '".$_POST['country_name']."'";
}

if(isset($_POST['state_name']) and strlen(trim($_POST['state_name'])) > 0){
$selectSQL .= queryDelimiter()."M.State = '".$_POST['state_name']."'";
}

if(isset($_POST['start_date']) and strlen(trim($_POST['start_date'])) > 0){
$selectSQL .= queryDelimiter()."M.LastContactDate >='".$_POST['start_date']."'";
}

if(isset($_POST['end_date']) and strlen(trim($_POST['end_date'])) > 0){
$selectSQL .= queryDelimiter()."M.NextContactDate <= '".$_POST['end_date']."'";
}

$selectSQL .= " ORDER BY Lead_Id";

$result_array = array();

$result = $conn -> query ($selectSQL);

if(mysqli_num_rows($result) > 0){

while ($row = $result->fetch_assoc()) {

    array_push($result_array, $row);

}

}

echo json_encode($result_array);

$conn->close();

?>