JS Number the Rows after Hide Some Rows

  • Last update:January 15, 2021
  • I. Description

    If using Conditional Formatting to hide rows of the expanded data, the sequence numbers which were made before expansion should be changed.

    We can use JS to hide rows and renumber the visible rows.

    II. Solution

    Judge whether a line has been hidden by JavaScript, and then number those that are not hidden.

    III. Demo

    1) Create a new dataset ds1:

    SELECT * FROM Sales_Volume

    image.png    2) design report as follows. The parent cell of A2 is B2:

           

    3) Select cell B2, and set Conditional Formatting to hide rows whose value in column Region is North China. The settings are as shown below:

    4) Select cell F2,select  Conditional Formatting to hide rows with sales volume greater than 300. The settings are shown below:

    5) Open Template > Web Attributes and select Pagination Preview. Select Individually set for the template,and add a Loading End event:

    The JS code:

    $(".x-table tr:visible").each(function(i){
    if(i>0){
       $(this).find("td:first").text(i);
    }
    })

    If the first row is duplicated or frozen, then change the JS code as:

    $(".x-table:last tr:visible").each(function(i){
    $(this).find("td:first").text(i+1);
    })

    IV. Preview

    Save report, select Pagination Preview, and the results are as shown below:

    image (5).png

    Tips: Not support mobile devices.

    V. Completed Template

    Attachment List


    Theme: Report Application
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    6s后關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy