在Powerapps Portals中，一個javascript function 第一次改分頁的時候好像沒有顯示變化

Question

每當我第一次加載頁面並更改數據表的頁碼時，addReadMore function（限制字符數低於 108 並在彈出窗口 window 中顯示剩余字符）似乎不起作用。 function運行在表的分頁變化事件和文檔就緒事件上。 我讀到這可能是緩存問題，但我無法理解如何修復它。 該表是通過使用 fetchxml 從表中獲取數據然后動態創建表來創建的。

這是我第一次加載頁面而不更改分頁時的情況：

圖片 1

這是我更改數據表的分頁時的情況：

圖 2

當我返回第一頁然后返回第二頁時，它工作正常：

圖 3

任何幫助或指導將不勝感激。

這是我的整個代碼：

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js">
</script>
<script src="https://cdn.datatables.net/1.10.22/js/dataTables.bootstrap4.min.js">
</script>{% assign clientId = request.params.id %}
<div class="row sectionBlockLayout" style="display: flex; flex-wrap: wrap; padding: 8px; margin: 0px; text-align: left; min-height: 100px;">
 {% if clientId %}
 <div class="modal" id="main-modal" style="background-color: rgba(0,0,0,0.4); display:none; width:100%;height:100%;">
  <div class="ShowHide" style="z-index: 9; max-width:100%;background-color:white;color:black;border-radius:10px; padding: 40px 30px 40px ;margin: 0;position: absolute;left:3%;right:3%;top: 50%;-ms-transform: translateY(-50%);transform: translateY(-50%)"> 
   <span class="close" id="close-modal" style="margin-right:-30px;color:black;margin-top:-50px;font-size:45px;font-weight: 600;display: inline-block;transform: rotate(45deg)"> +</span>
   <p class="main-modal-content" style="text-align:center; overflow:auto"></p>
  </div>
 </div>
 <div class="container" style="display: flex; flex-wrap: wrap;">
       <h1>My Bills Update</h1>
   <table class="table" id="sortTable">
    <thead>
     <tr>
      <th scope="col">Bill Version</th>
      <th scope="col">Account</th>
      <th scope="col">Bill Title</th>
      <th scope="col">Primary Sponsor</th>
      <th scope="col">Floor Sponsor</th>
      <th scope="col">Short Summary</th>
      <th scope="col">Last Action</th>
      <th scope="col">Action</th>
      <th scope="col">Priority</th>
      <th scope="col">Comments</th>
     </tr>
    </thead>
    <tbody id="bill-table"></tbody>
   </table>
  <!-- <div class="col-md-12 columnBlockLayout" style="display: flex; flex-direction: column;"></div> -->
 </div>
 {% else %}
 <div class="container" style="text-align:center;">
  <h1>Page Not Found</h1>
  <h2>Please check your website link.</h2>
 </div>
 {% endif %}
</div>
<script>
 let txt = "";
 let commentToShow;
 let billTable = document.getElementById('bill-table');
 let commentArray = [];
 let counter = 1;
 {% fetchxml billUpdate %}
 <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
  <entity name="cr60a_clientbill">
   <all-attributes />
   <filter type="and">
    <condition attribute="cr60a_client" operator="eq" value="{{clientId}}" ></condition>
    <condition attribute="createdon" operator="lt" value='{{ now | date_add_days: 1 | date: "yyyy-MM-dd HH:mm:ss" }}' />
   </filter>
   <link-entity name="cr60a_bill" from="cr60a_billid" to="cr60a_billnumber" link-type="inner" alias="aa" >
    <all-attributes />
   </link-entity>
  </entity>
 </fetch>
 {% endfetchxml %}
 {% for bill in billUpdate.results.entities %}
  {% fetchxml billingMaterial %}
   <fetch version="1.0" output-format="xml-platform" mapping="logical" distinct="false">
    <entity name="cr60a_bill">
     <all-attributes />
     <filter type="and">
      <condition attribute="cr60a_billid" operator="eq" value="{{bill.cr60a_billnumber.id}}" />
      <condition attribute="createdon" operator="lt" value='{{ now | date_add_days: 1 | date: "yyyy-MM-dd HH:mm:ss" }}' />
     </filter>
    </entity>
   </fetch>
  {% endfetchxml %}
  {% for billMaterial in billingMaterial.results.entities %}
   {% assign shortTitle = billMaterial.cr60a_shorttitle %}
   {% assign primarySponser = billMaterial.cr60a_primarysponsor %}
   {% assign floorSponser = billMaterial.cr60a_floorsponsor %}
   {% assign shortSummary = billMaterial.cr60a_shortsummary %}
   {% assign lastAction = billMaterial.cr60a_lastaction %}
   {% assign billUrl = billMaterial.cr60a_billurl %}
   {% assign billVersion = billMaterial.cr60a_billversion %}
  {% endfor %}
  
  {% assign comment = bill.cr60a_comments %}
  
  commentArray.push({Id: `comment-${counter}`,Value: `{{comment}}`});
  
  txt += `<tr style= "max-height:30px; overflow: hidden;">
     <td><a href="{{billUrl}}" target="_blank">
                         <div style="height:100%;width:100%">
             {{billVersion}}
          </div>
       </a></td>
     <td>{{bill.cr60a_client.name}}</td>
     <td>{{shortTitle}}</td>
     <td>{{primarySponser}}</td>
     <td>{{floorSponser}}</td>
     <td>{{shortSummary}}</td>
     <td>{{lastAction}}
     <td>{{bill.cr60a_action.label}}</td>
     {% if bill.cr60a_priority.label == "High"  %}
      <td style="text-align: center;"><span class="chip" style="background-color:rgb(216, 69, 23);color:white;">{{bill.cr60a_priority.label}}</span></td>
     {% elseif bill.cr60a_priority.label == "Medium" %}
      <td style="text-align: center;"><span class="chip" style="background-color:rgb(249, 168, 39);color:white;">{{bill.cr60a_priority.label}}</span></td>
     {% elseif bill.cr60a_priority.label == "Low" %}
      <td style="text-align: center;"><span class="chip" style="background-color:rgb(48, 127, 52);color:white;">{{bill.cr60a_priority.label}}</span></td>
                              {% else %}
                               <td style="text-align: center;"><span class="chip" style="background-color:rgb(255, 255, 255);color:black;">{{bill.cr60a_priority.label}}</span></td>

     {% endif %}
     {% if comment and comment.size > 100 %} 
    <td id="comment-${counter}" class="addReadMore showlesscontent">
      {{ bill.cr60a_comments }}
    </td>
    {% else %}
    <td id="comment-${counter}" >
      {{ bill.cr60a_comments }}
    </td>
    {% endif %}
    </tr>`;
    counter = counter + 1;
 {% endfor %}



  billTable.innerHTML += txt;
  
  
console.log($('.see-more').parent().text());
let x = document.getElementsByClassName("main-modal-content")[0];
let y = document.getElementById("main-modal");
let closeModal = document.getElementById("close-modal");

///////
function AddReadMore() {
    //This limit you can set after how much characters you want to show Read More.
    var carLmt = 108;
    // Text to show when text is collapsed
    var readMoreTxt = " ... Read More";
    // Text to show when text is expanded
    var readLessTxt = " Read Less";


    //Traverse all selectors with this class and manupulate HTML part to show Read More
    $(".addReadMore").each(function() {
        if ($(this).find(".firstSec").length)
            return;

        var allstr = $(this).text();
        if (allstr.length > carLmt) {
            var firstSet = allstr.substring(0, carLmt);
            var secdHalf = allstr.substring(carLmt, allstr.length);
            var strtoadd = firstSet + "<span class='SecSec'>" + secdHalf + "</span><span class='readMore'  title='Click to Show More'>"+ readMoreTxt; //+ "</span><span class='readLess' title='Click to Show Less'>" + readLessTxt + "</span>";
            $(this).html(strtoadd);
        }

    });
    //Read More and Read Less Click Event binding
    $(document).on("click", ".readMore,.readLess", function() {
        //$(this).closest(".addReadMore").toggleClass("showlesscontent showmorecontent");
        console.log("sadsadsd",$(this).parent().attr("id"))
        commentArray.forEach(e => {
            console.log(e.Id);
            console.log(e.Value);
            if (e.Id == $(this).parent().attr("id")) {
                commentToShow = e.Value;
            }
        });
        $('.main-modal-content').html(commentToShow);
        $('#main-modal').show();
    });
    $('.close').on("click", function() {
        $('#main-modal').hide();
    })
}
$(document).ready(function() {
    //Calling function after Page Load
     AddReadMore();
});
var table;
function makeDataTable(){
     table = $('#sortTable').DataTable({
   scroller: true,
   scrollY: 400,
      scrollCollapse: true,
   // responsive: true,
   // fixedColumns: false,
  });
  table.on('page', function () {
            AddReadMore();
        });
  };
makeDataTable();
function fireSomethingNew() {
      table.on('page', function () {
            AddReadMore();
        });
};
    

///////

</script>

Answer 1

問題現已解決。 事實證明，我必須將第 function 頁上的表格替換為抽獎 function 上的表格。

table.on('draw', function () {
        AddReadMore();
    });

};