I'm using Grid.js accessing server data and performing server side sorting (this on Grid.js doc ).
My problem is that when I try to sort a column it makes a number of calls to the server equal to the number of sortable columns.
Here's an example on JSFiddle
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://unpkg.com/gridjs/dist/theme/mermaid.min.css"
rel="stylesheet"
/>
</head>
<body>
<div id="wrapper"></div>
<script src="https://unpkg.com/gridjs/dist/gridjs.umd.js"></script>
<script type="text/javascript">
new gridjs.Grid({
columns: ['Title', 'Director', 'Producer'],
sort: {
multiColumn: false,
server: {
url: (prev, columns) => {
if (!columns.length) return prev;
const col = columns[0];
const dir = col.direction === 1 ? 'asc' : 'desc';
let colName = ['title', 'director', 'producer'][col.index];
return `${prev}&order=${colName}&dir=${dir}`;
}
}
},
pagination: {
limit: 3,
server: {
url: (prev, page, limit) => `${prev}?limit=${limit}&offset=${page * limit}`
}
},
server: {
url: 'https://swapi.dev/api/films?',
then: data => data.results.map(m => [
m.title, m.director, m.producer
]),
total: data => data.count
}
}).render(document.getElementById("wrapper"));
</script>
</body>
</html>
I want to understand why it does it and how to avoid it.
Many thanks
