I am trying to use this Pagination library in my HTML table page (specifically light theme) but somehow I am not able to understand how to plugin this library in such a way
As far as I can see it on the website of that paginations plugin, the plugin itself doesn't do the actual pagination. The only thing it does is display a row of numbers, and display the correct buttons depending on the page you're on.
However, to actually paginate, you have to write the appropriate Javascript yourself. This should be placed in stead of this Javascript:
function test(pageNumber)
{
var page="#page-id-"+pageNumber;
$('.select').hide()
$(page).show()
}
Which is code I'm guessing you've copy-pasted from somewhere but at the moment doesn't really do anything. If you don't know Javascript, going with another library that actually does pagination of a table is something you probably want to do.
you can use this function . Its taken from https://convertintowordpress.com/simple-jquery-table-pagination-code/
function pagination(){
var req_num_row=10;
var $tr=jQuery('tbody tr');
var total_num_row=$tr.length;
var num_pages=0;
if(total_num_row % req_num_row ==0){
num_pages=total_num_row / req_num_row;
}
if(total_num_row % req_num_row >=1){
num_pages=total_num_row / req_num_row;
num_pages++;
num_pages=Math.floor(num_pages++);
}
for(var i=1; i<=num_pages; i++){
jQuery('#pagination').append("<a href='#' class='btn'>"+i+"</a>");
}
$tr.each(function(i){
jQuery(this).hide();
if(i+1 <= req_num_row){
$tr.eq(i).show();
}
});
jQuery('#pagination a').click(function(e){
e.preventDefault();
$tr.hide();
var page=jQuery(this).text();
var temp=page-1;
var start=temp*req_num_row;
//alert(start);
for(var i=0; i< req_num_row; i++){
$tr.eq(start+i).show();
}
});
}