the given below example we will learn how to implement pagination sorting filter in jquery in simple way step by step
Create an HTML page in your project name like “pagination.html” flow the given below HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How to implement pagination sorting filter in jquery</title>
</head>
<body>
<br /><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="pagenation.js"></script>
<link rel="stylesheet" href="https://tutorialshelper.com/demo/Css/dynamictable.css">
<div class="container" style="margin:30px">
<h1><a href="https://tutorialshelper.com/"> How to implement pagination sorting filter in jquery</a></h1>
sorting: <select id="maxRowsfortable">
<option value="10">10</option>
<option value="20">20</option>
<option value="30">30</option>
</select>
<div class="clearfix"><br /></div>
<div class="tables" id="showData"></div>
</div>
</body>
</html>
this example the HTML table will generate form API dynamically see the given below implemented jquery snippet code for dynamic HTML table
function dynamic_table(url) {
$.ajax({
url: url,
data: {
format: 'json'
},
error: function () {
$('#info').html('<p>An error has occurred</p>');
},
dataType: 'json',
success: function (data) {
var col = [];
window.cols = col;
for (var i = 0; i < data.length; i++) {
for (var key in data[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
col.push("Actons");
var table = document.createElement("table");
table.setAttribute('class', 'table blueTable');
table.setAttribute('id', 'mynewtable');
var tr = table.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
tr.appendChild(th);
}
for (var i = 0; i < data.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[i][col[j]];
}
var d = data[i].id;
tabCell.innerHTML = '<a href="#" onclick="return EditTable(' + data[i].id + ' )">Edit</a> | <a href="#" onclick="DeleteTable(' + data[i].id + ')">Delete</a></td>'
}
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
},
type: 'GET'
});
};
the above dynamic_table() function you will call at a page level
$(document).ready(function () {
dynamic_table("https://jsonplaceholder.typicode.com/posts");
getPagination('#mynewtable');
});
the dynamic_table() function can have one overload parameter will accept API
the above test API will return JSON formated data try to run the test API in your browser
try to run your HTML page you will get the dynamic HTML table, follow the below link for Dynamic table from JSON schema
table generation is done right now we will see the How to implement pagination sorting filter in jquery
given below code “maxRowsfortable” is select dropdown id. Add the given below jquery implemented functionality in your HTML page
function getPagination(table) {
var lastPage = 1;
$('#maxRowsfortable').on('change', function (evt) {
lastPage = 1;
$('.pagination').find("li").slice(1, -1).remove();
var trnum = 0;
var maxRows = parseInt($(this).val());
if (maxRows == 5000) {
$('.pagination').hide();
} else {
$('.pagination').show();
}
var totalRows = $(table + ' tbody tr').length;
$(table + ' tr:gt(0)').each(function () {
trnum++;
if (trnum > maxRows) {
$(this).hide();
} if (trnum <= maxRows) { $(this).show(); }
});
if (totalRows > maxRows) {
var pagenum = Math.ceil(totalRows / maxRows);
for (var i = 1; i <= pagenum;) {
$('.pagination #prev').before('<li data-page="' + i + '">\
<span>'+ i++ + '<span class="sr-only">(current)</span></span>\
</li>').show();
}
}
$('.pagination [data-page="1"]').addClass('active');
$('.pagination li').on('click', function (evt) {
evt.stopImmediatePropagation();
evt.preventDefault();
var pageNum = $(this).attr('data-page');
// get Max Rows from select option dropdowan #maxRowsfortable id is select option dropdowan
var maxRows = parseInt($('#maxRowsfortable').val());
if (pageNum == "prev") {
if (lastPage == 1) { return; }
pageNum = --lastPage;
}
if (pageNum == "next") {
if (lastPage == ($('.pagination li').length - 2)) { return; }
pageNum = ++lastPage;
}
lastPage = pageNum;
var trIndex = 0;
$('.pagination li').removeClass('active');
$('.pagination [data-page="' + lastPage + '"]').addClass('active');
$(table + ' tr:gt(0)').each(function () {
trIndex++;
if (trIndex > (maxRows * pageNum) || trIndex <= ((maxRows * pageNum) - maxRows)) {
$(this).hide();
} else { $(this).show(); }
});
});
}).val(10).change();
}
run you HTML page
the final output is:
thanks
Recommend articles: