Apply Default Sorting to a Column in Pivot Table DataPages

2 minutes to read

In this article, we will guide you on how to apply default sorting to a column in ascending or descending order in a Pivot Table DataPages.

Steps:

Add a Header and Footer in the Configure Pivot Table Fields screen of your Pivot Table Report wizard.
Disable the HTML Editor in the Header section.
Copy and paste the following code in the Header section:
Disable the HTML Editor in the Footer section.
Copy and paste the following code in the Footer section for ascending order: Or apply this code for descending order:
Change the number in the JavaScript code (‘table tr th:nth-child(2) span’) according to the order of which column applied with default sorting.
Save the DataPage.

Note: This article uses external HTML, JavaScript, or third-party solutions to add functionality outside of Caspio standard feature set. These solutions are provided “as is” without warranty, support or guarantee. The code within this article is provided as a sample to assist you in the customization of your web applications. You may need a basic understanding of HTML and JavaScript to implement successfully.
For assistance with further customization based on your specific application requirements, please contact our Professional Services team.

code1

<style>
body {
    display:none;
}
</style>

code2

 <script>
    document.addEventListener('DataPageReady', function(event) {
        let column = document.querySelector('table tr th:nth-child(2) span');

       column.click();

        var interval = setInterval(function() {
            document.querySelector('body').style.display = 'block';
            clearInterval(interval);
        }, 1000); 
    });
</script>

code3

<script>
    document.addEventListener('DataPageReady', function(event) {
        let column = document.querySelector('table tr th:nth-child(2) span');

        column.click();
        column.click();

        var interval = setInterval(function() {
            document.querySelector('body').style.display = 'block';
            clearInterval(interval);
        }, 1000); 
    });
</script>