JS Sort Rows without Refreshing the Page

When entering data, the rows can be sorted. If the function of expanded sort is applied, the page refreshes every time you clicked the table header, which causes the data you just filled out to be refreshed.

In order to solve this problem, we can use JavaScript to realize the function of sorting without refreshing the page. The effect is as follows:

2.1 Prepare template

1) Open the designer, add a new template, and create a dataset for the template. The SQL statement is:

SELECT * FROM Product where ProductId<20

2) Drag the data columns in the dataset to the cell and set the style as follows:

2.2 Add JavaScript

Select Template > WEB Attributes > Data Entry Settings, choose to individually set for the template, and then add the Loading End event:

The JavaScript code is as follows:

function sortTable(table, idx) {
  var otable = document.getElementById(table),
    otody = otable.tBodies[0],
    otr = otody.rows,
    tarr = [];
  for (var i = 1; i < otr.length; i++) {
    tarr[i - 1] = otr[i];
  };
  if (otody.sortCol == idx) {
    tarr.reverse();
  } else {
    tarr.sort(function (tr1, tr2) {
      var value1 = tr1.cells[idx].innerHTML;
      var value2 = tr2.cells[idx].innerHTML;
      if (!isNaN(value1) && !isNaN(value2)) {
        return value1 - value2;
      } else {
        return value1.localeCompare(value2);
      }
    })
  }
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < tarr.length; i++) {
    fragment.appendChild(tarr[i]);
  };
  otody.appendChild(fragment);
  otody.sortCol = idx;
}
//Get the header of the page and set the click event  
    $("#r-0-0 td").bind("click", function() {
        //Get the clicked column index
        var index = $(this).parents("tr").find("td").index($(this));
        //Get the id of the table in the div of class=page-block
        var tableID = $("div.sheet-container table").attr("id");
        //Call the sorting method, pass the value, 0 is the id of this table, you can get the id of the table through F12  
        sortTable(tableID, index);
    });

Note: 

• $("#r-0-0 td") means to get all td under the first tr, because this page is just a table. 

• If there are other modules displayed on the page, corresponding modifications need to be made. You can use F12 on the page to get the corresponding element.

Click Data Entry Preview, and the effect is as shown in the beginning.

JS sort.cpt