mirror of
https://github.com/getnamingo/registry.git
synced 2025-06-25 21:54:46 +02:00
Refactored domains page for huge sets of data
This commit is contained in:
Pinga
parent
efd47db6f1
commit
14cefb9495
2 changed files with 76 additions and 22 deletions
|
|
@ -45,10 +45,10 @@
|
|||
<div class="card-body border-bottom py-3">
|
||||
<div class="d-flex">
|
||||
<div class="text-secondary">
|
||||
<button class="btn btn-info btn-icon" onclick="downloadCSV()"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1"></path><path d="M17 8l2 8l2 -8"></path><path d="M7 10a2 2 0 1 0 -4 0v4a2 2 0 1 0 4 0"></path></svg></button>
|
||||
<button class="btn btn-info btn-icon" onclick="downloadJSON()"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 16v-8l3 8v-8"></path><path d="M15 8a2 2 0 0 1 2 2v4a2 2 0 1 1 -4 0v-4a2 2 0 0 1 2 -2z"></path><path d="M1 8h3v6.5a1.5 1.5 0 0 1 -3 0v-.5"></path><path d="M7 15a1 1 0 0 0 1 1h1a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h1a1 1 0 0 1 1 1"></path></svg></button>
|
||||
<button class="btn btn-green btn-icon" onclick="downloadXLSX()"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M4 15l4 6"></path><path d="M4 21l4 -6"></path><path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"></path><path d="M11 15v6h3"></path></svg></button>
|
||||
<button class="btn btn-red btn-icon" onclick="downloadPDF()"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 8v8h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-2z"></path><path d="M3 12h2a2 2 0 1 0 0 -4h-2v8"></path><path d="M17 12h3"></path><path d="M21 8h-4v8"></path></svg></button>
|
||||
<button class="btn btn-info btn-icon" onclick="downloadCSV()" title="Export page"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 15a1 1 0 0 0 1 1h2a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-2a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1"></path><path d="M17 8l2 8l2 -8"></path><path d="M7 10a2 2 0 1 0 -4 0v4a2 2 0 1 0 4 0"></path></svg></button>
|
||||
<button class="btn btn-info btn-icon" onclick="downloadJSON()" title="Export page"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M20 16v-8l3 8v-8"></path><path d="M15 8a2 2 0 0 1 2 2v4a2 2 0 1 1 -4 0v-4a2 2 0 0 1 2 -2z"></path><path d="M1 8h3v6.5a1.5 1.5 0 0 1 -3 0v-.5"></path><path d="M7 15a1 1 0 0 0 1 1h1a1 1 0 0 0 1 -1v-2a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-2a1 1 0 0 1 1 -1h1a1 1 0 0 1 1 1"></path></svg></button>
|
||||
<button class="btn btn-green btn-icon" onclick="downloadXLSX()" title="Export page"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M14 3v4a1 1 0 0 0 1 1h4"></path><path d="M5 12v-7a2 2 0 0 1 2 -2h7l5 5v4"></path><path d="M4 15l4 6"></path><path d="M4 21l4 -6"></path><path d="M17 20.25c0 .414 .336 .75 .75 .75h1.25a1 1 0 0 0 1 -1v-1a1 1 0 0 0 -1 -1h-1a1 1 0 0 1 -1 -1v-1a1 1 0 0 1 1 -1h1.25a.75 .75 0 0 1 .75 .75"></path><path d="M11 15v6h3"></path></svg></button>
|
||||
<button class="btn btn-red btn-icon" onclick="downloadPDF()" title="Export page"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 8v8h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-2z"></path><path d="M3 12h2a2 2 0 1 0 0 -4h-2v8"></path><path d="M17 12h3"></path><path d="M21 8h-4v8"></path></svg></button>
|
||||
</div>
|
||||
<div class="ms-auto text-secondary">
|
||||
Search:
|
||||
|
|
|
|||
|
|
@ -39,14 +39,79 @@
|
|||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
var searchTerm = ""; // global variable to hold the search term
|
||||
|
||||
function updateSearchTerm(term) {
|
||||
searchTerm = term;
|
||||
table.replaceData();
|
||||
}
|
||||
|
||||
table = new Tabulator("#domainTable", {
|
||||
ajaxURL:"/api/records/domain?join=contact&join=domain_status", // Set the URL for your JSON data
|
||||
ajaxConfig:"GET",
|
||||
pagination:"local",
|
||||
paginationSize:10,
|
||||
ajaxResponse:function(url, params, response){
|
||||
return response.records;
|
||||
pagination: true,
|
||||
paginationMode: "remote",
|
||||
paginationSize: 10,
|
||||
ajaxURL: "/api/records/domain",
|
||||
ajaxParams: {
|
||||
join: "contact",
|
||||
join: "domain_status"
|
||||
},
|
||||
ajaxURLGenerator: function(url, config, params) {
|
||||
var queryParts = ["join=contact", "join=domain_status"];
|
||||
|
||||
// Handle search term
|
||||
if (searchTerm) {
|
||||
queryParts.push("filter1=name,cs," + encodeURIComponent(searchTerm));
|
||||
queryParts.push("filter2=crdate,cs," + encodeURIComponent(searchTerm));
|
||||
queryParts.push("filter3=exdate,cs," + encodeURIComponent(searchTerm));
|
||||
}
|
||||
|
||||
// Handle sorting
|
||||
if (params.sorters && params.sorters.length) {
|
||||
params.sorters.forEach(function(sorter) {
|
||||
queryParts.push("order=" + sorter.field + "," + sorter.dir);
|
||||
});
|
||||
} else {
|
||||
queryParts.push("order=id"); // default sorting
|
||||
}
|
||||
|
||||
// Include pagination parameters
|
||||
if (params.page) {
|
||||
queryParts.push("page=" + params.page + "," + params.size);
|
||||
}
|
||||
|
||||
return url + "?" + queryParts.join("&");
|
||||
},
|
||||
ajaxResponse: function(url, params, response) {
|
||||
if (response && Array.isArray(response.records) && typeof response.results === 'number') {
|
||||
var lastPage = Math.ceil(response.results / this.options.paginationSize);
|
||||
return {
|
||||
last_page: lastPage, // Calculated total number of pages
|
||||
data: response.records, // Data for the current page
|
||||
};
|
||||
} else {
|
||||
console.error('Unexpected response format', response);
|
||||
return { last_page: 1, data: [] };
|
||||
}
|
||||
},
|
||||
dataReceiveParams: {
|
||||
"last_page": "results", // Mapping 'results' to 'last_page'
|
||||
},
|
||||
sortMode: "remote",
|
||||
columnSorted:function(column, dir, sorters){
|
||||
table.setData();
|
||||
},
|
||||
headerSortElement: function(column, dir){
|
||||
switch(dir){
|
||||
case "asc":
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 15l6 -6l6 6" /></svg>';
|
||||
break;
|
||||
case "desc":
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M6 9l6 6l6 -6" /></svg>';
|
||||
break;
|
||||
default:
|
||||
return '<svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 9l4 -4l4 4m-4 -4v14" /><path d="M21 15l-4 4l-4 -4m4 4v-14" /></svg>';
|
||||
}
|
||||
},
|
||||
layout:"fitDataFill",
|
||||
responsiveLayout: "collapse",
|
||||
|
|
@ -67,18 +132,7 @@
|
|||
});
|
||||
var searchInput = document.getElementById("search-input");
|
||||
searchInput.addEventListener("input", function () {
|
||||
var term = searchInput.value;
|
||||
|
||||
table.setFilter(function (data) {
|
||||
// Convert data fields to strings and check if they include the term
|
||||
return (
|
||||
String(data.name).toLowerCase().includes(term.toLowerCase()) ||
|
||||
String(data['registrant.identifier']).toLowerCase().includes(term.toLowerCase()) ||
|
||||
String(data.crdate).toLowerCase().includes(term.toLowerCase()) ||
|
||||
String(data.exdate).toLowerCase().includes(term.toLowerCase()) ||
|
||||
String(data.domain_status).toLowerCase().includes(term.toLowerCase())
|
||||
);
|
||||
});
|
||||
updateSearchTerm(searchInput.value);
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue