How can I call a javascript function repeatedly?

Question

Accessing data using jquery ajax in my asp.net core project. Using a common paginateTable function below my table. Now we can use this function in every page by placing this function in js folder of wwwroot folder. Meaning I want to use this function in every table I have but don't want to write the code again and again.

        function loadData() {
          
            debugger
            $.ajax({
                url: "/BankTransaction/bankblace",
                type: 'Get',
                datatype: 'json',
                success: function (data) {
                    $('#my_Lefttbl tbody').empty();
                    $.each(data, function (i, item) {
                        var rows = "<tr>"
                            + "<td date-lable='Bank Name'>" + item.bankName + "</td>"
                            + "<td date-lable='A/C NO'>" + item.accountNo + "</td>"
                            + "<td date-lable='Debited'>" + item.blance + "</td>"
                            + "</tr>";
                        $('#my_Lefttbl tbody').append(rows);
                    });
// This is Pagenation Code Start

let currentPage = 1;
let rowsPerPage = 20;
let totalPages;
const pageNumbers = document.getElementById("pageNumbers");

function paginateTable() {
  let table = document.getElementById("myTable");
  let rows = Array.from(table.rows).slice(1);
  totalPages = Math.ceil(rows.length/rowsPerPage);

  rows.forEach(row=>row.style.display="none");

  let start = (currentPage - 1) * rowsPerPage;
  let end = start + rowsPerPage;
  rows.slice(start,end).forEach(row=>row.style.display = "");
  pageNumbers.innerHTML = "";
  createPageLink("<<",1);
  createPageLink("<",currentPage-1);

  let startPageNumber = currentPage < 5 ? 1 : (currentPage>totalPages-2?totalPages-4 : currentPage-2);
  let endPageNumber =totalPages<5 ? totalPages : (currentPage<=totalPages -2 ? startPageNumber+4 : totalPages);
  for (let i=startPageNumber;i<=endPageNumber;i++) {
    createPageLink(i,i);
  }
  createPageLink(">",currentPage+1);
  createPageLink(">>",totalPages);

  setActivePageNumber();
  from.innerHTML = (currentPage-1)*rowsPerPage+1;
  to.innerHTML = currentPage === totalPages ? rows.length : (currentPage)*rowsPerPage;
  totalTableEntries.innerHTML = rows.length;

}

paginateTable();

function changePage(e,pageNumber) {
  if((pageNumber == 0)||(pageNumber==totalPages+1)) return;
  e.preventDefault();
  currentPage = pageNumber;
  pageNumberInput.value = "";
  paginateTable();
}

function setActivePageNumber() {
  document.querySelectorAll("#pageNumbers a").forEach(a=>{
    if(a.innerText == currentPage) {
      a.classList.add("active");
    }
  });
}

function createPageLink(linkText,pageNumber) {
  let pageLink = document.createElement("a");
  pageLink.href = "#";
  pageLink.innerHTML = linkText;
  pageLink.addEventListener("click",function(e){
    changePage(e,pageNumber);
  });
  pageNumbers.appendChild(pageLink);
}

goToPageButton.addEventListener("click",(e)=>{
  changePage(e,pageNumberInput.value);
});


// This is Pagenation Code End
               
 }
            });
        }

Answer 1

Meaning I want to use this function in every table I have but don't want to write the code again and again.

Move the code you want to share in a file. The pages in your application can reference the file which is like copying the code to a Razor Page or View.

https://www.w3schools.com/tags/att_script_src.asp

Copy the code between "Pagenation Code Start" and "Pagenation Code End" to a js file and save the file in wwwroot/js. Then create a reference to the js file in the _layout.cshtml file.

<script src="~/js/my.js" asp-append-version="true"></script>

The code will be available in every page. If you want only specific pages to use the code then put the JavaScript code in a partial and call the partial. An example of doing this is the _ValidationScriptsPartial.cshtml file.

It looks like the following function initializes your code.

paginateTable();

You'll call this function in your View or Razor Page that hosts the table and the JS file.