每当我加载一个页面并第一次更改数据表的页码时,addReadMore函数(它将字符数限制在108以下,并在弹出窗口中显示其余字符)似乎不起作用。该函数在表的分页更改事件和文档就绪事件上运行。我读到过这可能是缓存问题,但我不明白如何修复它。表是通过使用fetchxml从表中提取数据然后动态创建表来创建的。
下面是我第一次加载页面而不更改分页的情况:
Image 1
下面是我更改Datatable分页的情况:
Image 2
当我回到第一页,然后第二页时,它工作得很好:
Image 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>
1条答案
按热度按时间lqfhib0f1#
问题现在已经解决了。原来我不得不用绘图函数替换页面上的表格函数。
};