Within an XPage, there is a table component:
<xp:table id="tblProposals">
I am looking to apply the datatables plugin to this table using a scriptblock component:
<xp:scriptBlock id="scriptInitProposals">
<xp:this.value><![CDATA[$(document).ready(function() {
var tableId = x$("#{id:tblProposals}");
$("#" + tableId.get(0).id).DataTable();
initProposals("#" + tableId.get(0).id,"getProposals");
$('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
</xp:scriptBlock>
The JavaScript function starts like this:
function initProposals(id, method) {
alert(id)
var db = $(id).DataTable();
db.destroy();
localStorage.clear();
var table = $(id).DataTable({
"pageLength": pageLength,
"ajax": "api.xsp/reports?method=" + method,...
If I select a normal HTML table with an ID (such as tblProposals) and run the scriptblock:
<xp:scriptBlock id="scriptInitProposals">
<xp:this.value><![CDATA[$(document).ready(function() {
$('#tblProposals').DataTable();
initProposals("#tblProposals","proposals");
$('table th:first').removeClass('sorting_asc');
});]]></xp:this.value>
</xp:scriptBlock>
The table gets generated successfully.
It appears that the datatables plugin is having issues with dynamic IDs. Am I overlooking something here?