initiate datatables on xp:table control

Question

On an XPage I have a table component:

<xp:table id="tblProposals">

on which I want to initiate the datatables plugin on via 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>

my JS function starts as followed:

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,...

when I choose a normal html table with id (e.g. and run 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 is generated just fine.

It seems the datatables plugin is not so happy with the dynamic id or am I missing something??

The main problem is that XPages generate colon's in ID's. these need to be escaped if you want to use them in jquery.... see https://stackoverflow.com/questions/5552462/handling-colon-in-element-id-with-jquery — umeli, Mar 12 '18 at 16:27

score 3 · Accepted Answer · answered Mar 09 '18 at 14:05

What you get with x$("#{id:tblProposals}") is not the id but the DOM jQuery wrapped DOM object already, if I'm not mistaken.

Then, you repeat the DataTable() call twice: before calling initProposals and inside it. I think you can remove one.

At this point you might want to change what you pass to initProposals, either the id or the object, or any of them and then handle it in the method. You could do something like this:

<xp:scriptBlock value="$(document).ready(function() {
        initProposals('#{id:tblProposals}', 'getProposals');
        $('table th:first').removeClass('sorting_asc');
    });"/>

Then you slightly modify your function:

function initProposals(id, method) {
    var element = $(document.getElementById(id));
    var table = element.DataTable();
    table.destroy();
    localStorage.clear();

    element.DataTable({

Hi Shillem, I know I should not work on Sundays but I just want to thank you for your assistance. Your suggestion does the trick. Must be related to teh DOM. — Patrick Kwinten, Mar 11 '18 at 15:30

score 0 · Answer 2 · answered Mar 09 '18 at 14:50

0

We are using styleClass property to initialize DataTable plugin. You can try this as an alternative method.

on client side javascript:

 $(".dtb").dataTable({

on table

<xp:table styleClass="table dtb">

answered Mar 09 '18 at 14:50

yunusy

71
1
3

initiate datatables on xp:table control

2 Answers2