function paginateData(
  formID,
  rootPath,
  initPage,
  initPerPage,
  initOrder,
  initOrderBy,
) {
  return {
    page: initPage,
    perPage: initPerPage,
    order: initOrder || "ASC",
    orderBy: initOrderBy || "name",

    goToPage(n) {
      this.page = n;
      this.submit();
    },

    handleSortChange(value) {
      const [field, direction] = value.split("|");
      this.orderBy = field;
      this.order = direction;
      this.page = 1; // Reset to first page when sorting
      this.submit();
    },

    setPerPage(n) {
      this.perPage = n;
      this.page = 1; // Reset to first page when changing per page
      this.submit();
    },

    submit() {
      var url = `${rootPath}?page=${this.page}&per_page=${this.perPage}&order=${this.order}&order_by=${this.orderBy}`;
      htmx.find("#pagination-page").value = this.page;
      htmx.find("#pagination-per-page").value = this.perPage;
      htmx.find("#sort-order").value = this.order;
      htmx.find("#sort-order-by").value = this.orderBy;
      htmx.find(`#${formID}`).setAttribute("hx-post", url);
      htmx.process(`#${formID}`);
      htmx.trigger(`#${formID}`, "submit");
    },
  };
}